*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body{
  font-family: 'Poppins';
  background-color: #263238;
}

.container{
  /*para usar toda tela*/
  width: 100vw;
  height: 100vh;
 /*Como vai ter a imagem de cima e de baixo, a gente coloca como relativo para conseguir estiliza-las depois*/

  /*Centralizou o conteúdo no meio e no centro da tela*/
  display: flex;
  justify-content: center;
  align-items: center;
}

.top-wave, .bottom-wave{
  width: 100%;
  z-index: -1;
}

.top-wave{
  position: absolute;
  top: 0;
}

.bottom-wave{
  position: absolute;
  bottom: 0;
}

.content{
  max-width: 1180px;
  display: flex;
  align-items: center;
  gap: 60px;
}

.countdown{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -110px;

  width: 550px;
}

.countdown-title{
  text-transform: uppercase;

  font-size: 36px;
  color: #BA68C8;

  margin-bottom: 19px;
}

.timer{
  display: flex;
  text-align: center;
  justify-content: space-around;
  gap: 12px;
}

.timer-label{
  font-size: 14px;
  line-height: 21px;

  color: #C8C8C8;
}

.timer-value, .timer-separator{
  font-size: 65px;
  line-height: 108px;

  color: #ffffff;
}

.timer-separator{
  margin-top: 20px;
}

.countdown-description{
  font-size: 14px;
  line-height: 21px;

  color: #9C9AB6;

  margin: 10px 0 31px;
}

.countdown-button{
  font-family: 'Poppins';
  font-size: 16px;
  line-height: 24px;
  color: #FFFFFF;

  padding: 16px 32px;

  background: #BA68C8;
  border-radius: 10px;
  border: none;

  cursor: pointer;

  transition: filter 0.2s;
}

.countdown-button:hover{
  filter: brightness(0.9);
}

.rocket{
  display: flex;
  justify-content: center;
  width: 500px;
}

#rocket{
  display: flex;
  align-items: center;

  bottom: 180px;

  width: 100px;

  position: absolute;
  z-index: 2;
}

.rocketfly{
  animation: animacao 8s ease-in forwards;
}

@keyframes animacao{
  100%{
    transform: translateY(-700px);
  }
}

@media (min-width: 1500px){
  #rocket{
    bottom: 350px;
    width: 110px;
  }
}