/* Font downloaded from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=DynaPuff:wght@400..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

/*Variables*/
:root {
    --primary-font: 'Nunito', sans-serif;
    --heading-font: 'DynaPuff', sans-serif;
    --highlight-color: #f3bd31ff; /* tuscan sun*/
    --background-color: #edf5fdff; /* alice blue*/
    --secondary-background: #e7d9e7ff; /* lavender veil*/
    --secondary-highlight: #0e6fbeff; /* bright marine*/
    --secondary-text: #0f38a9ff; /* eyptian blue*/
    --text-color: #01164eff; /* deep navy*/
    --red-highlight:#ff0d62ff;
    --orange-highlight:#ff7400ff;
}

/* Generic style rules*/
html{
    font-size:10px;
}

body{
    font-family: var(--primary-font);
    color: var(--text-color);
    font-size: 1rem;
    margin-top: 6.1rem;
    background: url("../images/background-image.webp") no-repeat center center/cover fixed;
    min-height: 90vh;
}

h1, 
h2,
h3{
    font-family: var(--heading-font);
    color: var(--background-color);
}

.hidden-text{
    visibility:hidden;
    font-size: 0;
}

.hide{
    display: none;
}

.easy{
    color : var(--highlight-color);
}

.medium{
    color:var(--orange-highlight);
}

.hard{
    color:var(--red-highlight);
}

/* buttons*/
.btn-lg{
    background-color: var(--highlight-color);
    color:var(--text-color);
    font-family: var(--heading-font), sans-serif;
    font-size: 3rem;
    padding-left:40px;
    padding-right:40px;
    box-shadow:2rem 2rem 5rem var(--secondary-background);
}

.btn-lg:hover{
    background-color: var(--text-color);
    color:var(--background-color);
}

.btn-information{
    background-color: var(--secondary-text);
    color: var(--background-color);
    font-size: 2rem;
    margin-top: 2rem;
}

.btn-information:hover{
    background-color: var(--red-highlight);
}

.btn-facts{
    margin-top:2rem;
    margin-bottom: 2rem;
    background-color: var(--text-color);
    color: var(--background-color);
}

.btn-facts:hover{
    background-color: var(--orange-highlight);
    color: var(--text-color);
}

/* nav bar*/
.navbar .container-fluid{
    --bs-gutter-x:0;
    margin-right:1.5rem;
}
.navbar,
.footer{
    font-size: 3rem;
    background-color: var(--secondary-highlight);
    font-family: var(--heading-font), sans-serif;
    height:6.1rem;
}

.navbar{
    box-shadow: 0 0.5rem 0.5rem var(--background-color);
}

.footer{
    box-shadow: 0 0.5rem 0.5rem var(--background-color) inset;
}

.navbar a,
.footer a{
        color: var(--background-color);
}

.navbar a:hover,
.footer a:hover{
        color: var(--highlight-color);
}

.navbar #logo{
    padding-left:4rem;
    max-height: 4rem;
}

.navbar-collapse {
    background-color: var(--secondary-highlight);
    align-items: flex-start;
    padding-left: 4rem;
    margin-right:5.5rem;
} 
/*footer*/

.footer .fa-brands{
    padding:1.5rem;
}

/*landing page*/
#hero{
    padding-top: 2rem;
    padding-bottom: 4rem ;
    color: var(--background-color);
    text-align: center;
}

#hero .display-1{
    font-size:5.5rem;
}

#hero .lead{
    font-size: 2rem;
    padding-bottom: 2rem;
}

#hero-logo img{
    width: 85vw;
    max-width: 40vh;
}
#reasons{
    display:flex;
    flex-direction: row;
    justify-content: center;
}
.reasons-images{
    width: 75vw;
    height:50vw;
    max-width:30rem;
    max-height:20rem;
    border-radius: 2rem;
    box-shadow:2rem 2rem 5rem var(--secondary-background); 
}
.reasons-extra{
    background-color: var(--background-color);
    border: 4px solid var(--text-color);
    box-shadow: 2rem 2rem 2rem var(--secondary-background) inset;
    font-size: 2rem;
    text-align: center;
    font-weight: bold;
    padding:2rem;
}

#reason-1{
    background-image: url(../images/different-genre.webp);
    background-size: cover;
}

#reason-2{
    background-image: url(../images/multiple-levels.webp);
    background-size: cover;
}

#reason-3{
    background-image: url(../images/boost-your-brain.webp);
    background-size: cover;
}

.reasons-titles{
    font-size: 3rem;
    padding-top:1rem;
    padding-bottom: 4rem;
}

/* game play page*/
#play-hero img{
    width: 15vh;
}

#play-hero{
    padding-top: 2rem;
    padding-bottom: 4rem;
}

#play-hero-logo{
    text-align: end;
}

.play-zone,
#end-game-feedback{
    background-color: var(--background-color);
    border: 4px solid var(--text-color);
    box-shadow: 2rem 2rem 2rem var(--secondary-background) inset;
    font-size: 2.5rem;
    text-align: center;
    font-weight: bold;
    padding:2rem;
    margin-bottom:4rem;
}

#form-options .form-check .form-check-input{
    margin-left: -0.5rem;
    margin-right: 1rem;
}

#form-options{
    margin-bottom: 2rem;
}

#form-options .form-check-input:checked{
    background-color: var(--text-color);
    border-color:var(--text-color);
}

#easy-label .fa-star{
    color: var(--highlight-color);
}

#easy-label:hover{
    color:var(--highlight-color);
}

#medium-label .fa-star{
    color: var(--orange-highlight);
} 

#medium-label:hover{
    color:var(--orange-highlight);
}

#hard-label .fa-star{
    color:var(--red-highlight);
} 

#hard-label:hover{
    color:var(--red-highlight);
}

.question-options .form-check-input:checked{
    background-color: var(--text-color);
    border-color:var(--text-color);
}

.question-zone{
    font-size: 2rem;
    text-align: left;
}

#question-number{
    font-family: var(--heading-font), sans-serif;
    font-size: 3rem;
}
#category{
    color:var(--secondary-highlight);
}

#question,
.question-options{
    padding-top:1rem;
    padding-bottom:1rem;
    font-size: 2.5rem;
}

#question-alert{
    color:var(--orange-highlight);
    font-size: 2rem;
    padding-bottom: 1rem;
}

.question-options{
    margin-left:2rem;
}
.question-options .form-check-label{
    color: var(--secondary-highlight);
}

.question-options .form-check-label:checked{
    color:var(--text-color);
}

.correct-answer{
    color:var(--red-highlight);
}

#current-score-update{
    font-size: 2rem;
    color:var(--red-highlight);
}

#submit-answer,
#next-question{
    margin-top:4rem;
    margin-bottom:4rem;
}

#info,
#submit,
#current-score-update{
    margin-top:2rem;
    margin-bottom:4rem;
}

#further-info{
    padding-top: 3rem;
    padding-bottom:3rem;
    font-size: 2rem;
    padding-left: 2rem;
    padding-right:2rem;
    text-align: start;
}

#further-info ul{
    list-style-type: none;
}
#further-info li{
    margin-bottom:1rem;
}

#further-info ul:hover{
    color:var(--secondary-highlight);
}

#feedback-image img{
    width:60vw;
    max-width: 300px;
}

#feedback-comment{
    font-style: italic;
    color:var(--secondary-highlight);
    font-size: 2rem;
    margin-bottom: 2rem;
    margin-top:2rem;
}

.social-media{
    margin-top:2rem;
    margin-bottom:2rem;
}
.social-media a{
    color:var(--text-color);
    font-size: 3rem;
}

.social-media a:hover{
    color:var(--orange-highlight);
}

/* facts page*/

.facts-page-titles{
    font-size: 3rem;
}

.facts-page-titles:hover{
        color:var(--text-color);
}

.facts{
    width: 75vw;
    max-width:30rem;
    border-radius: 2rem;
    background-color: #edf5fdaa;
    border: 4px solid var(--secondary-highlight);
    box-shadow: 2rem 2rem 2rem var(--secondary-background) inset;
    font-size: 2rem;
    text-align: center;
    font-weight: bold;
    padding:2rem;
}

.facts:hover{
    border-color:var(--text-color);
    color:var(--secondary-highlight);
    background-color: var(--background-color);
    box-shadow: 2rem 2rem 2rem var(--highlight-color);
}


.facts-page-images img{
    width:60vw;
    max-width: 300px;
}
.facts-container{
    margin-bottom: 4rem;
}

#fact-placeholder{
    max-width: none;
}

#next-joke{
    color:var(--red-highlight);
    padding-top: 2rem;
    font-size: 3rem;
}

#next-joke:hover{
    color:var(--secondary-highlight);
    text-decoration: underline;
}
#joke-container{
    width: 75vw;
    max-width:30rem;
    padding:2rem;
}

#joke{
    border-radius: 2rem;
    background-color: #edf5fdaa;
    border: 4px solid var(--secondary-highlight);
    box-shadow: 2rem 2rem 2rem var(--secondary-background) inset;
    font-size: 2rem;
    text-align: center;
    font-weight: bold;
    padding:2rem;
}

#joke:hover{
    border-color:var(--text-color);
    color:var(--secondary-highlight);
    background-color: var(--background-color);
    box-shadow: 2rem 2rem 2rem var(--highlight-color);
}

/* Responsive Styling */

/* Medium screens: tablets (768px and above)*/
@media screen and (min-width:768px) {
    .reasons-extra{
        font-size:2.5rem;
    }
    .play-zone .btn-information{
        margin-top: 0;
    }
    .play-zone{
        padding:3rem;
    }
    .social-media a{
        font-size:3rem;
    }
    #random-fact{
        max-width: unset;
    }
}

/* Large screens 992px and above: laptops*/
@media screen and (min-width:992px) {
    #hero .display-1{
        text-align: start;
        font-size: 7rem;
        padding-left:5rem;
    }
    #hero-logo{
        text-align: end;
    }

    #hero .lead{
        font-size: 3.5rem;
    }

    #play-hero{
        padding-bottom: 2rem;
    }

    #submit-answer{
        margin-top:2rem;
        margin-bottom:2rem;
    }
    .social-media a{
        font-size: 5rem;
    }
}

/* Extra large screens: 1200 px and above (laptop)*/
@media screen and (min-width:1200px) {
    .question-zone{
        padding-left:4rem;
        padding-right:4rem;
    }
    #end-game-feedback{
        padding-left:4rem;
        padding-right:4rem;
    }
    #feedback-comment{
        margin-top:0;
    }
}