.countdown {
    position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  padding: 2rem;
  margin: auto;
  max-width: 1000px;
}

.countdown-content {
  z-index: 2;
}

.countdown-header h1 {
  font-size: 2.5rem;
  font-family: 'Parisienne', cursive;
    color: var(--primary);
  text-align: center;
  letter-spacing: 0.1rem;
}

.time-box-container {
  display: flex;
  gap: 2rem;
}

.time-box {
  text-align: center;
  background-color: #ffffff;
  padding: 15px 40px;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.time-box span {
  display: block;
  font-size: 2.5rem;
  font-weight: bold;
}

.countdown-decor {
  width: 400px;
  position: absolute;
  left: -3%;
  bottom: -15%;
  opacity: 0.8;
}

@media (max-width: 940px){
  .countdown-decor {
    opacity: 0.6;
  }

  .countdown-header h1 {
    text-shadow: -1px -1px 4px rgb(255 255 255);
  }
}

@media (max-width: 700px) {
  .time-box-container {
    flex-direction: column;
    align-items: center;
  }

  .time-box {
    width: 130px;
  }

  .time-box span {
    font-size: 1.7rem;
  }

  .countdown-decor {
    right: -10%;
    left: auto;
    width: 560px;
    bottom: -10%;
  }

  .countdown {
    align-content: flex-start;
    overflow-y: visible;
    overflow-x: clip;
    padding: 0;
  }
  
  .countdown-content {
    padding-left: 2rem;
  }

  .time-box-container {
    gap: 1.5rem;
  }
}

@media (max-width: 500px) {
  .countdown-decor {
    right: auto;
    opacity: 0.4;
    width: 500px;
  }

  .countdown {
    align-content: center;
    overflow-y: visible;
    overflow-x: clip;
  }

  .countdown-content {
    padding-left: 0;
  }

  .time-box-container {
    gap: 1rem;
  }

  .time-box span {
    font-size: 1.5rem;
  }

}