@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

/* Global */

html {
    scroll-behavior: smooth;
}

:root
{
    --font : 'Inter', sans-serif;
    /* --color-1 : #ffffff;
    --color-2 : #f7f7ff;
    --color-3 : #eeedfd;
    --color-4 : #727de2;
    --color-5 : #666bd4;
    --color-6 : #4c4c5e;
    --color-7 : #000000;
    --color-8 : #c8ccf9;
    --color-9 : #bbbbc4;
    --color-10 : #6D6D6D; */
    /* --color-1 : #ffffff;
    --color-2 : #f7f7ff;
    --color-3 : #edf8fd;
    --color-4 : #6FBDB1;
    --color-5 : #59a499;
    --color-6 : #4c5e5a;
    --color-7 : #000000;
    --color-8 : #d0e6e3;
    --color-9 : #bbbbc4;
    --color-10 : #6D6D6D; */
    --color-1 : #ffffff;
    --color-2 : #f7f7f7;
    --color-3 : #eaeaea;
    --color-4 : #BC255E;
    --color-5 : #ab1a60;
    --color-6 : #5e4c55;
    --color-7 : #000000;
    --color-8 : #dadada;
    --color-9 : #bababa;
    --color-10 : #6D6D6D;
}

*
{
    font-family: var(--font);
}

body
{
    margin: 0;
    overflow-x: hidden;
    background: var(--color-3);
    padding-bottom: 4vh;
}

::selection
{
    background: var(--color-4);
    color: var(--color-3);
}

/* Homepage */

.authors
{
    position: fixed;
    z-index: 5;
    margin: 0;
    margin-right: 25px;
    bottom: 0;
    right: 0;
}

.authors .text
{
    font-size: 16px;
}

.authors .text a
{
    color: var(--color-4);
    transition: .3s ease;
}

.authors .text a:hover
{
    opacity: 60%;
}

.partner
{
    position: fixed;
    z-index: 5;
    margin: 0;
    margin-left: 25px;
    left: 0;
    bottom: 0;
}

.partner .text
{
    font-size: 16px;
}

.partner .text a
{
    color: var(--color-4);
    transition: .3s ease;
}

.partner .text a:hover
{
    opacity: 60%;
}

.progression
{
    position: absolute;
    z-index: 5;
}

.progression .title
{
    width: 30vw;
    height: 20vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: rotateZ(-3deg) translateY(12vh) translateX(68vw);
    pointer-events: none;
    transition: .15s ease-out;
}

.progression .title .main
{
    font-size: 80px;
    transform: skewX(-10deg);
    font-family: serif;
    font-weight: 700;
    color: var(--color-6);
}

.progression .title .sub
{
    font-size: 32px;
    margin-left: 4vw;
    color: var(--color-4);
    transform: skewX(-10deg) translateY(-5vh);
    font-family: serif;
    font-weight: 700;
    display: none;
}

.overlay
{
    position: absolute;
    z-index: 5;
}

.overlay .title
{
    width: 150vw;
    height: 20vh;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    transform: rotateZ(-3deg) translateY(-9vh) translateX(-25vw);
    pointer-events: none;
    transition: .15s ease-out;
}

.overlay .title .main
{
    width: 30vw;
    display: flex;
    justify-content: center;
    /* padding: 0 5vw 0 5vw; */
    transform: skewX(-10deg);
    margin: 0;
    font-size: 80px;
    font-weight: 700;
    color: var(--color-6) !important;
    text-transform: uppercase;
}

.overlay .title .side
{
    width: 30vw;
    display: flex;
    justify-content: center;
    margin: 0;
    transform: skewX(-10deg);
    font-size: 80px;
    font-weight: 700;
    -webkit-text-fill-color: rgb(255, 255, 255, 0); /* Will override color (regardless of order) */
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--color-6);
    text-transform: uppercase;
}

/* Homepage */

.homepage-container
{
    margin: 0 auto;
    margin-top: 15vh;
    padding: 0 3vw 0 3vw;
    width: 64vw;
    height: 78vh;
    display: flex;
    flex-direction: column;
    border-radius: 40px;
    background: var(--color-2);
    box-shadow: 0px 20px 50px 0px var(--color-8);
    transition: .15s ease-out;
}

.homepage-container .top {
    margin-top: 17vh;
    width: 64vw;
    height: 30vh;
    display: flex;
    flex-direction: column;
}

.homepage-container .top .title
{
    margin: 0;
    font-weight: 700;
    font-size: 60px;
    color: var(--color-6);
}

.homepage-container .top .information
{
    margin: 10px 0 0 0;
    font-size: 24px;
    line-height: 30px;
    color: var(--color-6);
    font-weight: 400;
}

.homepage-container .bottom
{
    margin: 5vh 0 0 0;
    width: 64vw;
    height: 20vh;
    display: flex;
}

.homepage-container .bottom .left
{
    width: 17vw;
    height: 20vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.homepage-container .bottom .left .bonus-text
{
    color: var(--color-6);
    margin: 0;
    font-weight: 500;
    display: none;
}

.homepage-container .bottom .left .ideas-link
{
    width: 85px;
    height: 85px;
    background-image: url("../images/logo-monocolor.png");
    background-size: contain;
    opacity: 100%;
    transition: .3s ease;
}

.homepage-container .bottom .left .ideas-link:hover
{
    opacity: 80%;
    transform: scale(.98);
}

.homepage-container .bottom .center
{
    width: 30vw;
    height: 20vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.homepage-container .bottom .center .link
{
    margin-top: 2vh;
    width: 25vw;
    height: 8vh;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
    text-decoration: none;
    font-size: 26px;
    font-weight: 700;
    box-shadow: 0px 10px 30px 0px var(--color-8);
    opacity: 100%;
    transition: .3s ease;
}

.homepage-container .bottom .center .link:hover
{
    opacity: 85%;
    transform: scale(.98);
}

.homepage-container .bottom .center .link:active
{
    opacity: 60%;
    transform: scale(.95);
}

.homepage-container .bottom .center .begin-link
{
    background: linear-gradient(var(--color-4), var(--color-5));
    color: var(--color-2);
}

.homepage-container .bottom .center .login-link
{
    background: var(--color-1);
    color: var(--color-6);
}

.homepage-container .bottom .right
{
    width: 17vw;
    height: 20vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
}

.homepage-container .bottom .right .text
{
    color: var(--color-6);
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

.homepage-container .bottom .right a
{
    color: var(--color-4);
}

.homepage-container .bottom .right a:hover
{
    opacity: 80%;
    transform: scale(.98);
}

/* Register */

.form-container
{
    margin: 0 auto;
    margin-top: 15vh;
    margin-bottom: 2vh;
    padding: 0 3vw 0 3vw;
    width: 64vw;
    /* height: 78vh; */
    display: flex;
    flex-direction: column;
    border-radius: 40px;
    background: var(--color-2);
    box-shadow: 0px 20px 50px 0px var(--color-8);
    transition: transform .15s ease-out;
}

.form-container .top {
    margin-top: 17vh;
    margin-bottom: 5vh;
    width: 64vw;
    height: 30vh;
    display: flex;
    flex-direction: column;
}

.form-container .top .title
{
    margin: 0;
    font-weight: 700;
    font-size: 60px;
    color: var(--color-6);
}

.form-container .top .information
{
    margin: 10px 0 0 0;
    font-size: 24px;
    line-height: 30px;
    color: var(--color-6);
}

.form-container .top .rgpd
{
    font-size: 18px;
    line-height: 30px;
    color: var(--color-6);
}

.form-container .top .rgpd a
{
    color: var(--color-5);
}


.form-container form
{
    display: flex;
    flex-direction: column;
}

.form-container form .input
{
    width: 64vw;
    /* min-height: 18vh; */
    display: flex;
    flex-direction: column;
    /* background: #c8ccf9; */
    margin-bottom: 8vh;
}

.form-container form .input .form-text
{
    margin: 0;
    font-weight: 700;
    font-size: 32px;
    color: var(--color-6);
    margin-bottom: 3vh;
}

.form-container form .input > input
{
    border: none;
    outline: none;
    width: 30vw;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 45px;
    padding-right: 20px;
    border-radius: 20px;
    background: var(--color-9);
    height: 35px;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: var(--color-6);
    background-image: url("../images/text-edit.png");
    background-size: 1.5%;
    background-position: left 18px center;
    background-repeat: no-repeat;
}

.form-container form .input .radio-inputs
{
    display: flex;
    width: 64vw;
    flex-direction: row;
    flex-wrap: wrap;
}

.form-container form .input .radio-inputs > input
{
    display: none;
}

.form-container form .input .radio-inputs label
{
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 20px;
    background: var(--color-9);
    height: 40px;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-10);
    cursor: pointer;
    transform: scale(0.95);
    box-shadow: 1px 7px 25px -4px rgba(150, 142, 142, 0.43);
    transition: transform .3s, background .2s;
    margin-bottom: 1vh;
}

.form-container form .input .radio-inputs label:active
{
    transform: scale(.85);
}

.form-container form .input .radio-inputs input:checked + label
{
    color: var(--color-2);
    background: var(--color-4);
    box-shadow: 1px 7px 25px -4px var(--color-8);
    transform: scale(1);
}

.form-container form .bottom
{
    margin: 5vh 0 0 0;
    width: 64vw;
    height: 15vh;
    display: flex;
    justify-content: center;
}

.form-container form .bottom input
{
    width: 25vw;
    height: 8vh;
    display: flex;
    justify-content: center;
    cursor: pointer;
    outline: none;
    border: none;
    align-items: center;
    border-radius: 24px;
    text-decoration: none;
    font-size: 26px;
    font-weight: 700;
    background: var(--color-4);
    color: #eeedfd;
    box-shadow: 0px 10px 30px 0px var(--color-8);
    opacity: 100%;
    transition: .3s ease;
}

.form-container form .bottom input:hover
{
    opacity: 85%;
    transform: scale(.98);
}

.form-container form .bottom input:active
{
    opacity: 60%;
    transform: scale(.95);
}

.error
{
    color: #ff4d44;
    font-size: 20px;
    font-weight: 700;
    margin-top: 2vh;
}

/* Survey */

.survey-container
{
    margin: 0 auto;
    margin-top: 15vh;
    margin-bottom: 2vh;
    padding: 0 3vw 0 3vw;
    width: 64vw;
    /* height: 78vh; */
    display: flex;
    flex-direction: column;
    border-radius: 40px;
    background: var(--color-2);
    box-shadow: 0px 20px 50px 0px var(--color-8);
    transition: transform .15s ease-out;
}

.survey-container .top {
    margin-top: 17vh;
    width: 64vw;
    height: 30vh;
    display: flex;
    flex-direction: column;
}

.survey-container .top .title
{
    margin: 0;
    font-weight: 700;
    font-size: 48px;
    color: var(--color-6);
}

.survey-container .top .information
{
    margin: 10px 0 0 0;
    font-size: 24px;
    line-height: 30px;
    color: var(--color-6);
}

.survey-container form
{
    display: flex;
    flex-direction: column;
}

.survey-container form .question
{
    width: 100%;
    margin-bottom: 15vh;
    overflow: hidden;
}

.survey-container form .question .question-title
{
    margin: 0;
    width: 80%;
    font-weight: 700;
    font-size: 36px;
    color: var(--color-4);
}

.survey-container form .question .question-desc
{
    margin: 0;
    margin-top: 1vh;
    width: 95%;
    font-weight: 400;
    font-size: 22px;
    color: var(--color-6);
}

.survey-container form .question .question-radio
{
    width: 100%;
    height: 12vh;
    margin-top: 3vh;
    display: flex;
    border-radius: 25px;
    overflow: hidden;
}

.survey-container form .question .question-radio .bar
{
    width: 64vw;
    height: 12vh;
    position: absolute;
    background: var(--color-9);
    border-radius: 25px;
    overflow: hidden;
    z-index: 1;
}

.survey-container form .question .question-radio .bar .super_bar
{
    width: 64vw;
    height: 12vh;
    transform: translateX(-64vw);
    transition: transform 1.5s;
    z-index: 2;
    background: linear-gradient(var(--color-4), var(--color-5));
    box-shadow: -30px 0px 40px 40px var(--color-4);
    transform: scale(1);
}

.survey-container form .question .question-radio .radio-input
{
    display: none;
}

.survey-container form .question .question-radio label
{
    width: 15%;
    padding-left: 5%;
    padding-right: 5%;
    height: 100%;
    /* background: var(--color-10); */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 20px;
    font-weight: 500;
    transition: .3s;
    cursor: pointer;
    text-align: center;
    z-index: 3;
}

.survey-container form .question .question-radio label:hover
{
    opacity: 70%;
    transform: scale(.95);
}

.survey-container form .question .question-radio label:active
{
    opacity: 60%;
    transform: scale(.9);
}

.survey-container form .question .question-radio .radio-1:checked ~ .bar .super_bar
{
    transform: translateX(-48vw);
}

.survey-container form .question .question-radio .radio-2:checked ~ .bar .super_bar
{
    transform: translateX(-32vw);
}

.survey-container form .question .question-radio .radio-3:checked ~ .bar .super_bar
{
    transform: translateX(-16vw);
}

.survey-container form .question .question-radio .radio-4:checked ~ .bar .super_bar
{
    transform: translateX(0vw);
}

.survey-container form .question .question-radio .bar .super_bar
{
    transform: translateX(-64vw);
}

.survey-container form .question .question-radio .radio-input:checked + label:hover
{
    opacity: 90%;
}

.survey-container form .question .question-radio .separator
{
    width: 0.15%;
    height: 100%;
    background: var(--color-10);
    opacity: 50%;
    z-index: 3;
}

.survey-container form .question .question-radio .separator:nth-of-type(4)
{
    display: none;
}

.survey-container form .navigation-buttons
{
    width: 100%;
    height: 12vh;
    margin-bottom: 5vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.survey-container form .navigation-buttons button
{
    margin-left: 1vw;
    margin-right: 1vw;
    width: 25vw;
    height: 8vh;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
    text-decoration: none;
    font-size: 26px;
    font-weight: 700;
    box-shadow: 0px 10px 30px 0px var(--color-8);
    opacity: 100%;
    outline: none;
    transition: .3s ease;
}

.survey-container form .navigation-buttons button:hover
{
    transform: scale(.95);
    opacity: 90%;
}

.survey-container form .navigation-buttons button.coloured
{
    background: linear-gradient(var(--color-4), var(--color-5));
    color: var(--color-2);
}

.survey-container form .navigation-buttons button.grey
{
    background: var(--color-1);
    color: var(--color-6);
}

/* Token */

.token-container
{
    margin: 0 auto;
    margin-top: 15vh;
    padding: 0 3vw 0 3vw;
    width: 64vw;
    height: 78vh;
    display: flex;
    flex-direction: column;
    border-radius: 40px;
    background: var(--color-2);
    box-shadow: 0px 20px 50px 0px var(--color-8);
    transition: .15s ease-out;
}

.token-container .top {
    margin-top: 17vh;
    width: 64vw;
    height: 20vh;
    display: flex;
    flex-direction: column;
}

.token-container .top .title
{
    margin: 0;
    font-weight: 700;
    font-size: 60px;
    color: var(--color-6);
}

.token-container .top .information
{
    margin: 10px 0 0 0;
    font-size: 24px;
    line-height: 30px;
    color: var(--color-6);
}

.token-container .center
{
    width: 64vw;
    height: 20vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.token-container .center input
{
    border: none;
    cursor: text;
    outline: none;
    margin-right: 5vw;
    width: 35vw;
    padding-left: 2vw;
    height: 8vh;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
    text-decoration: none;
    font-size: 26px;
    font-weight: 400;
    color: var(--color-6);
    box-shadow: 0px 10px 30px 0px var(--color-8);
    opacity: 100%;
    background: linear-gradient(var(--color-2), var(--color-3));
}

.token-container .center input.token-input
{
    letter-spacing: 3.3vw;
    overflow: hidden;
}

.token-container .center input.error-input::placeholder
{
    color: rgb(234, 126, 126);
}

.token-container .center button
{
    border: none;
    cursor: pointer;
    width: 15vw;
    height: 8vh;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
    text-decoration: none;
    font-size: 26px;
    font-weight: 700;
    color: var(--color-6);
    box-shadow: 0px 10px 30px 0px var(--color-8);
    opacity: 100%;
    transition: .3s ease;
}

.token-container .center button:hover
{
    opacity: 85%;
    transform: scale(.98);
}

.token-container .center button:active
{
    opacity: 60%;
    transform: scale(.95);
}

.token-container .center button
{
    background: linear-gradient(var(--color-4), var(--color-5));
    color: var(--color-2);
}

.token-container .bottom
{
    width: 64vw;
    height: 20vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.token-container .bottom .return-link
{
    margin-top: 2vh;
    width: 25vw;
    height: 8vh;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
    text-decoration: none;
    font-size: 26px;
    font-weight: 700;
    box-shadow: 0px 10px 30px 0px var(--color-8);
    opacity: 100%;
    transition: .3s ease;
}

.token-container .bottom .return-link:hover
{
    opacity: 85%;
    transform: scale(.98);
}

.token-container .bottom .return-link:active
{
    opacity: 60%;
    transform: scale(.95);
}

.token-container .bottom .return-link
{
    background: var(--color-1);
    color: var(--color-6);
}

/* Results */

.to-hide
{
    display: none;
}

.results-container
{
    margin: 0 auto;
    margin-top: 15vh;
    padding: 0 3vw 0 3vw;
    width: 64vw;
    display: flex;
    flex-direction: column;
    border-radius: 40px;
    background: var(--color-2);
    box-shadow: 0px 20px 50px 0px var(--color-8);
    transition: .15s ease-out;
    margin-bottom: 3vh;
}

.results-container .top {
    margin-top: 17vh;
    width: 64vw;
    height: 10vh;
    display: flex;
    flex-direction: column;
}

.results-container .top .title
{
    margin: 0;
    font-weight: 700;
    font-size: 60px;
    color: var(--color-6);
}

.results-container .top .information
{
    margin: 10px 0 0 0;
    font-size: 24px;
    line-height: 30px;
    color: var(--color-6);
}

.results-container .center .graphs
{
    display: flex;
    flex-direction: row;
    margin-bottom: 10vh;
}

.results-container .center .graphs .spider
{
    width: 35vw;
    height: 40vh;
    /* transform: scale(1.1); */
}

.results-container .results-text
{
    width: 100%;
    margin-bottom: 7.5vh;
    overflow: hidden;
}

.results-container .results-text .title
{
    margin: 0;
    width: 80%;
    font-weight: 700;
    font-size: 36px;
    color: var(--color-4);
}

.results-container .results-text .description
{
    margin: 0;
    margin-top: 1vh;
    width: 95%;
    font-weight: 400;
    font-size: 22px;
    color: var(--color-6);
}

.for-pdf .description
{
    margin: 0;
    margin-top: 1vh;
    width: 95%;
    font-weight: 400;
    font-size: 12px !important;
    color: var(--color-6);
}

.results-container .bottom
{
    margin: 5vh 0 5vh 0;
    width: 64vw;
    height: 20vh;
    display: flex;
}

.results-container .bottom .left
{
    width: 17vw;
    height: 20vh;
    display: flex;
    align-items: flex-end;
}

.results-container .bottom .left .ideas-link
{
    width: 85px;
    height: 85px;
    background-image: url("../images/logo-monocolor.png");
    background-size: contain;
    opacity: 100%;
    transition: .3s ease;
}

.results-container .bottom .left .ideas-link:hover
{
    opacity: 80%;
    transform: scale(.98);
}

.results-container .bottom .center
{
    width: 30vw;
    height: 20vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.results-container .bottom .center .link
{
    border: none;
    outline: none;
    margin-top: 2vh;
    width: 25vw;
    height: 8vh;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
    cursor: pointer;
    text-decoration: none;
    font-size: 26px;
    font-weight: 700;
    box-shadow: 0px 10px 30px 0px var(--color-8);
    opacity: 100%;
    transition: .3s ease;
}

.results-container .bottom .center .link:hover
{
    opacity: 85%;
    transform: scale(.98);
}

.results-container .bottom .center .link:active
{
    opacity: 60%;
    transform: scale(.95);
}

.results-container .bottom .center .download-link
{
    background: linear-gradient(var(--color-4), var(--color-5));
    color: var(--color-2);
}

.results-container .bottom .center .ideas-link
{
    background: var(--color-1);
    color: var(--color-6);
}

.results-container .bottom .right
{
    width: 17vw;
    height: 20vh;
}

/* Print */

@media print {
    *
    {
        -webkit-print-color-adjust: exact;
    }

    .overlay .title
    {
        width: 100vw;
        height: 20vh;
        /* transform: rotateZ(-3deg) translateY(-9vh) translateX(25vw); */
    }

    .overlay .title .main
    {
        position: absolute;
        top: 10%;
        left: 50%;
        margin: 0;
        width: fit-content;
        transform: skewX(-10deg);
        font-size: 70px;
        font-weight: 700;
        color: var(--color-7);
    }

    .overlay .title .side
    {
        display: none;
    }

    .results-container
    {
        margin: 0 auto;
        margin-top: 7.5vh;
        padding: 0 3vw 0 3vw;
        width: 86vw;
        height: 175vh;
        display: flex;
        flex-direction: column;
        border-radius: 40px;
        background: var(--color-2);
        overflow:hidden;
        box-shadow: 0px 20px 50px 0px var(--color-8);
        margin-bottom: 3vh;
    }

    .results-container .center .graphs
    {
        display: flex;
        flex-direction: column;
        height: 60vh;
    }

    .results-container .center .graphs .spider
    {
        width: 90vw;
        margin: 0 auto;
        height: 100vh;
        margin-bottom: 40vh;
    }

    .results-container .top 
    {
        display: none;
    }
    
    .results-container .bottom 
    {
        display: none;
        opacity: 0%;
    }
    p{
        font-size:9px;
    }
}

/* Responsive */

/* Phones */

@media (max-aspect-ratio: 16/10) {

    .homepage-container .bottom .left .bonus-text
    {
        display: none;
    }

    .partner
    {
        margin-left: 6vw;
    }

    .authors
    {
        display: none;
    }

    /* Overlay */

    .overlay .title
    {
        width: 100vw;
        height: 20vh;
        transform: rotateZ(-3deg) translateY(-5vh) translateX(0);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .overlay .title .main
    {
        position: absolute;
        margin: 0;
        width: fit-content;
        transform: skewX(-10deg);
        font-size: 70px;
        font-weight: 700;
        color: var(--color-7);
    }

    .overlay .title .side
    {
        display: none;
    }

    /* Homepage */

    .homepage-container
    {
        margin: 0 auto;
        margin-top: 5vh;
        padding: 0 3vw 0 3vw;
        width: 80vw;
        height: 90vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 40px;
        background: var(--color-2);
        box-shadow: 0px 20px 50px 0px var(--color-8);
        transition: .15s ease-out;
    }

    .homepage-container .top {
        margin-top: 20vh;
        width: 80vw;
        height: 30vh;
        display: flex;
        flex-direction: column;
    }

    .homepage-container .top .title
    {
        margin: 0;
        font-weight: 700;
        font-size: 38px;
        color: var(--color-6);
    }

    .homepage-container .top .information
    {
        margin: 10px 0 0 0;
        font-size: 16px;
        line-height: 16px;
        color: var(--color-6);
    }

    .homepage-container .bottom
    {
        margin: 10vh 0 5vh 0;
        width: 80vw;
        height: 20vh;
        display: flex;
        justify-content: space-between;
    }

    .homepage-container .bottom .left .ideas-link
    {
        width: 15vw;
        height: 15vw;
    }

    .homepage-container .bottom .center
    {
        width: 46vw;
        height: 20vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .homepage-container .bottom .center .link
    {
        margin-top: 2vh;
        width: 40vw;
        height: 8vh;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 24px;
        text-decoration: none;
        font-size: 20px;
        text-align: center;
        font-weight: 700;
        box-shadow: 0px 10px 30px 0px var(--color-8);
        opacity: 100%;
        transition: .3s ease;
    }

    .homepage-container .bottom .right
    {
        width: 17vw;
        height: 20vh;
    }

    .homepage-container .bottom .right .coop-link
    {
        width: 15vw;
        height: 15vw;
    }

    /* Register */

    .form-container
    {
        margin-top: 5vh;
        width: 80vw;
    }

    .form-container .top {
        margin-top: 20vh;
        margin-bottom: 5vh;
        width: 80vw;
        height: 30vh;
        display: flex;
        flex-direction: column;
    }

    .form-container .top .title
    {
        margin: 0;
        font-weight: 700;
        font-size: 38px;
        color: var(--color-6);
    }

    .form-container .top .information
    {
        margin: 10px 0 0 0;
        font-size: 16px;
        line-height: 18px;
        color: var(--color-6);
    }

    .form-container .top .rgpd
    {
        font-size: 12px;
        line-height: 14px;
        color: var(--color-6);
    }

    .form-container form .input
    {
        width: 80vw;
        margin-bottom: 8vh;
    }

    .form-container form .input .form-text
    {
        margin: 0;
        font-weight: 700;
        font-size: 24px;
        color: var(--color-6);
        margin-bottom: 3vh;
    }

    .form-container form .input > input
    {
        border: none;
        outline: none;
        width: 60vw;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 45px;
        padding-right: 20px;
        border-radius: 20px;
        background: var(--color-9);
        height: 30px;
        font-family: "Inter", sans-serif;
        font-size: 12px;
        font-weight: 500;
        color: var(--color-6);
        background-image: url("../images/text-edit.png");
        background-size: 3%;
        background-position: left 12px center;
        background-repeat: no-repeat;
    }

    .form-container form .input .radio-inputs
    {
        display: flex;
        width: 80vw;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .form-container form .input .radio-inputs > input
    {
        display: none;
    }

    .form-container form .input .radio-inputs label
    {
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 12px;
        padding-right: 12px;
        border-radius: 12px;
        background: var(--color-9);
        height: 30px;
        font-family: "Inter", sans-serif;
        font-size: 11px;
        font-weight: 500;
        color: var(--color-10);
        cursor: pointer;
        transform: scale(0.95);
        box-shadow: 1px 7px 25px -4px rgba(150, 142, 142, 0.43);
        transition: transform .3s, background .2s;
        margin-bottom: 1vh;
    }

    .form-container form .input .radio-inputs label:active
    {
        transform: scale(.85);
    }

    .form-container form .input .radio-inputs input:checked + label
    {
        color: var(--color-2);
        background: var(--color-4);
        box-shadow: 1px 7px 25px -4px var(--color-8);
        transform: scale(1);
    }

    .form-container form .bottom
    {
        margin: 5vh 0 0 0;
        width: 80vw;
        height: 15vh;
        display: flex;
        justify-content: center;
    }

    .form-container form .bottom input
    {
        width: 35vw;
        height: 6vh;
        display: flex;
        justify-content: center;
        cursor: pointer;
        outline: none;
        border: none;
        align-items: center;
        border-radius: 24px;
        text-decoration: none;
        font-size: 22px;
        font-weight: 700;
        background: var(--color-4);
        color: #eeedfd;
        box-shadow: 0px 10px 30px 0px var(--color-8);
        opacity: 100%;
        transition: .3s ease;
    }

    .form-container form .bottom input:hover
    {
        opacity: 85%;
        transform: scale(.98);
    }

    .form-container form .bottom input:active
    {
        opacity: 60%;
        transform: scale(.95);
    }

    .error
    {
        color: #ff4d44;
        font-size: 16px;
        font-weight: 400;
        margin-top: 2vh;
        margin-bottom: 2vh;
    }

    /* Token */

    .token-container
    {
        margin-top: 5vh;
        width: 80vw;
        height: 90vh;
    }

    .token-container .top {
        margin-top: 20vh;
        width: 80vw;
        height: 30vh;
    }

    .token-container .top .title
    {
        font-size: 38px;
    }

    .token-container .top .information
    {
        margin: 10px 0 0 0;
        font-size: 16px;
        line-height: 18px;
        color: var(--color-6);
    }

    .token-container .center
    {
        width: 80vw;
        height: 20vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
    }

    .token-container .center input
    {
        border: none;
        cursor: text;
        outline: none;
        margin-right: 5vw;
        width: 70vw;
        padding-left: 5vw;
        height: 6vh;
        margin-bottom: 2vh;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 24px;
        text-decoration: none;
        font-size: 12px;
        font-weight: 400;
        color: var(--color-6);
        box-shadow: 0px 10px 30px 0px var(--color-8);
        opacity: 100%;
        background: linear-gradient(var(--color-2), var(--color-3));
    }

    .token-container .center input.token-input
    {
        letter-spacing: 6.8vw;
        overflow: hidden;
    }

    .token-container .center input.error-input::placeholder
    {
        color: rgb(234, 126, 126);
    }

    .token-container .center button
    {
        border: none;
        cursor: pointer;
        width: 35vw;
        height: 6vh;
        margin-right: 5vw;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 24px;
        text-decoration: none;
        font-size: 16px;
        font-weight: 700;
        color: var(--color-6);
        box-shadow: 0px 10px 30px 0px var(--color-8);
        opacity: 100%;
        transition: .3s ease;
    }

    .token-container .center button:hover
    {
        opacity: 85%;
        transform: scale(.98);
    }

    .token-container .center button:active
    {
        opacity: 60%;
        transform: scale(.95);
    }

    .token-container .center button
    {
        background: linear-gradient(var(--color-4), var(--color-5));
        color: var(--color-2);
    }

    .token-container .bottom
    {
        width: 80vw;
        height: 20vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .token-container .bottom .return-link
    {
        margin-top: 2vh;
        width: 35vw;
        height: 6vh;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 24px;
        text-decoration: none;
        font-size: 16px;
        font-weight: 700;
        box-shadow: 0px 10px 30px 0px var(--color-8);
        opacity: 100%;
        transition: .3s ease;
    }

    .token-container .bottom .return-link:hover
    {
        opacity: 85%;
        transform: scale(.98);
    }

    .token-container .bottom .return-link:active
    {
        opacity: 60%;
        transform: scale(.95);
    }

    .token-container .bottom .return-link
    {
        background: var(--color-1);
        color: var(--color-6);
    }

    /* Survey */

    .survey-container
    {
        margin-top: 5vh;
        width: 80vw;
    }

    .survey-container .top {
        margin-top: 20vh;
        width: 80vw;
        height: 20vh;
        display: flex;
        flex-direction: column;
    }

    .survey-container .top .title
    {
        margin: 0;
        font-weight: 700;
        font-size: 30px;
        color: var(--color-6);
    }

    .survey-container .top .information
    {
        margin: 10px 0 0 0;
        font-size: 24px;
        line-height: 30px;
        color: var(--color-6);
    }

    .survey-container form
    {
        display: flex;
        flex-direction: column;
    }

    .survey-container form .question
    {
        width: 100%;
        margin-bottom: 15vh;
        overflow: hidden;
    }

    .survey-container form .question .question-title
    {
        margin: 0;
        width: 80%;
        font-weight: 700;
        font-size: 22px;
        color: var(--color-4);
    }

    .survey-container form .question .question-desc
    {
        margin: 0;
        margin-top: 1vh;
        width: 95%;
        font-weight: 400;
        font-size: 16px;
        color: var(--color-6);
    }

    .survey-container form .question .question-radio
    {
        width: 100%;
        height: 8vh;
        margin-top: 3vh;
        display: flex;
        border-radius: 25px;
        overflow: hidden;
    }

    .survey-container form .question .question-radio .bar
    {
        width: 80vw;
        height: 8vh;
        position: absolute;
        background: var(--color-9);
        border-radius: 25px;
        overflow: hidden;
        z-index: 1;
    }

    .survey-container form .question .question-radio .bar .super_bar
    {
        width: 80vw;
        height: 8vh;
        transform: translateX(-80vw);
        transition: transform 1.5s;
        z-index: 2;
        background: linear-gradient(var(--color-4), var(--color-5));
        box-shadow: -30px 0px 40px 40px var(--color-4);
        transform: scale(1);
    }

    .survey-container form .question .question-radio .radio-input
    {
        display: none;
    }

    .survey-container form .question .question-radio label
    {
        width: 15%;
        padding-left: 5%;
        padding-right: 5%;
        height: 100%;
        /* background: var(--color-10); */
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        font-size: 9px;
        font-weight: 500;
        transition: .3s;
        cursor: pointer;
        text-align: center;
        z-index: 3;
    }

    .survey-container form .question .question-radio label:hover
    {
        opacity: 70%;
        transform: scale(.95);
    }

    .survey-container form .question .question-radio label:active
    {
        opacity: 60%;
        transform: scale(.9);
    }

    .survey-container form .question .question-radio .radio-1:checked ~ .bar .super_bar
    {
        transform: translateX(-60vw);
    }

    .survey-container form .question .question-radio .radio-2:checked ~ .bar .super_bar
    {
        transform: translateX(-40vw);
    }

    .survey-container form .question .question-radio .radio-3:checked ~ .bar .super_bar
    {
        transform: translateX(-20vw);
    }

    .survey-container form .question .question-radio .radio-4:checked ~ .bar .super_bar
    {
        transform: translateX(0vw);
    }

    .survey-container form .question .question-radio .bar .super_bar
    {
        transform: translateX(-80vw);
    }

    .survey-container form .question .question-radio .radio-input:checked + label:hover
    {
        opacity: 90%;
    }

    .survey-container form .question .question-radio .separator
    {
        width: 0.15%;
        height: 100%;
        background: var(--color-10);
        opacity: 50%;
        z-index: 3;
    }

    .survey-container form .question .question-radio .separator:nth-of-type(4)
    {
        display: none;
    }

    .survey-container form .navigation-buttons
    {
        width: 100%;
        height: 12vh;
        margin-bottom: 5vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .survey-container form .navigation-buttons button
    {
        width: 35vw;
        height: 6vh;
        margin: 0 2.5vw 0 2.5vw;
        display: flex;
        justify-content: center;
        cursor: pointer;
        outline: none;
        border: none;
        align-items: center;
        border-radius: 24px;
        text-decoration: none;
        font-size: 22px;
        font-weight: 700;
        background: var(--color-4);
        color: #eeedfd;
        box-shadow: 0px 10px 30px 0px var(--color-8);
        opacity: 100%;
        transition: .3s ease;
    }

    .survey-container form .navigation-buttons button:hover
    {
        transform: scale(.95);
        opacity: 90%;
    }

    .survey-container form .navigation-buttons button.coloured
    {
        background: linear-gradient(var(--color-4), var(--color-5));
        color: var(--color-2);
    }

    .survey-container form .navigation-buttons button.grey
    {
        background: var(--color-1);
        color: var(--color-6);
    }

    /* Results */

    .results-container
    {
        margin-top: 5vh;
        width: 80vw;
    }

    .results-container .top {
        margin-top: 17vh;
        width: 80vw;
        height: 10vh;
        display: flex;
        flex-direction: column;
    }

    .results-container .top .title
    {
        margin: 0;
        font-weight: 700;
        font-size: 38px;
        color: var(--color-6);
    }

    .results-container .top .information
    {
        margin: 10px 0 0 0;
        font-size: 24px;
        line-height: 30px;
        color: var(--color-6);
    }

    .results-container .center .graphs
    {
        display: flex;
        flex-direction: column;
        margin-bottom: 10vh;
        height: 65vh;
        overflow: hidden;
    }

    .results-container .center .graphs .spider
    {
        width: 80vw;
        height: 65vh;
    }

    .results-container .results-text
    {
        width: 100%;
        margin-bottom: 7.5vh;
        overflow: hidden;
    }

    .results-container .results-text .title
    {
        margin: 0;
        width: 80%;
        font-weight: 700;
        font-size: 36px;
        color: var(--color-4);
    }

    .results-container .results-text .description
    {
        margin: 0;
        margin-top: 1vh;
        width: 95%;
        font-weight: 400;
        font-size: 22px;
        color: var(--color-6);
    }

    .results-container .bottom
    {
        margin: 5vh 0 5vh 0;
        width: 80vw;
        height: 20vh;
        display: flex;
    }

    .results-container .bottom .left
    {
        width: 17vw;
        height: 20vh;
        display: flex;
        align-items: flex-end;
    }

    .results-container .bottom .left .ideas-link
    {
        width: 15vw;
        height: 15vw;
        background-image: url("../images/logo-monocolor.png");
        background-size: contain;
        background-repeat: no-repeat;
        opacity: 100%;
        transition: .3s ease;
    }

    .results-container .bottom .left .ideas-link:hover
    {
        opacity: 80%;
        transform: scale(.98);
    }

    .results-container .bottom .center
    {
        width: 46vw;
        height: 20vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .results-container .bottom .center .link
    {
        border: none;
        outline: none;
        margin-top: 2vh;
        width: 35vw;
        height: 6vh;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 24px;
        cursor: pointer;
        text-decoration: none;
        font-size: 10px;
        font-weight: 700;
        box-shadow: 0px 10px 30px 0px var(--color-8);
        opacity: 100%;
        transition: .3s ease;
    }

    .results-container .bottom .center .link:hover
    {
        opacity: 85%;
        transform: scale(.98);
    }

    .results-container .bottom .center .link:active
    {
        opacity: 60%;
        transform: scale(.95);
    }

    .results-container .bottom .center .download-link
    {
        background: linear-gradient(var(--color-4), var(--color-5));
        color: var(--color-2);
    }

    .results-container .bottom .center .ideas-link
    {
        background: var(--color-1);
        color: var(--color-6);
    }

    .results-container .bottom .right
    {
        width: 17vw;
        height: 20vh;
    }

        .homepage-container .bottom .right .text
    {
        color: var(--color-6);
        margin: 0;
        font-size: 10px;
        font-weight: 500;
    }
  }