*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


:root {
    font-size: 62.5%;
}


#main {
    background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), url('../images/Integer\ Practice\ Banner.jpg') center no-repeat;
    background-size: cover;
    width: 100%;
    min-height: calc(100vh - 90px); /*--keeps the footer bottom */
}


.main-header {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 4rem;
}


#score h1 {
    font-size: calc(2.5vw + 2vh);
}


#score h1,
button#resetbutton {
    font-family: lucida console regular;
    src: url('../fonts/Lucida\ Console\ Regular.ttf') format('truetype');
    color: #fff;
    font-weight: bolder;
}


button#resetbutton {
    font-size: calc(1vw + 1vh);
}


button#resetbutton,
#boxes .box {
    text-align: center;
    border-radius: 0.5rem;
}


#question {
    height: 30rem;
}


#question h2 {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: calc(10vw + 9vh);
    margin: 6rem auto 1rem auto;
    font-weight: bolder;
}


#boxes {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    font-family: lucida grande;
    src: url('../fonts/LucidaGrande.ttf') format('truetype');
}


#boxes .box {
    flex-basis: calc(6vw + 6vh);
    height: calc(6vw + 6vh);
    background-color: #333;
    color: #fff;
    font-size: calc(4vw + 4vh);
    cursor: pointer;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -ms-transition: all 0.2s;
}


#boxes .box:not(:last-child) {
    margin-right: 3rem;
}


#boxes .box:active,
button#resetbutton:active {
    background-color: #721c24;
    box-shadow: 0.1rem 0.1rem #a13e48;
    -moz-box-shadow: 0.1rem 0.1rem #a13e48;
    -webkit-box-shadow: 0.1rem 0.1rem #a13e48;
}


#gameOver {
    position: absolute;
    top: 18rem;
    left: 30%;
    font-size: calc(1.5vw + 1.5vh);
    line-height: 3;
    height: calc(20vw + 10vh);
    width: calc(25vw + 25vh);
    text-align: center;
    border-radius: 1rem;
    z-index: 10;
    padding: 1rem;
    background-color: #721c24;
    color: #fff;
    display: none;
}


@media (max-width: 525px) {
    #gameOver {
        width: calc(25vw + 25vh);
        height: calc(20vw + 15vh);
        left: 20%;
    }
}


footer{
    background: #333;
    height: auto;
    width: 100w;
    font-family: lucida console regular;
    padding-top: 10px;
    color: white;
}


.footer-content{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    font-size: 20rem;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 3rem;
}


.footer-content p {
    max-width:500px;
    margin: 10px auto;
    line-height: 28px;
    font-size: 30px;
}


.yearly{
    font-family: lucida grande;
    color: white;
    font-size: 20rem;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 3rem;
}


.outer-footer{
    padding: 5px;
    text-align: center;
    color: white;
    font-size: 18px;
    background-color:#333; 
}