style.css

body {
    position: realative;
    width: 100%;
    height: 100vh;
    background: linear-gradient(180deg, #5B5E76 0%, #101C3A 30%);
  font-family: 'JetBrains Mono', sans-serif;
}

header {
  display: flex;
  justify-content: space-around; 
  align-items: center; 
  font-style: normal;
  font-weight: normal;
  font-size: 1.2em;
  line-height: 29px;
  width: 100%;
  flex-wrap: wrap; 
}
a { 
  justify-content: center; 
  color: #FFFFFF;
  text-align: center; 
  padding: 0 20px;  
  margin-top: 3em;
  font-weight: bold;
}

/* Cronômetro */
h2 {
  position: relative; 
  width: 100%;  
  margin-top: 7%; 
  font-style: normal;
  font-weight: 100;
  font-size: 4vw; 
  line-height: 53px;
  text-align: center;
  color: #FFFFFF;
}

/* Temporizador 00:00:00*/
#time {
    font-size: 5em;
    color: #FFFFFF;
    text-align: center;
    margin: 5vh;
}

/* Botões */
.botoes {
    display: flex;
    justify-content: center;
    gap: 3%;
    margin-top: 5vh;
   flex-wrap: wrap;
}
.botao {
    width: 20%; 
    height: 8vh;
    background-color: #101C3A;
    color: #FFFFFF;
    border: 0.1em solid #FFFFFF;
    border-radius: 1em;
    font-size: 1.5em;
    font-weight: 400;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease;
    box-sizing: border-box; 
    min-width: 150px;
    text-align: center;
}
.botao:hover {
    transform: scale(1.1);
    background-color: #FFFFFF;
    color: #101C3A;
}

hr {
    position: fixed;
    width: 100%; 
    height: 0.5px; 
    bottom: 10vh;
    background-color: #FFFFFF; 
}
footer {
    position: fixed; 
    width: 100%; 
    height: 8vh; 
    bottom: 0%; 
    font-family: 'JetBrains Mono', sans-serif;
    font-style: normal;
    font-size: 1em; 
    text-align: center;
    color: #FFFFFF;
}