/* Google Fonts import */
@import url('https://fonts.googleapis.com/css2?family=Laila:wght@300;400;500;600;700&display=swap');

/* Set global variables for colors */
:root {
    --saffron: #F9A37B;
    --white: #FAFAFA;
    --green: #1A4223;
    --navy: #06038D;
    --black: #191919;
}

/* Overrides the default set by the browser */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Laila', Arial, sans-serif;
    color: var(--black);
    background-color: var(--white);
    height: 100vh;
    width: 100%;
    flex-direction: column;
    display: flex;
}

/* Header */
header {
    height: 7vh;
    background-color: var(--saffron);
    padding: 0.5vh;
    text-align: center;
    border-radius: 0 0 2vw 2vw;
    box-shadow: 0 2vh 3vh rgba(0, 0, 0, 0.19), 0 1.2vh 1.2vh rgba(0, 0, 0, 0.23);
}

header h1 {
    font-size: 1.5rem;
}

/* Main section */
main {
    background-color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5vh;
    color: var(--white);
}

/* Menu container */
.box-container {
    padding: 5vh;
    height: auto;
    width: 80vw;
    background-color: var(--navy);
    text-align: center;
    border-radius: 2vh;
    margin-bottom: 5vh;
    box-shadow: 0 2vh 3vh rgba(0, 0, 0, 0.19), 0 1.2vh 1.2vh rgba(0, 0, 0, 0.23);
}

/* Result container & Thanks container only appear once JS event handler is executed */
.result-container,
.thanks-container {
    display: none;
    padding: 2.5vh;
    height: auto;
    width: 80vw;
    background-color: var(--navy);
    text-align: center;
    border-radius: 2vh;
    box-shadow: 0 2vh 3vh rgba(0, 0, 0, 0.19), 0 1.2vh 1.2vh rgba(0, 0, 0, 0.23);
}

/* Main page */
#welcome h2,
#rules h2,
#facts h2 {
    margin-bottom: 2vh;
}

/* Give each line a margin bottom of 2vh */
#welcome p,
#rules p {
    margin-bottom: 2vh;
}

/* Align list to left */
#rules ol {
    text-align: left;
}

/* Give each list a margin bottom of 1vh */
#rules li,
#facts li {
    margin-bottom: 1vh;
}

/* Push unordered list to left and give each list a margin bottom of 2vh */
#facts ul {
    text-align: left;
    margin-bottom: 2vh;
}

/* Button style */
#answer-choice button,
.submit-button button {
    background-color: var(--white);
    color: var(--black);
    padding: 1vh;
    border-radius: 3vh;
    border: var(--black) solid 2px;
    font-size: 1rem;
    font-family: 'Laila', Arial, sans-serif;
    font-weight: bold;
    cursor: pointer;
    width: 40vw;
    margin-bottom: 1vh;
}

/* Style clickable buttons */
.wlc-buttons a,
.rules-buttons a,
.result-buttons a,
.facts-buttons a {
    background-color: var(--white);
    color: var(--black);
    padding: 1vh;
    border-radius: 3vh;
    border: var(--black) solid 2px;
    font-size: 1rem;
    font-family: 'Laila', Arial, sans-serif;
    font-weight: bold;
    cursor: pointer;
    width: 50vw;
    margin-bottom: 1vh;
    text-decoration: none;
}

/* Push the next button down and away from answer buttons */
.next-button a {
    padding-top: 2vh;
}

/* Align buttons using flex */
.wlc-buttons,
.rules-buttons,
.result-buttons,
.facts-buttons,
#answer-choice {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Position heading and buttons to centered and spaced around */
.game-question-timer,
.contact-head {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 2vh;
}

/* Style game timer */
.game-question-timer h2 {
    font-size: 1rem;
}

/* Remove text deocration and make font size inside <a> button bigger */
.game-question-timer a,
.next-button a,
.contact-head a,
#game-restart {
    text-decoration: none;
    color: var(--white);
    font-size: 2rem;
}

/* Reduce image size for mobile version */
.question img {
    width: 150px;
    height: 100px;
    margin-bottom: 2vh;
}

/* Give each line a margin bottom of 2vh */
.question h3,
.display-result h2,
.display-result h3,
.display-thanks-message h2,
.display-thanks-message h3 {
    margin-bottom: 2vh;
}

/* Contact form style */
#contact-align {
    text-align: left;
}

.text-input {
    color: var(--black);
    width: 100%;
    margin: 1vh 0;
    height: 3vh;
}

/* Remove the ability to resize the message box */
#message {
    min-height: 10vh;
    resize: none;
    margin-bottom: 2vh;
}

/* Footer style */
footer {
    background-color: var(--green);
    color: var(--white);
    bottom: 0;
    width: 100%;
    height: 3vh;
    margin-top: auto;
    padding: 0.5vh;
    border-radius: 2vw 2vw 0 0;
}

/* Style footer paragraph */
footer p {
    color: var(--white);
    text-align: center;
    font-size: 1.5vh;
}

/* Media query for tablets and larger screens (768px and up) */
@media screen and (min-width: 768px) {

    /* Increase height of header */
    header {
        height: 7.5vh;
    }

    /* Increase header font size */
    header h1 {
        font-size: 2.5rem;
    }

    /* Increase heading font sizes */
    #welcome h2,
    #rules h2,
    #facts h2,
    .game-question-timer h2,
    .display-result h2,
    #contact-form h2,
    .display-thanks-message h2 {
        font-size: 2rem;
    }

    /* Increase font sizes */
    #welcome p,
    #rules p,
    #rules li,
    #facts li,
    .question h3,
    .display-result h3,
    #contact-form label,
    .display-thanks-message h3 {
        font-size: 1.5rem;
    }

    /* Increase font size for next button */
    .next-button i {
        font-size: 3rem;
    }

    /* Increase image size for tablet or low screen resolution */
    .question img {
        width: 175px;
        height: 125px;
    }

    /* Make answer buttons grid for tablet or low screen resolution */
    #answer-choice {
        display: grid;
        grid-template-columns: 25vw 25vw;
        grid-template-rows: 5vh 5vh;
        column-gap: 2vw;
        row-gap: 2vh;
    }

    /* Move buttons to row instead of column list */
    .result-buttons,
    .rules-buttons,
    .facts-buttons {
        display: flex;
        flex-direction: row;
        gap: 2vw;
        justify-content: space-evenly;
        align-items: center;
    }

    /* Set width limit to accommodate flex-direction of row and increase font size */
    #answer-choice button,
    .result-buttons a,
    .rules-buttons a,
    .facts-buttons a {
        font-size: 1.5rem;
        width: 25vw;
    }

    /* Hover effect */
    #answer-choice button:hover,
    .result-buttons a:hover,
    .rules-buttons a:hover,
    .facts-buttons a:hover,
    .wlc-buttons a:hover,
    .submit-button button:hover {
        background-color: yellow;
        color: var(--black);
    }

    /* Hover effect on <i> icons */
    .next-button i:hover,
    #close-btn i:hover,
    #close-button i:hover {
        color: yellow;
    }

    /* Keep home page buttons in column list style and increase font size */
    .wlc-buttons a,
    .submit-button button {
        font-size: 1.5rem;
        width: 45vw;
    }
}

/* Media query for larger screen size, 1200px and up) */
@media screen and (min-width: 1200px) {

    /* Increase height of header */
    #welcome h2,
    #rules h2,
    #facts h2,
    .game-question-timer h2,
    .display-result h2,
    #contact-form h2,
    .display-thanks-message h2 {
        font-size: 2.5rem;
        margin-bottom: 2vh;
    }

    /* Increase heading font sizes */
    #welcome p,
    #rules p,
    #rules li,
    #facts li,
    .question h3,
    .display-result h3,
    #contact-form label,
    .display-thanks-message h3 {
        font-size: 2rem;
        margin-bottom: 2vh;
    }

    /* Increase font size for next button */
    .next-button i {
        font-size: 4rem;
    }

    /* Increase image size to the maximum for high quality for larger screen resolution */
    .question img {
        width: 200px;
        height: 150px;
    }

    /* Move buttons to row instead of column list */
    #answer-choice,
    .result-buttons {
        display: flex;
        flex-direction: row;
        gap: 2vw;
        justify-content: space-evenly;
        align-items: center;
    }

    /* Set width limit to accommodate flex-direction of row and increase font size */
    #answer-choice button {
        font-size: 2rem;
        width: 15vw;
    }

    .result-buttons a {
        width: 15vw;
    }

    /* Increase font size for home page and submit buttons */
    .wlc-buttons a,
    .submit-button button {
        font-size: 2rem;
    }
}