html {
  font-size: 66%;
}
body {
    display: block;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: black;
    
  }
button {
  font-size: 1rem;
  padding: 10px 20px;
  margin: 5px;
  border: none;
  background-color: #bd00ff;
  color: #fff;
  cursor: pointer;
  }
  button:hover {background-color: #0056b3;}
  header h1 {color: white;}
  header {text-align: center;}
  footer {
    color: white;
    text-align: center;
    margin-top: 100px;
    color: #bd00ff;
}

@font-face {
    font-family: "Aloja";
    src: url(fontes/aloja.otf);
    
    }
@font-face {
      font-family: "new";
      src: url(fontes/NewAthleticM54-31vz.ttf);
      
      }
  
  .timer {
    text-align: center;
    
  }

  .creditos {
    font-family: aloja;
  }
  
  #tempo {
    font-size: 300px;
    margin-bottom: 20px;
    color: white;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  }
  
/* 724 e 825*/
@media screen and (min-width: 724px) and (max-width: 825px) {
  .timer {
    text-align: center;
    
    width: 90%;
    margin: 0px auto;
    
  }
  .timer button {
    font-size: 3rem;
    padding: 10px 20px;
    margin: 5px;
    border: none;
    background-color: #bd00ff;
    color: #fff;
    cursor: pointer;
  }

  #tempo {
    font-size: 25rem;
    text-align: center;
  }

  h1 {
    margin-bottom: 20rem;
  }

  header {
    
    text-align: center;
    width: 90%;
    margin: 0px auto;
  }

  header img {
    width: 40%;
  }

}


/* 300 a 389*/
@media screen and (min-width: 300px) and (max-width: 389px) {
  .timer {
    text-align: center;
    width: 95%;
    margin: 1px auto;
    
  }
  .timer button {
    font-size: 2rem;
    padding: 10px 20px;
    margin: 5px;
    border: none;
    background-color: #bd00ff;
    color: #fff;
    cursor: pointer;
  }

  #tempo {
    font-size: 13rem;
    text-align: center;
  }

  h1 {
    margin-bottom: 20rem;
  }

  header {
    
    text-align: center;
    width: 90%;
    margin: 0px auto;
  }

  header img {
    width: 80%;
    
  }

}

/* 390 a 414*/
@media screen and (min-width: 390px) and (max-width: 414px) {
  .timer {
    text-align: center;
    width: 90%;
    margin: 40px auto;
    
  }
  .timer button {
    font-size: 2rem;
    padding: 10px 20px;
    margin: 5px;
    border: none;
    background-color: #bd00ff;
    color: #fff;
    cursor: pointer;
  }

  #tempo {
    font-size: 14rem;
    text-align: center;
  }

  h1 {
    margin-bottom: 20rem;
  }

  header {
    
    text-align: center;
    width: 90%;
    margin: 0px auto;
  }

  header img {
    width: 80%;
    
  }

}

/* valendo entre 415 e 500px*/
@media screen and (min-width: 415px) and (max-width: 500px) {
  .timer {
    text-align: center;
    margin: 10px auto;
    width: 80%;
    
    
  }
  .timer button {
    font-size: 2rem;
    padding: 10px 20px;
    margin: 5px;
    border: none;
    background-color: #bd00ff;
    color: #fff;
    cursor: pointer;
  }

  #tempo {
    font-size: 10rem;
    text-align: center;
  
  }

  h1 {
    margin-bottom: 20rem;
  }

  header {
    
    text-align: center;
    width: 90%;
    margin: 0px auto;
  }

  header img {
    width: 60%;
    
    
  }

}


/* valendo entre 501px a 723px*/
@media screen and (min-width: 501px) and (max-width: 723px) {
  .timer {
    text-align: center;
    width: 90%;
    margin: 5px auto;
    
  }
  .timer button {
    font-size: 3rem;
    padding: 10px 20px;
    margin: 5px;
    border: none;
    background-color: #bd00ff;
    color: #fff;
    cursor: pointer;
  }

  #tempo {
    font-size: 15rem;
    text-align: center;
  }

  h1 {
    margin-bottom: 20rem;
  }

  header {
    
    text-align: center;
    width: 90%;
    margin: 0px auto;
  }

  header img {
    width: 60%;
    
  }

}


/* 826 e 998*/
@media screen and (min-width: 826px) and (max-width: 998px) {
  .timer {
    text-align: center;
    width: 90%;
    margin: 0px auto;
    
  }
  .timer button {
    font-size: 3rem;
    padding: 10px 20px;
    margin: 5px;
    border: none;
    background-color: #bd00ff;
    color: #fff;
    cursor: pointer;
  }

  #tempo {
    font-size: 25rem;
    text-align: center;
  }

  h1 {
    margin-bottom: 20rem;
  }

  header {
    
    text-align: center;
    width: 90%;
    margin: 0px auto;
    
  }

  header img {
    width: 30%;
  }

}

/* 999 e 1450*/
@media screen and (min-width: 999px) and (max-width: 1450px) {
  .timer {
    text-align: center;
    width: 70%;
    margin: 0px auto;
    
  }
  .timer button {
    font-size: 3rem;
    padding: 10px 20px;
    margin: 5px;
    border: none;
    background-color: #bd00ff;
    color: #fff;
    cursor: pointer;
  }

  #tempo {
    font-size: 25rem;
    text-align: center;
  }

  h1 {
    margin-bottom: 20rem;
  }

  header {
    
    text-align: center;
    width: 90%;
    margin: 0px auto;
    margin-top: -30px;
    
  }

  header img {
    width: 15%;
  }

}


/* 1451*/
@media screen and (min-width: 1451px) {
  .timer {
    text-align: center;
    width: 70%;
    margin: -70px auto;
    
  }
  .timer button {
    font-size: 3rem;
    padding: 10px 20px;
    margin: 5px;
    border: none;
    background-color: #bd00ff;
    color: #fff;
    cursor: pointer;
  }

  #tempo {
    font-size: 29rem;
    text-align: center;
  }

  h1 {
    margin-bottom: 20rem;
  }

  header {
    
    text-align: center;
    width: 90%;
    margin: 0px auto;
    margin-top: -50px;
    
    
  }

  header img {
    width: 15%;
  }

}