highscores.css

:root {
    background-color: rgb(9, 10, 56);
    }
    
  * {
    box-sizing: border-box;
    margin:0;
    padding:0;
    font-size: 20px;
    color: white;
    text-align: center;
    }
  
  body { /*webpage background*/
    background-color: rgb(9, 10, 56);
    text-align: center;
    margin:40px;
    }
  
  #end {
    padding: 10px;
    color: white;
    
  }
    
  h1 { /*user score*/
    padding: 10px;
    color: rgb(248, 2, 2);
    font-family: 'Goldman', cursive;
    font-size: 50px;
  }
  
  h2 { /*"Enter to save your score"*/
    padding: 10px;
    color: white;
    font-family: 'Goldman', cursive;
    font-size: 50px;
  }
    
  #score {
    text-align: center;
    color: white;
    font-family: 'Goldman', cursive;
    font-size: 30px;
    margin-left: 40px;
    padding: 20px;
    }
  
    
  .container {  /*box that surrounds question and choices*/
      padding:20px;
  }
  
  
    .slide{ /* hides next slides - question answer areas combo*/ 
      position: absolute;
      left: 0px;
      top: 300px;
      width: 100%;
      z-index: 1;
      opacity: 0;
      transition: opacity 0.5s;
    }
    
    .current-slide{ /* current slide's visibility*/
      opacity: 1;
      z-index: 2;
    }
    
  .btn { /*buttons: next, previous, submit*/
    display: inline-block;
    align-items: center;
    text-align: center;
    font-family: 'Goldman', cursive;
    font-size: 25px;
    background-color:rgb(34, 173, 16);
    color: rgb(3, 3, 3);
    border-radius: 4px;
    padding: 25px;
    cursor: pointer;
    margin-top:20px;
    width: 70%;
  
    
  }
  
  .btn:hover { /*button display when mouse over*/
    background-color: rgb(119, 112, 219);
  }
  
  #username {
    display: inline-block;
    color:black;
    margin:30px;
    padding: 10px;
    
  
  }
  
  
  
    
  
  
    
    
    /*Media Queries*/
    
    /*When viewport reaches 690px*/ 
    @media (max-width: 690px) {   
      
      /*reduce button size*/
      .btn {                  
          margin: 16px 0px 0px 0px;
          padding: 10px 15px;
          font-size: 1rem;
      }
    
      
    }
    
    /*When viewport reaches 500px*/ 
    @media (max-width: 500px) {
      
      /*reduce button size*/
      .btn {                
        font-size: 0.8rem;
      }
    }