*{
    margin: 0;
    padding: 0;
    border: none;
    overflow-x: hidden;
}

.home-container, .intro-container, .trivia-container, .source-container{
    display: flex;
    align-items: center;
    width: 100%;
}

.home-container{
    min-height: 50vh;
}

.intro-container{
    min-height: 50vh;
    background: #FF7722;
}

.trivia-container{
    min-height: 80vh;
}

.source-container{
    min-height: 100vh;
    background: #FF7722;
}

.home-bg, .intro-bg, .trivia-bg, .source-bg{
    display: flex;
    width: 90%;
    background: white;
    min-height: 50vh;
}

.home-bg{
    background: #FF7722;
    border-radius: 0 0 0 75px;
    margin-left: 10vw;
}

.intro-bg{
    margin-right: 10vw;
    border-radius: 0 75px 75px 0;
}

.trivia-bg{
    background: #FF7722;
    min-height: 80vh;
    border-radius: 75px 0 0 75px;
    position: relative;
    margin-left: 10vw;
}

.source-bg{
    min-height: 100vh;
    border-radius: 0 75px 0 0;
    flex-direction: column;
    margin-right: 10vw;
}

.indigenous-day{
    font-family: sans-serif;
    color: white;  
    font-size: 12vw;
    margin: 15% 5%;
}

.indigenous-day::after{
    content: "Tuesday, June 21, 2022";
    color: white;
    font-family: sans-serif;
    font-size: 7vw;
    margin-top: 20%;
    display: block;
}

.intro{
    font-size: 7vw;
    font-family: sans-serif;
    color: #de5b09;
    padding: 5% 5%;
    text-align: right;
    align-self: center;
}

.question-container, .answer-container{
    background: #FF7722;
    border-radius: 75px 0 0 75px;
    width: 100%;
    min-height: 80vh;
    display: grid;
    grid-template-columns: 5% auto auto 10% auto auto 5%;
    grid-template-rows: auto 3% 10% 5% 10% auto;
    justify-items: center;
    align-items: center;
}

.option1, .option2, .option3{
    border: 2px solid #782f02;
    background: white;
    border-radius: 20px;
    font-size: 6.75vw;
    min-width: 100%;
    text-align: center;
    color: #782f02;
    padding: 5% 5%;
}

.option1{
    grid-column: 2 / 4;
    grid-row: 3 / 4;
}

.option2{
    grid-column: 5 / 7;
    grid-row: 3 / 4;
}

.option3{
    grid-column: 3 / 6;
    grid-row: 5 / 6;
}

.question{
    color: white;
    font-size: 6vw;
    font-family: sans-serif;
    text-align: center;
    grid-column: 2 / 7;
    grid-row: 1 / 3;
}

.question1{
    display: inline;
}

.question2, .question3, .question4, .question5, .question6, .question7, .question8, .question9, .question10, .question11, .question12, .question13, .question14, .question15{
    display: none;
}

.question::before{
    content: "Question 1";
    font-size: 10vw;
    display: block;
    margin-bottom: 5%;
}

h4.question2::before{
    content: "Question 2";
} h4.question3::before{
    content: "Question 3";
} h4.question4::before{
    content: "Question 4";
} h4.question5::before{
    content: "Question 5";
} h4.question6::before{
    content: "Question 6";
} h4.question7::before{
    content: "Question 7";
} h4.question8::before{
    content: "Question 8";
} h4.question9::before{
    content: "Question 9";
} h4.question10::before{
    content: "Question 10";
} h4.question11::before{
    content: "Question 11";
} h4.question12::before{
    content: "Question 12";
} h4.question13::before{
    content: "Question 13";
} h4.question14::before{
    content: "Question 14";
} h4.question15::before{
    content: "Question 15";
} 

.answer-container{
    display: none;
    grid-template-rows: 1fr 1fr 2fr 5% 12.5% 5% 12.5% 2fr;
}

.answer{
    color: white;
    font-size: 10vw;
    font-family: sans-serif;
    text-align: center;
    display: none;
    grid-column: 2 / 7;
    grid-row: 2 / 3;
}

.answer2, .answer3, .answer4, .answer5, .answer6, .answer7, .answer8, .answer9, .answer10, .answer11, .answer12, .answer13, .answer14, .answer15{
    display: none;
}

.answer1{
    display: inline;
}

.explanation{
    font-family: sans-serif;
    text-align: center;
    font-size: 6vw;
    color: white;
    font-weight: bold;
    grid-column: 2 / 7;
    grid-row: 3 / 4;
}

.retry, .continue{
    padding: 0 2%;
    border: 2px solid #782f02;
    background: white;
    border-radius: 20px;
    font-size: 6vw;
    min-width: 100%;
    text-align: center;
    color: #782f02;
}

.retry{
    align-self: stretch;
    grid-column: 3 / 6;
    grid-row: 5 / 6;
}

.continue{
    align-self: stretch;
    grid-column: 3 / 6;
    grid-row: 7 / 8;
}

.last-question, .next-question{
    color: white;
    font-size: 8vw;
    background: #FF7722;
    align-self: bottom;
    position: absolute;
    bottom: 15%;
}

.last-question{
    left: 5%;
    opacity: 0.4;
}

.next-question{
    right: 5%;
}

.learn-more{
    font-family: sans-serif;
    font-size: 8vw;
    color: #de5b09;
    margin-top: 30%;
    margin-bottom: 15%;
    margin-left: 5%;
}

a{
    width: 80%;
    font-family: sans-serif;
    font-size: 5vw;
    color: #782f02;
    margin: 6% 5%;    
}

img{
    display: none;
}

.artist1, .artist2{
    display: none;
}

@media only screen and (min-width: 600px) {
    
    .indigenous-day{
        font-size: 9vw;
        margin: 5% 5%;
    }
    
    .indigenous-day::after{
        font-size: 5vw;
        margin-top: 10%;
        margin-bottom: 5%;
    }

    .intro{
        font-size: 5vw;
        margin: 10% 0;
    }

    .trivia-container, .trivia-bg{
        min-height: 100vh;
    }

    .question{
        font-size: 4vw;
    }

    .question::before{
        font-size: 5.5vw;
    }

    .option1, .option2, .option3{
        font-size: 4vw;
        min-width: 80%;
    }

    .next-question, .last-question{
        font-size: 5.5vw;
    }

    .answer{
        font-size: 5.5vw;
    }

    .explanation{
        font-size: 4vw;
    }

    .answer-container{
        grid-template-rows: 1fr 1fr 2fr 5% 1fr 2fr;
    }

    .retry{
        font-size: 4vw;
        align-self: center;
        grid-column: 3 / 4;
        grid-row: 5 / 6;
    }

    .continue{
        font-size: 4vw;
        align-self: center;
        grid-column: 5 / 6;
        grid-row: 5 / 6;
    }

    .learn-more{
        font-size: 7vw;
    }

    a{
        font-size: 4vw;
    }
}

@media only screen and (min-width: 749px) {
    
    .indigenous-day{
        font-size: 10vw;
    }

    .indigenous-day::after{
        font-size: 6vw;
    }

    .intro{
        font-size: 6vw;
        margin-left: 8%;
    }

    .trivia-container, .trivia-bg{
        min-height: 100vh;
    }

    .question{
        font-size: 5vw;
    }

    .question::before{
        font-size: 7vw;
        margin-bottom: 5%;
    }

    .option1, .option2, .option3{
        font-size: 4vw;
        padding: 7% 3%;
        min-width: 90%;
    }

    .answer{
        font-size: 7vw;
    }

    .explanation{
        font-size: 5vw;
    }

    .retry{
        font-size: 5vw;
        grid-column: 2 / 4;
        min-width: 90%;
        padding: 5% 5%;
    }

    .continue{
        font-size: 5vw;
        grid-column: 5 / 7;
        min-width: 90%;
        padding: 5% 5%;
    }

    .next-question, .last-question{
        bottom: 10%;
    }

    .learn-more{
        font-size: 6.5vw;
        margin: 8% 5%;
    }

    a{
        font-size: 3.5vw;
        width: 90%;
        margin-bottom: 4%;
    }
}

@media only screen and (min-width: 850px) {    
    .indigenous-day{
        font-size: 9vw;
    }

    .intro{
        font-size: 5vw;
    }

    .question{
        font-size: 4vw;
        width: 85%;
    }

    .question::before{
        font-size: 5vw;
    }
    
    .option1, .option2, .option3{
        font-size: 3.5vw;
    }

    .answer{
        font-size: 5vw;
    }
    
    .explanation{
        font-size: 4vw;
    }

    .retry, .continue{
        font-size: 3.5vw;
        padding: 5% 5%;
    }

    .learn-more{
        font-size: 5vw;
        margin: 8% 5%;
    }

    a{
        font-size: 3vw;
        margin-bottom: 3%;
    }
}

@media only screen and (min-width: 1000px) {

    .home-container, .home-bg, .intro-container, .intro-bg{
        min-height: 100vh;
    }

    .indigenous-day{
        font-size: 8vw;
    }

    .indigenous-day::after{
        font-size: 3vw;
        top: 78%;
    }

    .art-div-2{
        min-height: 100vh;
        width: 30%;
        margin-right: 3%;
    }

    .indigenous-art-2{
        min-height: 80vh;
        width: 100%;
        display: inline;
        object-fit: cover;
        margin-top: 20%;
    }

    .art-div-2::after{
        content: "“Suncatcher” by Miꞌkmaq artist Tracey Metallic";
        font-size: 1.2vw;
        font-family: sans-serif;
        color: #782f02;
        display: block;
        margin-top: 3%;
        text-align: right;
    }

    .intro{
        font-size: 3vw;
        width: 50%;
        margin: 0;
    }

    .art-div-1{
        width: 100%;
        min-height: 100vh;
        margin-left: 5%;
    }

    .indigenous-art-1{
        object-fit: cover;
        min-height: 80vh; 
        width: 100%;
        display: inline;
        align-self: center;
        margin-top: 10%;
    }

    .art-div-1::after{
        content: '"Smudge By The Lake" by Metis artist Pam Cailloux';
        font-size: 1.2vw;
        font-family: sans-serif;
        color: #782f02;
        display: block;
        margin-top: 1.9%;
        margin-bottom: 5%;
    }

    .question{
        font-size: 3vw;
        width: 85%;
    }

    .question::before{
        font-size: 5vw;
    }

    .option1, .option2, .option3, .continue, .retry{
        font-size: 2.5vw;
        min-width: 45%;
        padding: 4% 4%;
        cursor: pointer;
    }

    .option1:hover, .option2:hover, .option3:hover, .continue:hover, .retry:hover{
        opacity: 0.7;
    }

    .next-question, .last-question{
        font-size: 3vw;
    }

    .next-question{
        cursor: pointer;
    }

    .answer{
        font-size: 5vw;
    }

    .explanation{
        font-size: 3vw;
        width: 80%;
    }

    .learn-more{
        font-size: 4vw;
        margin: 8% 5%;
    }

    a{
        font-size: 1.8vw;
        margin: 0 5%;
        margin-bottom: 3.5%;
    }
}


@media only screen and (max-height: 600px){
    .trivia-container, .trivia-bg{
        min-height: 160vh;
    }
}