/* Google font link */

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

/* Global style */

* {
    margin: 0;
    padding: 0;
    border: none;
}

body {
    height: 100vh;
    box-sizing: border-box;
    font-family: Caudex, serif;
    font-weight: 200;
    font-size: 90%;
}


/* Hero image */

.hero {
    width: 100%;
    height: 100%;
    background: url('../images/hero-background.webp') no-repeat center center;

    position: relative;
}

/* Header(Logo and menu) */

header {
    font-family: Audiowide, sans-serif;
    width: 100%;
    height: 50px;
    overflow: hidden;
    background-color: rgb(0, 83, 145);
    box-sizing: border-box;
    position: absolute;
    top: 0;
}

.logo {
    color: rgb(245, 245, 245);
    font-size: 175%;
    text-decoration: none;
    line-height: 50px;
    padding-left: 10px;
}

.logo:hover {
    color: gold;
}

.logo i {
    color: gold;
}

.menu {
    height: 50px;
    width: 30%;
    background-color: gold;
    position: absolute;
    font-size: 110%;
    top: 0;
    right: 0;
    transform: translateX(80%);
    transition: 1s;
    padding: 1% 0 0 2% ;
    box-sizing: border-box;
}

.menu li {
    display: inline;
    float: left;
    margin-right: 10%;
}

.menu a {
    text-decoration: none;
    color: whitesmoke;
}

.menu a:hover {
    color: rgb(0, 83, 145);
}



/* Landing intro */

.intro {
    width: 80%;
    height: 80%;
    background-color: rgb(245, 245, 245);
    text-align: center;
    font-size: 300%;
    border: 10px solid rgb(0 83 145);
    line-height: 250%;
    box-sizing: border-box;

    position: absolute;
    left: 10%;
    bottom: 5%;
}

h1 {
    font-family: Audiowide, sans-serif;
    color: gold;
    padding-top: 2%;
}

hr {
    border-top: 2px solid rgb(0 83 145);
    width: 100%;
    margin: 1%;
}

/* Start button */ 

#start {
    width: 20%;
    height: 15%;
    margin-top: 5%;
    font-size: 90%;
    background-color: gold;
    color: rgb(0 83 145);
    border: 2px solid rgb(0 83 145);
    border-radius: 25px;
    font-family: Audiowide, sans-serif;
}

#start:hover {
    color: gold;
    background-color: rgb(0 83 145);
    border: 2px solid gold;
}

/* Game area */

.game-area {
    width: 80%;
    height: 80%;
    background-color: white;
    border: 10px solid rgb(0 83 145);
    box-sizing: border-box;

    position: absolute;
    left: 10%;
    bottom: 5%;
    z-index: 1;
    display: none;
}

.scoreboard {
    width: 90%;
    height: 5%;
    margin: 1% 0 1% 5%;
    font-size: 130%;
    display: inline-block;
}

#lives {
    float: left;
}

#track {
    float: right;
}

#question {
    width: 90%;
    height: 20%;
    background-color: rgb(245, 245, 245);
    margin: 2% 0 2% 5%;
    padding-top: 30px;
    border: 1px solid gold;
    box-shadow: -10px -10px rgb(255 215 0);
    text-align: center;
    font-size: 150%;
    box-sizing: border-box;
}

.answer {
    width: 40%;
    height: 10%;
    background-color: rgba(245, 245, 245);
    margin: 5% 0 2% 6.5%;
    border: 1px solid gold;
    box-shadow: -10px -10px rgb(255 215 0);
    font-family: Audiowide, sans-serif;
    font-size: 150%;
}

.answer:hover {
    background-color: rgb(0 83 145);
}

/* End of quiz win and lose banners */

.quiz-end {
    width: 50%;
    height: 60%;
    background-color: rgb(245, 245, 245);
    text-align: center;
    font-size: 250%;
    padding: 1%;
    box-shadow: 5px 5px 8px black;
    box-sizing: border-box;

    position: absolute;
    bottom: 15%;
    left: 25%;
}

.quiz-end p {
    padding: 10% 0 5% 0;
}

#quiz-win {
    display: none;
    border: 10px solid green;
    z-index: 1;
}

#quiz-lose {
    display: none;
    border: 10px solid red;
    z-index: 1;
}

#quiz-win a, #quiz-lose a {
    color: rgb(0, 83, 145);
    text-decoration: none;
    text-align: center;
    font-size: 90%;
}

#quiz-win a:hover {
    color: gold;
}

#quiz-lose a:hover {
    color: gold;
}


/* History and trophy section */

.history {
    width: 80%;
    height: 80%;
    background-color: rgb(245, 245, 245);
    text-align: center;
    font-size: 150%;
    line-height: 140%;
    border: 10px solid rgb(0 83 145);
    box-sizing: border-box;

    position: absolute;
    left: 10%;
    bottom: 5%;
}

.history p {
    padding: 0 1% 0 1%;
}

.space {
    border-top: 2px solid whitesmoke;
    width: 80%;
    margin: 1%;
}

#trophy-banner {
    font-family: Audiowide, sans-serif;
    font-size: 125%;
    padding: 5% 0 0 15%;
}

#mini-trophy {
    display: none;
}

#trophy {
    width: 10%;
    height: 30%;

    position: absolute;
    bottom: 0;
    left: 20%;

    transition: all .2s ease-in-out;
}

#trophy:hover {
    transform: scale(1.3);
}

.trophy-history {
    width: 35%;
    height: 70%;
    background-color: rgb(245, 245, 245);
    text-align: center;
    font-size: 165%;
    padding: 1%;
    border: 5px solid gold;
    display: none;
    box-shadow: 5px 5px 8px black;

    position: absolute;
    bottom: 20%;
    left: 35%;
}

.trophy-history h1 {
    color: rgb(0, 83, 145);
}

#close-trophy {
    font-family: Audiowide, sans-serif;
    font-size: 150%;
    width: 10%;
    height: 10%;
    background-color: rgb(245, 245, 245);
    float: right;
}



/* Media queries  */

/* For larger screens size from 1599px wide and down */

@media screen and (max-width: 1599px) {
    .menu {
        padding-left: 1%;
    }
    .intro {
        font-size: 180%;
    }

    .quiz-end {
        font-size: 180%;
    }

    .history {
        font-size: 110%;
    }

    #trophy {
        width: 8%;
        height: 25%;
        bottom: 3%;
        left: 25%;
    }

    #trophy-banner {
        font-size: 115%;
        padding: 2% 0 0 17%;
    }

    .trophy-history {
        width: 45%;
        font-size: 120%;
    }

}

/* For large and medium screens size from 1200px wide and down */
@media screen and (max-width: 1200px) {
    .menu {
        width: 40%;
    }
    .intro {
        width: 90%;
        height: 90%;
        font-size: 160%;
        bottom: 2%;
        left: 5%;
    }

    .answer {
        margin: 10% 0 2% 6.5%;
    }

    .quiz-end {
        width: 60%;
        font-size: 170%;
        left: 20%;
    }

    .history {
        font-size: 90%;
    }

    #trophy-banner {
        font-size: 100%;
        padding: 2% 0 0 17%;
    }

    .trophy-history {
        font-size: 110%;
    }

}

/* For medium screens size from 950px wide and down */
@media screen and (max-width: 950px) {
    .menu {
        font-size: 90%;
        padding: 15px 0 0 5px;
    }

    .intro {
        font-size: 180%;
    }

    .history {
        line-height: 160%;
    }

    #trophy {
        width: 10%;
        height: 27%;
        bottom: 1%;
        left: 15%;
    }

    .trophy-history {
        height: 50%;
        font-size: 80%;
    }

}

/* For medium and small screens size from 800px wide and down */
@media screen and (max-width: 800px) {
    .logo {
        font-size: 140%;
    }

    .menu {
        width: 50%;
    }

    .intro {
        font-size: 150%;
    }

    .history {
        line-height: 120%;
    }

    #trophy {
        width: 12%;
        left: 10%;
    }

    .trophy-history {
        height: 60%;
    }
}

/* For small screens size from 600px wide and down */
@media screen and (max-width: 600px) {
    .logo {
        font-size: 135%;
    }

    .menu {
        width: 100%;
        padding-left: 2%;
    }

    .intro {
        font-size: 130%;
    }

    .answer {
        width: 90%;
        margin: 5% 0 2% 5%;   
    }

    #question {
        font-size: 120%;
    }

    .quiz-end {
        font-size: 155%;
    }

    .history {
        font-size: 70%;
        padding: 2%;
    }

    #mini-trophy {
        display: inline-block;
        color: gold;
        font-size: 200%;
    }

    #trophy {
        display: none;
    }

    #trophy-banner {
        padding: 5% 0 0 5%;
    }

    .trophy-history {
        height: 40%;
        font-size: 50%;
        bottom: 40%;
    }
}

/* For smallest screens size from 400px wide and down */
@media screen and (max-width: 400px) {
    .logo {
        font-size: 100%;
    }

    .intro {
        height: 85%;
        font-size: 100%;
    }

    #question {
        font-size: 100%;
        padding-top: 10px;
    }

    .quiz-end {
        font-size: 115%;
    }

    .history {
        font-size: 50%;
    }

    .trophy-history {
        height: 45%;
        font-size: 45%;
    }

}