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

html {
    font-size: 62.5%;
    height: 100%;
    width: 100%;
    overflow: auto;
}

body {
    background-color: #0d2942;
    color: #F8F9F8;
    font-family: "Playfair Display", sans-serif;
    font-size: 1.6rem;
    margin: 0;
    padding: 0;
    cursor: default;
    height: 100%;
    overflow: auto;
}

.row {
    height: 100%;
}

/* Error message */

#error-container {
    text-align: center;
    color: #f44336;
    background-color: #F8F9F8;
}

/* Background Image */

#background-image {
    background: url('../images/background-image.jpg') no-repeat center center fixed;
    min-height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
} 

/* Hide class */

.hide {
    display: none;
}

/* Title */

.page-title {
    text-align: center;
    margin: 1rem auto;
    font-size: 3.5rem;
    font-family: "Kalam", sans-serif;
    font-weight: 800;
    color: #F8F9F8
}

/* Category section */

#loader-container {
    display: flex;
}  

#loader {
    background-image: url("../images/loader.gif");
    background-repeat: no-repeat;
    background-size: cover;
    width: 10rem;
    height: 10rem;
    margin: 10rem auto;
}

#category-title {
    text-align: center;
    margin-top: 3rem;
    font-size: 3rem;
}

#category-container {
    text-align: center;
}

#category {
    background-color: #008080;
    color: #F8F9F8;
    font-size: 2rem;
    margin: 3rem 0;
    text-align-last: center; 
    text-align: center;
    -moz-text-align-last: center;
    height: 5rem;
    width: 25rem;
    border-radius: 1rem;
}

#category:hover {
    background-color: #498690;
}

/* Buttons */

.button-container {
    text-align: center;
    margin: 2rem 0;
    background-color: transparent; 
} 

.button-container a {
    text-decoration: none;
    margin-bottom: 1rem;
    font-size: 2rem;
}

.buttons {
    color: #F8F9F8;
    background-color: #008080;
    border-radius: 1rem;
    padding: 1rem;
    margin: 1rem 0;
}

select#category,
button#restart, 
button#submitCategory,
button#play-again,
button#help {
   border: 0;
   outline: 0;
} 
   
.buttons:hover {
    background-color: #498690;
    color: #F8F9F8;
}

#end-game {
    margin: 1rem 0;
}

/* Help - Modal */
.modal-container {
    text-align: center;
}

.popup-modal {
    display: none;
    overflow: auto;
    background-color: #F8F9F8;
    color: #008080;
    border-radius: 2rem;
    text-align: left;
    padding: 1rem;
    margin: 1rem 1rem;
}

#restart-modal {
    text-align: center;
}

#help-modal-header h3{
    font-size: 3rem;
    text-align: center;
    margin-bottom: 1rem;
}

#restart-modal-body {
    font-size: 2rem;
    margin: 2rem 0;
}

/* Game Page */ 

#game {
    margin-bottom: 3rem;
}

    /* Progress Bar */

#questionCounterContainer {
    width: 100%;
    height: 3rem;
    border: 0.3rem solid #008080;
}

#questionCounter {
    height: 2.4rem;
    background-color: #008080;
    width: 0%;
    text-align: center;
}

    /* Questions */
 
#question {
    text-align: center;
    background-color: #008080;
    margin: 1rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    font-size: 1.6rem;
}

    /* Choices */

.choices {
    background-color: #577377;
    width: 100%;
    height: 5rem;
    text-align: center;
    margin: 0 auto 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0.2rem 0.2rem 0.1rem #2c3033;
}

    /* Validating answers */

.correct {
    background-color: #4CAF50;
}

.incorrect {
    background-color: #f44336;
}

    /* Scores */

#score-container {
    text-align: center;
    margin-bottom: 1rem;
}

#score-text {
    background-color: #008080;
    display: inline-block;
    line-height: 2rem;
    padding: 1rem; 
    margin: auto;
}

/* Endscreen */

#endscreen {
    text-align: center;
}

#end-message-container {
    text-align: center;
}

#total-score {
    text-align: center;
    display: inline-block;
    padding: 1rem;
    line-height: 3rem;
    height: 5rem;
    margin-bottom: 3rem;
    font-size: 2rem;
    width: 100%;
}

#end-message {
    text-align: center;
    display: inline-block;
    padding: 1rem;
    line-height: 3rem;
    height: 5rem;
    font-size: 2rem;
    margin-top: 3rem;
}

/* Media Queries */

@media (min-width: 768px) {

    body {
        font-size: 2rem;
    }

    /* Welcome Section */

    .page-title {
        font-size: 6rem;
        margin-top: 5rem;
    }

    #category {
        width: 35rem;
    }
    
    #modal {
    left: 50%;
    transform: translate(-50%);
    } 

    /* Game Section */

    .page-title {
        margin: 2rem auto;
        font-size: 4.5rem;
    }

    #question {
        margin: 1rem 0;
        height: 5rem;
        font-size: 2rem;
        padding: 2rem;
    }

    .choices {
        width: 90%;
        height: 7rem;
    }

    #score-container {
        width: 18rem;
        height: 5rem;
        line-height: 3rem;
        margin-top: 2rem;
    }

    #questionCounterContainer {
        margin-top: 2rem;
    }

    #questionCounter {
        font-size: 1.5rem;
    }

    .buttons {
        margin-top: 2rem;
    }

    /* Endscreen Section */     

    #total-score {
        margin-bottom: 5rem; 
        font-size: 3rem;
    }

    #end-message {
        margin-bottom: 1rem;
        margin-top: 3rem;
        font-size: 3rem;
    }
}