/* font-family: 'Indie Flower', cursive;
font-family: 'Permanent Marker', cursive;
font-family: 'Quicksand', sans-serif; */


:root{
    --mred:#EC5A39;
    --fpara:'Roboto Slab', serif;
    --flinks:'Roboto Slab', serif;
}

body{
    width:100%;
    margin:0;
    background-color: rgb(218, 223, 228);
    overflow-x: hidden;
}

#maincontainer {
    display:flex;
    flex-direction: row;
    height: 100%;
}


#navcontainer{
    display:flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 350px;
    background:var(--mred) ;
}

#links {
    display:flex;
    flex-direction: column;
    align-items: center;
}

#logofont{
    font-family: 'Indie Flower', cursive ;
}

#logo a{
    padding:30px auto;
    text-decoration: none;
    font-family: 'Indie Flower', cursive ;
    font-size: 36px;
    font-weight:bolder;
    color: white;
    text-align: center;
}

#links a{
    padding:20px 35px;
    text-decoration: none;
    font-family: var(--flinks);
    color:white;
    font-size: 18px;
    transition: 0.5s;
}

#questcontainer{
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: flex-start;
}

#questcontainer p{
    font-family: var(--flinks);
    color:white;
    font-size: 18px;
}

#questcontainer a{
    margin:0;
    font-size: 16px;
}

#links a:hover{
    cursor:pointer;
    letter-spacing: 2px;
    transform: scale(1.2);
}

#logsignup{
    display:flex;
    justify-content: center;
}

.g-signin2{
    width:100px;
    padding:10px;
    margin:20px 15px;
    border-radius: 20px;
}

#logsignup button{
    width:100px;
    padding:10px;
    margin:20px 15px;
    border-radius: 20px;
    background-color: rgb(255, 255, 255);
    border:none;
    font-family: var(--flinks);
    color:var(--mred);
}

#logsignup button:hover{
    cursor:pointer;
    background-color: rgba(255, 255, 255, 0.90);
    
}

#logo {
    display: flex;
    justify-content: center;
    margin: 40px auto;
}

#pickcolor{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-top: 2px solid white;
    margin-top: 20px;
}

#pickcolor h3{
    font-family: var(--fpara);
    color:white;
    font-size: 18px;
}

#pickcolor button{
    width:200px;
    padding:10px;
    margin:20px 15px;
    border-radius: 20px;
    background-color: rgb(255, 255, 255);
    border:none;
    font-family: var(--flinks);
    color:var(--mred);
}

#pickcolor img{
    width:22px;
    height: 16px;
    padding-right: 5px;
}


#pickcolor input:hover{
    cursor:pointer;
}

#question{
    grid-area: quest;
    text-align: center;
    font-family: 'Indie Flower', cursive;
    font-size: 30px;
    text-transform: uppercase;
}

.questionslist{
    display:none;
}

.questionslistdisplay{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    z-index:1;
}

.questionslist a{
    text-decoration: none;
    background-color: var(--mred);
    color:white;
    font-size: 18px;
    padding: 10px 15px;
    width:200px;
    font-family: var(--flinks);
}

#index{
    font-size: 32px;
    font-family: 'Permanent Marker', cursive;
    text-align: center;
}

video {
    width:640px; 
    height:480px;
}

#desc{
    font-size: 18px;
    font-family: var(--flinks);
    text-align:center;
    max-width: 800px;
    margin:0;
}

#box1 {
    grid-area: opt1;
    width: 220px;
    height: 220px;
    background-color: var(--mred);
    border-radius: 20px;
}

#box2 {
    grid-area: opt2;
    width: 220px;
    height: 220px;
    background-color: var(--mred);
    border-radius: 20px;
}

#box3 {
    grid-area: opt3;
    width: 220px;
    height: 220px;
    background-color: var(--mred);
    border-radius: 20px;
}

#box4 {
    grid-area: opt4;
    width: 220px;
    height: 220px;
    background-color: var(--mred);
    border-radius: 20px;
}

#box5 {
    grid-area: opt1;
    width: 220px;
    height: 220px;
    background-color: var(--mred);
    border-radius: 20px;
}

#box6 {
    grid-area: opt2;
    width: 220px;
    height: 220px;
    background-color: var(--mred);
    border-radius: 20px;
}

#box7 {
    grid-area: opt3;
    width: 220px;
    height: 220px;
    background-color: var(--mred);
    border-radius: 20px;
}

#box8 {
    grid-area: opt4;
    width: 220px;
    height: 220px;
    background-color: var(--mred);
    border-radius: 20px;
}

#answer{
    grid-area: answ;
    text-align: center;
    font-family: 'Indie Flower', cursive;
    font-size: 20px;
    text-transform: uppercase;
}

.gridcontainer {
    display: grid;
    width:100%;
    float:right;
    grid-template-columns: 260px 260px;
    grid-template-rows: 60px 260px 260px 60px;
    gap:20px;
    grid-template-areas: 
    "quest quest"
    "opt1 opt2"
    "opt3 opt4"
    "answ answ";
    align-content: center;
    justify-content: center;
    margin: auto;
}

.gridContainerAnswer{
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#rightside{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin:auto;
}


/* MEDIA QUERIES */

@media screen and (max-width: 992px){

    #maincontainer {
        display:flex;
        flex-direction: column;
        height: 100%;
    }
    
    #navcontainer{
        display:grid;
        width: 100%;
    }

    #logo {
        display: flex;
        justify-content: center;
        margin: 10px auto;
    }
    
    #links {
        display:flex;
        flex-direction: row;
        justify-content: center;
    }

    #logsignup{
        display:flex;

    }

    #links a{
        padding:10px 25px;
        font-size: 14px;
    }
    
    .questionslistdisplay{
        display:flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        z-index:1;
    }

    #question{
        grid-area: quest;
        text-align: center;
        font-family: 'Indie Flower', cursive;
        font-size: 18px;
    }

    #desc{
        max-width: 600px;
        margin: 0 20px;
    }

    #index{
        font-size: 20px;
    }

    video {
        width:320px; 
        height:240px;
        margin-bottom: 20px;
    }
    

    #box1, #box2, #box3, #box4, #box5, #box6, #box7, #box8{
         width: 18.5vh;
         height: 18.5vh;
    }

    

    .gridcontainer {
        display: grid;
        max-width:100%;
        grid-template-columns: 20vh 20vh;
        grid-template-rows: 70px 19vh 19vh 50px;
        gap:5px;
        grid-template-areas: 
        "quest quest"
        "opt1 opt2"
        "opt3 opt4" 
        "answ answ";
        align-content: center;
        justify-content: center;
        margin:auto;
    }

    .gridContainerAnswer{
        display:flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
}