:root{
    background-color: rgb(43, 43, 43);
    }
    
    li{
        padding-bottom: 3px;
        color: white;
        text-shadow: 1.5px 1px 3px black;
        list-style-type: none;
    }
    
    p{
        color: white;
        text-shadow: .5px .5px white;
        text-align: center;
        font-size: xx-large;
        font-family: sans-serif;
    
    }

    input{
        text-align: center;
    }
    
    .container {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 80rem;
        margin: 0 auto;
      }
    
      button {
        display: inline-block;
        font-family: sans-serif;
        background:  linear-gradient(180deg, lightblue, rgba(255, 255, 255, 0));
        border-radius: 10px;
        border: 3px double #ffffff;
        color: #ffffff;
        text-align: center;
        font-size: 15px;
        padding: 20px;
        width: 200px;
        margin: 3px;
      }
    
      button:hover{
          box-shadow: 0px 0px 6px #ffffff;
      }

      button:active{
        background: linear-gradient(180deg, rgba(255, 255, 255, 0), lightblue);
      }
    
    #startpage{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        background-color: rgb(20, 39, 80);
        border: double #ffffff;
        box-shadow: 0px 0px 6px white;
        padding: 50px
    }

    .greeting {
        display: flex;
        align-items: center;
        flex-direction: column;
        font-family: sans-serif;
        color: aliceblue;
    }
    
    #timer{
        font-family: sans-serif;
        background-color: rgb(20, 39, 80);
        color: #eeeeee;
        font-size: x-large;
        text-shadow: .5px .5px black;
        text-align: center;
    }
    #quiz {
        display: none;
        background-color: rgb(20, 39, 80);
        padding: 50px;
        border: double white;
        box-shadow: 0px 0px 6px white;

    }
    
    #result {
        display: none;
    }
    
    #gameover {
        text-align: center;
        display: none;
        flex-direction: column;
        align-items: center;
    }
    
    #highScore{
        height: 1.5rem;
        border: double 2px;
    }
    
    #high-scorePage{
        display: none;
        width: 50%;
        border: double;
        border-color: silver;
        border-bottom-style: double;
        padding-bottom: .3rem;
        background: linear-gradient(90deg, rgb(70, 70, 70), lightblue);
    }
    
    #highscore-header{
        display:flex;
        justify-content: space-around;
        border-bottom-style: double;
        margin-bottom: .5rem;
        background: linear-gradient(grey, black);
        color: white;
        font-family: sans-serif;
    }
    #highscoreContainer{
        color: white;
        height: 100%;
        width: 100%;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    #initials{
        margin: .5rem;
        height: 1.75rem;
    }
    
    #highscore-initials{
        display: inline-block;
        padding-left: 8rem;
        font-family: sans-serif;
        font-weight: bold;
    }
    
    #highscore-score{
        float: right;
        padding-right: 8rem;
        font-family: sans-serif;
        font-weight: bold;
    }
    
    #finalScore{
        padding-bottom: 0.5rem;
        color: white;
        font-size: x-large;
        font-family: sans-serif;
        font-weight: bold;
    }
    
    #endGameBtns{
        display: none;
    }