/* ---------------------CUSTOM STYLING BEGINS HERE---------------------- */

/* NATIVE ELEMENT STYLES */
:root {
    --mainBGColor: #DEDCDB;
    --altButtonColor: rgba(0, 51, 255, 0.845);
    --timerAndScoreFont: 'Press Start 2P', cursive;
    --mainTextFont: 'Roboto', sans-serif;
}

html,
body {
    margin: 0px;
    height: 100%;
    overflow: hidden;
    color: powderblue;
    font-family: var(--mainTextFont);

}

button {
    margin: 0 25%;
    margin-bottom: 10px;
    opacity: 1;
    background-color: rgba(6, 24, 130);
    border: none;
    color: powderblue;
    box-shadow: 4px 4px 7px rgb(90, 87, 236), 10px 10px 8px rgb(25, 85, 224), 15px 15px 8px rgb(66, 0, 128), 5px 5px 8px rgb(90, 87, 236) inset, 10px 10px 8px rgb(25, 85, 224) inset, 15px 15px 8px rgb(66, 0, 128) inset;


}

button:hover {
    background-color: rgba(6, 24, 130);
    opacity: .8;
    box-shadow: 5px 5px 8px rgb(90, 87, 236) inset, 10px 10px 8px rgb(25, 85, 224) inset, 15px 15px 8px rgb(66, 0, 128) inset, 4px 4px 7px rgb(90, 87, 236), 10px 10px 8px rgb(25, 85, 224), 15px 15px 8px rgb(66, 0, 128);

    transform: translate(4px);
}

button:active {
    transform: translateX(8px);
    box-shadow: 4px 4px 7px rgb(90, 87, 236), 10px 10px 8px rgb(25, 85, 224), 15px 15px 8px rgb(66, 0, 128), 5px 5px 8px rgb(90, 87, 236) inset, 10px 10px 8px rgb(25, 85, 224) inset, 15px 15px 8px rgb(66, 0, 128) inset;

}

button:focus {
    transform: translateX(8px);
    transform: translateX(8px);
    box-shadow: 5px 5px 8px rgb(90, 87, 236) inset, 10px 10px 8px rgb(25, 85, 224) inset, 15px 15px 8px rgb(66, 0, 128) inset, 4px 4px 7px rgb(90, 87, 236), 10px 10px 8px rgb(25, 85, 224), 15px 15px 8px rgb(66, 0, 128);

}

/* button:nth-child(even) {
    background-color: var(--altButtonColor);
} */

main {
    margin: 0;
    padding: 0;
    height: 100%;

}

/* NAVBAR STYLES */
nav {
    width: 100%;
    height: 5%;
    /* border-bottom: 1px solid black; */
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navLinks {
    display: flex;
    padding-left: 0;
    margin: 0;
}

/* QUESTION SECTION STYLES */
#questionContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background: #0f0c29;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #24243e, #302b63, #0f0c29);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#countdown,
#questionRightOrWrong,
#viewHighScores {
    font-family: var(--timerAndScoreFont);
}

/* Where the text and buttons for the game go */
#gameArea {
    text-align: center;
    display: flex;
    flex-direction: column;
}

/* Basically a footer, but will turn green when correct and red when incorrect */
#questionRightOrWrong {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: none;
    transition: background-color 1s linear;
}

#questionRightOrWrong {
    color: rgb(236, 100, 75);
    animation: startButtonColors 20s infinite;
    font-weight: 900;
    font-family: var(--timerAndScoreFont);
}

@keyframes startButtonColors {

    from,
    to {
        color: rgb(236, 100, 75);
    }

    10% {
        color: rgb(219, 10, 91);
    }

    20% {
        color: rgb(174, 168, 211);
    }

    30% {
        color: rgb(89, 171, 227);
    }

    40% {
        color: rgb(37, 116, 169);
    }

    50% {
        color: rgb(3, 201, 169);
    }

    60% {
        color: rgb(22, 160, 133);
    }

    70% {
        color: rgb(233, 212, 96);
    }

    80% {
        color: rgb(243, 156, 18);
    }

    90% {
        color: rgb(236, 240, 241);
    }
}