:root {
    background: linear-gradient(90deg, rgb(97, 79, 160) 0%, rgb(18, 4, 71) 5%, rgb(0, 0, 0) 50%, rgb(18, 4, 71) 95%, rgb(69, 47, 146) 100%);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 62.5%;
    font-family: Arial, Helvetica, sans-serif;
}

@font-face {
    font-family: myFont;
    src: url('/Frijole/Frijole-Regular.ttf');
  }

.logo {
    font-size: 2rem;
    color: #fff;
}

.h1font {
    font-family: myFont;
    font-size: 4rem;
    color: #fff;
    margin-bottom: 1rem;
}

h1 {
    font-size: 4rem;
    color: #fff;
    margin-bottom: 1rem;
}

.jaymac {
    font-size: 4rem;
    margin-top: 6rem;
    margin-bottom: 1rem;
    color: lawngreen;
    opacity: 1;   
    animation: pulse 1s infinite alternate; 
}

@keyframes pulse {
    0%{
        
        opacity: 1;
    }
    100%{
        
        opacity: 0.8;
    }
}


.jaymac:link {


    text-decoration: none;
  
  
  }
  
  
  .jaymac:visited {
  
  
    text-decoration: none;
  
  
  }
  
  
  .jaymac:hover {
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 0.6rem 1.6rem 0 rgba(10, 255, 1, 0.794);
    transition: transform 190ms;
    animation: pulse step-end;
    transform: scale(1.03,1.03)
  }
  
  .jaymac:active {
    text-decoration: none;
  }


  

  #rocket {
    position: absolute;
    bottom: 5px;
    left: 20%;
    animation: fly 5s ease-in-out,  delay-animation 20s linear infinite;
    animation-delay: 6s;
    animation-iteration-count:infinite;
    opacity: 0;
}



@keyframes fly { 
   
    0% { opacity: 1; left: 20%;  bottom: 5px; transform: rotate( 0deg );}
    5% { transform: rotate( 15deg );}
    35% {left: 60%; bottom: 30%;}
    40% {transform: rotate( -30deg );}
    60% {left: 20%; bottom: 55%;}
    65% {transform: rotate( 15deg );}
    99.99% {opacity: 1;}
    100% {left: 70%;  bottom: 120%;} 
    }
   
    @keyframes delay-animation {
        0% {
          opacity: 1;
        }
       25% {
          opacity: 1;
        }
        25.01% {
          opacity: 0;
        }
        100% {
          opacity: 0;
        }
      }
   


h2 {
    font-size: 4.2rem;
    margin-bottom: 4rem;

}

.note {
    color: wheat;
    font-size: 2rem;
}

h2.level {
    color: wheat;
    font-size: 3.5rem;
    margin-bottom: 3rem;

}

.container {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 80rem;
    margin: 0 auto;
    padding: 2rem;
}

footer {
    justify-content: center;
    align-items: center;
    max-width: 30rem;
    padding-bottom: 1rem;
    margin-top: 2rem;
    margin-bottom: 1rem;

}

footer p {
    color: white;;
    font-size: 2rem;
  text-align: center;
  font-weight:500;
}

.line {
   margin-left: 30%;
}

.line:hover {
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 0.6rem 1rem 0 rgb(1, 255, 1);
    transition: transform 190ms;
    transform: scale(1.03)
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-center {
    justify-content: center;
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.text-center {
    text-align: center;
}

.hidden {
    display: none;
}

.btn, .btn2, .btn3, .btn4, .btn5 {
    font-size: 2.4rem;
    padding: 2rem 0;
    width: 30rem;
    text-align: center;
    margin-bottom: 1rem;
    text-decoration: none;
    color: rgb(28, 26, 26);
    background: linear-gradient(90deg, rgb(18, 92, 255) 0%, rgb(0, 102, 255) 100%);
    border-radius: 4px;
    
}

.btn:hover, .btn2:hover, .btn3:hover, .btn4:hover, .btn5:hover {
    cursor: pointer;
    box-shadow: 0 0.4rem 1.4rem 0 rgba(8, 114, 244, 0.6);
    transition: transform 150ms;
    transform: scale(1.03);
}

.btn[disabled]:hover {
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.btnmini {
    font-size: 2.4rem;
    padding: 2rem 0;
    width: 30rem;
    text-align: center;
    margin-bottom: 1rem;
    text-decoration: none;
    color: rgb(28, 26, 26);
    background: linear-gradient(90deg, rgb(3, 248, 15) 0%, rgb(57, 253, 51) 50%, rgb(3, 248, 15) 100%);
    border-radius: 4px;
}

.btnmini:hover {
    cursor: pointer;
    box-shadow: 0 0.4rem 1.4rem 0 rgba(84, 248, 7, 0.979);
    transition: transform 150ms;
    transform: scale(1.03);
    z-index: 5;
}

/* Dropdown Button */

  
  /* The container <div> - needed to position the dropdown content */
  .dropdown {
    position: relative;
    display: inline-block;
   
    
  }
  
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content, .dropdown-content2, .dropdown-content3, .dropdown-content4, .dropdown-content5  {
    display: none;
    position: relative;
    font-size: 2.4rem;
    width: 30rem;
    text-align: center;
    margin-bottom: 1rem;
    text-decoration: none;
    color: rgb(28, 26, 26);
    border-radius: 4px;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a, .dropdown-content2 a, .dropdown-content3 a, .dropdown-content4 a, .dropdown-content5 a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  

  
  /* Show the dropdown menu on hover */
  
  

#highscore-btn {
    background: linear-gradient(90deg, rgb(255, 247, 9) 0%, rgb(240, 221, 6) 100%);
}

#highscore-btn:hover {
    box-shadow: 0 0.4rem 1.4rem 0 rgba(255,255,0,0.5)
}

#homeBtn {
    background: linear-gradient(90deg, rgb(64, 255, 0) 0%, rgb(0, 255, 64) 100%);
}

#homeBtn:hover {
    box-shadow: 0 0.4rem 1.4rem 0 rgba(18,248,0,0.3)
}

.fa-crown {
    font-size: 2.5rem;
    margin-left: 1rem;
}

/* End Page CSS */
.end-form-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 30rem;
}

input {
    margin-bottom: 1rem;
    width: 20rem;
    padding: 1.5rem;
    font-size: 1.8rem;
    border: none;
    box-shadow: 0 0.1rem 1.4rem 0 rgba(86, 185, 235, 0.5);
}

input::placeholder {
    color: #aaa;
}

#username {
    margin-bottom: 3rem;
    width: 100%;
    outline: none;
}

#end-text {
    font-size: 2.4rem;
    color: #fff;
    text-align: center;
}

#saveScoreBtn {
    border: none;
}

.fa-home {
    margin-left: 1rem;
    font-size: 3rem;
    color: rgb(28, 26, 26)
}

.fa-eye {
    margin-left: 3rem;
    margin-right: -6rem;
    font-size: 2rem;
    color: rgb(28, 26, 26)
}

.fa-redo {
    margin-left: 1rem;
    margin-right: -1rem;
    font-size: 2rem;
    color: rgb(28, 26, 26)
}

.fa-angle-double-right {
    margin-left: 2rem;
    margin-right: -6rem;
    font-size: 3rem;
    color: rgb(28, 26, 26)
}

.fa-hand-point-right {
    margin-left: 6rem;
    margin-right: -9rem;
    font-size: 2rem;
    color: rgb(28, 26, 26)
}

.fa-save  {
    margin-left: 1rem;
   
    font-size: 3rem;
    color: rgb(28, 26, 26)
}


@media screen and (max-width: 450px) {
    h1 {
    font-size: 4.9rem;
    color: #fff;
    margin-bottom: 5rem;
    text-align: center;
   }

  

   #rocket {
    position: absolute;
    bottom: -60px;
    left: 20%;
    animation: fly 5s ease-in-out,  delay-animation 20s linear infinite;
    animation-delay: 6s;
    animation-iteration-count:infinite;
    opacity: 0;
}



@keyframes fly { 
   
    0% { opacity: 1; left: 20%;  bottom: -60px; transform: rotate( 0deg );}
    5% { transform: rotate( 15deg );}
    35% {left: 60%; bottom: 30%;}
    40% {transform: rotate( -30deg );}
    60% {left: 20%; bottom: 55%;}
    65% {transform: rotate( 15deg );}
    99.99% {opacity: 1;}
    100% {left: 70%;  bottom: 100%;} 
    }
   
    @keyframes delay-animation {
        0% {
          opacity: 1;
        }
       25% {
          opacity: 1;
        }
        25.01% {
          opacity: 0;
        }
        100% {
          opacity: 0;
        }
      }
   





   
.jaymac {
    font-size: 3rem;
    margin-top: 8rem;
}


body {
   margin-top: 1%;
   
    
  }

}


@media screen and (max-width: 340px) {
   .mainC {
      margin-top: 20%;
    
   }

}