/* Google Fonts https://fonts.google.com/specimen/Dongle */

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

/* General layout & background image */

* {
    margin: 0;
    padding: 0;
    font-family: 'Dongle', sans-serif;
    color: #fbfeff;
    text-align: center;
    letter-spacing: 2px;
}

/* Background image source: https://unsplash.com/photos/Mm1VIPqd0OA */

html {
    background: url(../images/dna-strain.jpg) no-repeat center center fixed;
    background-size: cover;
    background-color: #21385a;
}

.hide {
    display: none;
}

/* Game wrapper */

#game-wrapper {
    background-color: rgba(2, 16, 37, 0.97);
    height: 600px;
    width: 900px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    border-radius: 10px;
}

/* Burger icon */
/* code for burger icon taken from https://www.w3schools.com/howto/howto_css_menu_icon.asp */

.burger {
    position:absolute;
    right: 3%;
    top: 3%;
    cursor: pointer;
}

.burger-line-1,
.burger-line-2,
.burger-line-3 {
    width: 35px;
    height: 5px;
    background-color: #fbfeff;
    margin: 6px 0;
    transition: 0.4s;
    border-radius: 5px;
}

.change .burger-line-1 {
    transform: rotate(-45deg) translate(-7px, 8px);
}

.change .burger-line-2 {
    opacity: 0;
}

.change .burger-line-3 {
    transform: rotate(45deg) translate(-8px, -8px);
}

/* Home welcome page */

#welcome-title {
    font-size: 250%;
    margin-top: 75px;
}

#welcome-text {
    font-size: 200%;
    margin: 75px 0 100px;
    line-height: 35px;
}

button {
    background-color: #708298;
    width: 200px;
    height: 75px;
    font-size: 200%;
    border: none;
    border-radius: 5px;
    line-height: 25px;
}

/* Quiz game section */

.home-icon {
    position: absolute;
    font-size: 200%;
    top: 3%;
    left: 2%;
    background-color: inherit;
    width: auto;
    height: auto;
}

.home-icon:hover {
    background-color: inherit;
    color: inherit;
}

#question-count {
    position: absolute;
    font-size: 200%;
    top: 5%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#score {
    position: absolute;
    font-size: 200%;
    top: 1%;
    left: 85%;
}

#question-text {
    margin: 75px;
    font-size: 200%;
    line-height: 25px;
}

.correct {
    background-color: green;
}

.wrong {
    background-color: red;
}

/* Display grid source: https://www.w3schools.com/css/css_grid.asp */
#answer-options {
    display: grid;
    grid-gap: 75px 200px;
    grid-template-columns: auto auto;
    position: absolute;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
}

#next-question {
    position: absolute;
    left: 50%;
    top: 83%;
    transform: translate(-50%, -50%);
}

/* Results section */

.result h2 {
    margin: 75px 0 120px;
    font-size: 250%;
}

.result p {
    font-size: 200%;
    letter-spacing: 1px;
    max-width: 650px;
    margin: auto;
    line-height: 35px;
}

#play-again {
    position: absolute;
    left: 50%;
    top: 83%;
    transform: translate(-50%, -50%);
}

/* Menu section */

.menu button {
    display: block;
    margin: 50px auto;
}

.menu button:nth-child(1) {
    margin-top: 135px;
}

/* Difficulty selection section */

.difficulty button {
    display: block;
    margin: 50px auto;
}

.difficulty h1 {
    margin-top: 75px;
    font-size: 200%;
}

/* How to play section */

.how-to h1 {
    margin-top: 75px;
    font-size: 250%;
}

.how-to p {
    margin: 25px auto;
    max-width: 450px;
    font-size: 200%;
    letter-spacing: 1px;
    line-height: 25px;
    text-align: left;
}

/* Media Queries */

/* Media query for hover effect only on desktop & laptop */
/* Source: https://stackoverflow.com/questions/23885255/how-to-remove-ignore-hover-css-style-on-touch-devices */

@media (hover: hover) {

    button:hover {
        background-color: #fbfeff;
        color: #021025;
        cursor: pointer;
    }
}

/* For media screens 1000px wide and down */

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

    /* Game wrapper */

    #game-wrapper {
        width: 650px;
        height: 500px;
    }

    /* Home welcome page */

    #welcome-text {
        margin: 50px 0 75px;
        font-size: 150%;
    }

    /* Quiz game section */

    #score {
        left: 83%;
    }

    #answer-options {
        grid-gap: 40px 100px;
        top: 53%;
    }

    #next-question {
        top: 86%;
    }

    /* Results section */

    .result h2 {
        margin: 75px 0;
    }

    .result p {
        max-width: 600px;
        line-height: 25px;
    }

    /* Menu section */

    .menu button:nth-child(1) {
        margin-top: 85px;
    }

    /* Difficulty selection section */

    .difficulty h1 {
        margin-top: 60px;
    }

    .difficulty button:nth-child(2) {
        margin-top: 20px;
    }

    /* How to play section */

    .how-to h1 {
        font-size: 200%;
    }

    .how-to p {
        font-size: 150%;
    }
}

/* For media screens 650px wide and down */

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

    /* Game wrapper */

    #game-wrapper {
        width: 320px;
        height: 570px;
    }

    /* Burger icon */

    .burger {
        right: 5%;
        top: 2%;
    }

    /* Home welcome page */

    #welcome-title {
        font-size: 200%;
        margin-top: 100px;
    }

    #welcome-text {
        line-height: 30px;
        margin-bottom: 95px;
    }

    button {
        height: 50px;
        font-size: 150%;
    }

    /* Quiz game section */

    .home-icon {
        font-size: 150%;
        top: 2%;
        left: 4%;
    }

    #question-count {
        font-size: 150%;
    }

    #score {
        font-size: 150%;
        top: 2%;
        left: 73%;
    }

    #question-text {
        margin: 70px 10px;
        font-size: 150%;
    }

    #answer-options {
        display: block;
    }
    
    #answer-options button {
        margin: 10px;
    }

    #next-question {
        top: 91%;
    }

    /* Results section */

    .result h2 {
        font-size: 200%;
    }

    .result p {
        max-width: 300px;
        font-size: 150%;
    }

    #play-again {
        top: 78%;
    }

    /* Menu section */

    .menu button:nth-child(1) {
        margin-top: 135px;
    }

    .menu button {
        margin: 75px auto;
    }

    /* Difficulty selection section */

    .difficulty h1 {
        margin: 75px 20px 0;
        font-size: 175%;
    }

    .difficulty button:nth-child(2) {
        margin-top: 50px;
    }

    /* How to play section */

    .how-to p {
        max-width: 280px;
        text-align: justify;
    }
}

/* For media screens 340px wide and down */

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

    /* Game wrapper */

    #game-wrapper {
        width: 260px;
        height: 540px;
    }

    /* Home welcome page */

    #welcome-title {
        font-size: 150%;
    }

    #welcome-text {
        font-size: 125%;
        line-height: 25px;
    }

    button {
        height: 40px;
        font-size: 125%;
    }

    /* Quiz game section */

    .home-icon {
        font-size: 125%;
    }

    #question-count {
        font-size: 125%;
    }

    #score {
        font-size: 125%;
        left: 72%;
    }

    #question-text {
        font-size: 125%;
    }

    #next-question {
        top: 89%;
    }

    /* Results section */

    .result h2 {
        font-size: 150%;
    }

    .result p {
        max-width: 240px;
        font-size: 125%;
    }

    #play-again {
        top: 78%;
    }

    /* Difficulty selection section */

    .difficulty h1 {
        font-size: 150%;
    }

    .difficulty button:nth-child(2) {
        margin-top: 65px;
    }

    /* How to play section */

    .how-to h1 {
        font-size: 150%;
    }

    .how-to p {
        max-width: 240px;
        font-size: 125%;
        line-height: 22px;
        margin: 40px auto;
    }
}

/* For landscape on mobile devices */

@media screen and (max-height:500px) {
    #game-wrapper {
        top: 65%;
    }
}

@media screen and (max-height:370px) {
    #game-wrapper {
        top: 85%;
    }
}