:root {
  /*Paleta de colores*/

  --colorprimero: #8aaf6e;
  --colorsegundo: #3d7f05;
  --colortercero: #f4a870;
  --colorcuarto: #ec7304;
  --colorquinto: #8abdf2;

  /*Fuentes*/
  --fuenteuno: "Pattaya", sans-serif;
  --fuentedos: "Special Elite", cursive;
  --fuentetres: "Viga", sans-serif;
}

.countdown {
  font-family: var(--fuentedos);
  text-transform: uppercase;
}

.countdown > div {
  display: inline-block;
}

.countdown > div > span {
  display: block;
  text-align: center;
}

.countdown-container {
  margin: 0 3px;
}

.countdown-container .countdown-heading {
  font-size: 11px;
  margin: 3px;
  color: #666;
  font-size: var(--fuentedos);
}

.countdown-container .countdown-value {
  font-size: 50px;
  background: var(--colorquinto);
  padding: 10px;
  color: #fff;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
  border-radius: 8px;
}

@media (max-width: 600px) {
  .countdown {
    display: flex;
    flex-direction: row;
    max-width: 400px;

    .countdown-container .countdown-value {
      font-size: 40px;
    }
  }
}

@media (max-width: 450px) {
  .countdown-container .countdown-value {
    font-size: 30px;
    background: var(--colorextra);
    padding: 5px;
    color: #fff;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
    border-radius: 8px;
  }

  .countdown-container {
    margin: 0 3px;
  }
  .countdown-container .countdown-heading {
    font-size: 5px;
    margin: 3px;
    color: #666;
  }
}