styles.css

html, body{
    font-family: Palatino;
    background-image: url("images/math4.jpeg");
    background-size:cover;
}

#countdown {
    width: 180px;
    height: 160px;
    border-radius: 50%;
    background-color: white;
    margin: auto;
    border-style:double
}

#seconds {
    display: block;
    width: 100%;
    margin: auto;
    text-align: center;
    justify-content: center;
    display:flex;
    font-size: 100px;
    color:black;
}

h1{
    text-align:center;
    margin:15px;
    font-weight:bold;
    color:white;
}

.container{
    text-align:center;
    justify-content:center;
    margin:auto;
}

/* Neon style for Start button */
@import url(https://fonts.googleapis.com/css?family=Exo+2:200i);

:root {
    /* Set neon color */
    --neon-border-color:rgb(37, 179, 37);
}

@keyframes flicker {

    0%,
    19%,
    21%,
    23%,
    25%,
    54%,
    56%,
    100% {

        text-shadow:
            -0.2rem -0.2rem 1rem #fff,
            0.2rem 0.2rem 1rem #fff,
            0 0 2rem var(--neon-text-color),
            0 0 4rem var(--neon-text-color),
            0 0 6rem var(--neon-text-color),
            0 0 8rem var(--neon-text-color),
            0 0 10rem var(--neon-text-color);

        box-shadow:
            0 0 .5rem #fff,
            inset 0 0 .5rem #fff,
            0 0 2rem var(--neon-border-color),
            inset 0 0 2rem var(--neon-border-color),
            0 0 4rem var(--neon-border-color),
            inset 0 0 4rem var(--neon-border-color);
    }

    20%,
    24%,
    55% {
        text-shadow: none;
        box-shadow: none;
    }
}
.start-game{
    animation: flicker 1.5s infinite alternate;
    background-color:rgb(37, 179, 37);
    width: 120px;
    height:60px;
    font-size:22px;
    margin-top:5px;
    border:none;
    font-weight:bold;
    color:rgb(65, 63, 63)
}

#submit-button{
    background-color:white;
    font-weight:bold;

}

.questions{
    font-weight:bold;
    font-size:60px;
    color:white;
    text-shadow:3px 3px 3px;

}

.user-answer{
    margin-bottom:60px;
}

.score{
    font-weight: bold;
    font-size:25px;
    float:left;
    padding:25px;
    border-style: double;
    background-color:rgb(226, 223, 223);
}

.highest-score{
    font-weight: bold;
    font-size:25px;
    float:right;
    padding:25px;
    border-style: double;
    background-color:rgb(226, 223, 223);
}

/* Neon title */

:root {
    --shadow-color: #FF9E9E;
    --shadow-color-light: white;
}

.logo-1 {
    font-size: 40px;
    text-transform: uppercase;
    font-family: palatino;
    color: white;
    animation: neon 3s infinite;
    display: block;
    height: auto;
    text-align: center;
    margin-top:20px;
}

@keyframes neon {
    0% {
        text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
            0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light),
            0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color);
    }

    50% {
        text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
            0 0 5px var(--shadow-color-light), 0 0 15px var(--shadow-color-light), 0 0 25px var(--shadow-color-light),
            0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 60px var(--shadow-color), 0 0 80px var(--shadow-color), 0 0 110px var(--shadow-color), 0 0 210px var(--shadow-color);
    }

    100% {
        text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
            0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light),
            0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color);
    }
}

.operator-options{
    font-size:20px;
    color:white;
    padding-top:20px;
}

#textInput{
    width:30px;
    height:25px;
    text-align:center;
}

.range-bar{
    margin-top:15px;
}

.number-limit{
    color:white;
    font-size:25px;
}

.operator-options{
    font-size:25px;
    background-color:white;
    color:black;
    width:170px;
    height: 75px;
    justify-content:center;
    border-radius:10px;
    margin-top:20px;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    border-style:double
}