/* ====================================================================================================================================== */
/* Google Fonts */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

/* ====================================================================================================================================== */
/* General */

*{
    font-family: 'Open Sans', sans-serif;
  
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}
   
:root{
    --primary-color: #3693d6;
    --secondary-color: #928f8f;

    --navigation-height: 6vh;
    --dark-red: #8B0000;
    --dark-green: #00b900;
    --grayish: #404040;
    --gold: #ffb744;

    --instructions-content-width: 60vw;

    --all-sections: p, a;
}

body{
    position: relative;
    min-height: 100vh;
}

.content-gone{
    display: none !important;
}

.no-mobile{
    display: none;
}

/* Prevent users that use mobile devices from taking the IAT */
@media (max-width: 600px){

    :is(.start-container){
        display: none !important;
    }

    .no-mobile{
        min-height: calc(100vh - var(--navigation-height));

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .no-mobile-content{
        max-width: 80vw;

        display: flex;
        flex-direction: column;

        gap: 5vh;
        text-align: center;
    }

    .no-mobile h1{
        font-size: 7vh;
    }
}

/* ====================================================================================================================================== */
/* Animations */

.fadeIn{
    animation: fadeIn 250ms ease-in-out;
}

.fadeInStartIAT{
    animation: fadeIn 500ms ease-in-out;
}

.fadeInBreather{
    animation: fadeIn 750ms ease-in-out;
}

.fade-in-iat-question{
    animation: fadeIn 150ms ease-in-out;
}

.fadeOut{
    animation: fadeOut 500ms ease-in-out;
}

@keyframes fadeIn{
    0%{
        opacity: 0.05;
    }
    100%{
        opacity: 1;
    }
}

@keyframes fadeOut{
    from{
        opacity: 1;
    }
    to{
        opacity: 0.05;
    }
}

/* ====================================================================================================================================== */
/* Navigation */

.nav-container{

    background: var(--primary-color);
    display: flex;

    box-shadow: 0 0 10px rgba(0,0,0,0.5); /* let it blur 10px */
    height: var(--navigation-height);
}   

.nav-container > ul{
    list-style: none;

    width: 100vw;
    display: flex;

    justify-content: space-between;
    align-items: center;
}

.nav-container li{
    font-size: 2.5vh;
    color: white;
    padding: 1vh 2vw;
}

.nav-container li a{
    text-decoration: none;
    color: white;
    transition: 250ms ease-out;
}

.nav-container li a:hover{
    text-decoration: none;
    color: rgb(142, 206, 255);
    transition: 250ms ease-out;
}

#navigation-title{
    font-weight: bold;
    font-style: italic;
}


/* ====================================================================================================================================== */
/* IAT START */

.start-container{
    display: flex;
    min-height: calc(100vh - var(--navigation-height));

    justify-content: center;
    align-items: center;
}

.start-section{

    display: flex;
    flex-direction: column;
    gap: 4vh;

    padding: 10vh;
}

.start-section > h1{

    text-align: center;

    font-size: 7vh;
    font-weight: bold;
    color: var(--primary-color);
}

.start-section > a{

    text-decoration: none;
    border: 0.3vh solid var(--primary-color);

    font-size: 2.5vh;
    color: var(--primary-color);
    text-align: center;
    
    transition: 250ms ease-out;
    border-radius: 0.5vh;
}

.start-section > a:hover{
    background: var(--primary-color);
    color: white;
    transition: 250ms ease-out;
}

/* ====================================================================================================================================== */
/* User Survey */ 

.user-survey{

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 7vh;
    margin-top: 10vh;
}

.user-survey-header{
    width: var(--instructions-content-width);
}
.user-survey-header > p{
    color: black;
    font-size: 3vh;
}

.user-survey-query{
    width: var(--instructions-content-width);

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 7vh;
}

.user-survey-relationship{
    color: var(--grayish);
    font-size: 2.75vh;

    display: flex;
    flex-direction: column;
    gap: 3vh;
}

.user-survey-relationship-selector{
    display: flex;
    gap: 1.5vw;
}

.user-survey-relationship-selector > a{
    border: 0.3vh solid var(--primary-color);
    min-width: 8vw;
    text-align: center;
    border-radius: 0.5vh;

    padding: 0.5vh;
    font-size: 2.5vh;
    color: black;

    transition: 250ms ease;
}

.user-survey-relationship-selector > a:hover{
    background: var(--primary-color);
    color: white;

    cursor: pointer;
    transition: 250ms ease;
}

.user-survey-relationship-selector-clicked{
    background: var(--primary-color);
    color: white !important;
}

/* ====================================================================================================================================== */
/* Student Info */

.user-survey-grade, .user-survey-classes, .user-survey-teacher-grade, .user-survey-teacher-class{
    color: var(--grayish);
    font-size: 2.75vh;

    display: flex;
    flex-direction: column;
    gap: 3vh;
}

.user-survey-grade-selector, .user-survey-classes-selector, .user-survey-teacher-grade-selector, .user-survey-teacher-class-selector{
    display: flex;
    gap: 1.5vw;
}

/* :where selector is similar to :is but you can override with :where */
:where(.user-survey-grade-selector, .user-survey-classes-selector, .user-survey-teacher-grade-selector, .user-survey-teacher-class-selector) > a{
    border: 0.3vh solid var(--primary-color);
    min-width: 3vw;
    text-align: center;
    border-radius: 0.5vh;

    padding: 0.5vh;
    font-size: 2.5vh;
    color: black;

    transition: 250ms ease;
}

:where(.user-survey-grade-selector, .user-survey-classes-selector, .user-survey-teacher-grade-selector, .user-survey-teacher-class-selector) > a:hover{
    background: var(--primary-color);
    color: white;

    cursor: pointer;
    transition: 250ms ease;
}

.user-survey-selector-clicked{
    background: var(--primary-color);
    color: white !important;
}

.user-survey-submission{
    width: var(--instructions-content-width);
    display: flex;
    justify-content: flex-start;
}

.user-survey-submission > a{
    border: 0.3vh solid var(--dark-green);
    color: var(--dark-green);

    text-align: center;
    border-radius: 0.5vh;

    width: 8vw;
    font-size: 2.5vh;

    padding: 0.5vh;
    border-radius: 0.5vh;

    transition: 250ms ease;
}

.user-survey-submission > a:hover{
    background: var(--dark-green);
    color: white;

    cursor: pointer;
    transition: 250ms ease;
}

/* ====================================================================================================================================== */
/* Instructions */ 

.instructions{
    display: flex;

    padding-top: 10vh;
    justify-content: center;
    align-items: center;
    
    gap: 3vh;
    flex-direction: column;
}

.instructions-header{
    display: flex;

    width: var(--instructions-content-width);
    justify-content: flex-start;
}

.instructions-text{
    display: flex;
    gap: 7vh;
    flex-direction: column;

    width: var(--instructions-content-width);
    font-size: 2.4vh;
}

.hotkeys-info, .bold{
    font-weight: 600;
    /* font-style: italic; */
}

.underline{    
    text-decoration-skip-ink: none;
    text-decoration: underline;
}

.enter{
    font-weight: 600;
    font-size: 2.5vh;
}

/* Instructions Keywords Section */

.instructions-keywords{
    display: flex;
    flex-direction: column;

    gap: 1.5vh;
}

.instructions-keywords > ul{
    list-style: none;

    display: flex;
    flex-direction: column;
    gap: 1.5vh;
}



/* ====================================================================================================================================== */
/* IAT QUESTIONS */

.iat-questions{
    display: grid;
    
    grid-template-areas: 
    "left-choice question right-choice";

    align-items: center;
    gap: 5vw;
    padding-top: 10vh;

    grid-auto-columns: 1fr;
}

.iat-questions > *{
    text-align: center;
}

.left-choice{
    grid-area: left-choice;
    font-weight: 600;
    color: var(--dark-red);
    font-size: 4vh;

    min-height: 50vh;
    border: var(--dark-red) 0.25vh solid;
    margin: 0vh 0vw 0vh 2vw;

    display: flex;
    justify-content: center;
    align-items: center;
    transition: 250ms ease;
}

.left-choice:hover{
    background: var(--dark-red);
    color: white;
    transition: 250ms ease;
}

.right-choice{
    grid-area: right-choice;
    font-weight: 600;
    color: var(--dark-green);
    font-size: 4vh;

    min-height: 50vh;
    border: var(--dark-green) 0.25vh solid;
    margin: 0vh 2vw 0vh 0vw;

    display: flex;
    justify-content: center;
    align-items: center;
    transition: 250ms ease;
}

.right-choice:hover{
    background: var(--dark-green);
    color: white;
    transition: 250ms ease;
}

.question{
    grid-area: question;

    display: flex;
    flex-direction: column;
    gap: 7vh;   

    justify-content: center;
    align-items: center;
}

.question-metadata{
    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;
}

.question-metadata > p{
    text-align: center;
    font-size: 3.25vh;
}

.question-word{
    color: var(--primary-color);
    font-size: 4vh;
}

/* ====================================================================================================================================== */
/* IAT BREATHER */

.iat-breather{
    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    gap: 3.5vh;
    padding-top: 10vh;
}

.iat-breather-message{
    font-size: 3.75vh;
}

.iat-breather-timer{
    font-size: 3vh;
}

.iat-breather-image{
    display: flex;
    flex-direction: column;
    gap: 3vh;

    text-align: center;
    font-size: 2.75vh;
}

.iat-breather-image > img{
    border-radius: 3vh;
    max-height: 40vh;
    max-width: 40vw;
}

/* ====================================================================================================================================== */
/* IAT FINISH */

.iat-finish{

    display: flex;
    justify-content: center;
    align-items: center;

    flex-direction: column;
    gap: 10vh;

    padding-top: 10vh;
}

.iat-finish-thank-you-message{
    font-size: 4vh;
    color: var(--grayish);
}

.iat-finish-inspirational-quote-container{
    font-style: italic;
    font-size: 3vh;

    display: flex;
    gap: 2vh;
    flex-direction: column;

    max-width: 45vw;
}

.iat-finish-inspirational-quote-author{
    font-style: normal;
    font-size: 2.5vh;
}

/* ====================================================================================================================================== */
/* FOOTER */

footer{
    position: absolute;
    left: 0;
    bottom: 0;
}

footer > a{
    font-size: 2vh;
    color: var(--secondary-color);
    text-decoration: none;
    transition: 500ms ease;
}

footer > a:hover{

    color: black;
    transition: 500ms ease;
}