:root {
  --tempox: 30s ease-in-out infinite;
  --tempoy: 60s ease-in-out infinite;

  --amarelo: #e2dd00;
  --azul: #3ea1d3;
  --rosa: #e40c5e;
  --verde: #89cbc1;
  --branco: #ffffff;
  --preto: #1e1e1c;
  --vermelho: #e84637;

  --logo-preto: invert(99%) sepia(100%) saturate(0%) hue-rotate(277deg)
  brightness(103%) contrast(101%);

  --logo-branco: invert(0%) sepia(27%) saturate(15%) hue-rotate(123deg)
  brightness(102%) contrast(101%);

}

html {
  height: 98%;
}

body {
  animation: backgroundFade var(--tempox);

  display: flex;
  align-items: center;
  justify-items: center;

  height: 100%;
}

@keyframes backgroundFade {
  0% {
    background-color: var(--amarelo);
  }
  14.28571428571429% {
    background-color: var(--azul);
  }
  28.57142857% {
    background-color: var(--rosa);
  }
  42.85714286% {
    background-color: var(--verde);
  }
  57.14285714% {
    background-color: var(--branco);
  }
  71.42857143% {
    background-color: var(--preto);
  }
  85.71428571% {
    background-color: var(--vermelho);
  }
  100% {
    background-color: var(--amarelo);
  }
}

.container-medias {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 100px;
  margin: 0 auto;
  width: 99%;
  animation: anim-cor-logo var(--tempox);
}

#links {
  height: 40px;
  width: 40px;
  margin: 0px 50px;
}

#container-central {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

#h-logo {
  width: 8%;
  position: absolute;
  animation: anim-cor-logo var(--tempox),
    h-logo-opac var(--tempoy);
}

#hedonist-logo {
  width: 15%;
  position: absolute;
  animation: anim-cor-logo var(--tempox),
    hedonist-logo-opac var(--tempoy);
}

@media (max-width: 420px) {
  .container-medias {
    flex-wrap: wrap;
    bottom: 100px;
    width: 98%;
  }

  #links {
    height: 24px;
    width: 24px;
    margin: 20px;
  }

  #h-logo {
    width: 25%;
    margin-bottom: 4rem;
  }
  
  #hedonist-logo {
    width: 35%;
    margin-bottom: 4rem;
  }

  .container-medias {
    bottom: 60px;
  }
}

@keyframes anim-cor-logo {
  0% {
    filter: var(--logo-branco);
  }
  14.28571428571429% {
    filter: var(--logo-branco);
  }
  28.57142857% {
    filter: var(--logo-branco);
  }
  42.85714286% {
    filter: var(--logo-branco);
  }
  57.14285714% {
    filter: var(--logo-preto);
  }
  71.42857143% {
    filter: var(--logo-branco);
  }
  85.71428571% {
    filter: var(--logo-branco);
  }
  100% {
    filter: var(--logo-branco);
  }
}

@keyframes h-logo-opac {
  0% {
    opacity: 100%;
  }
  49% {
    opacity: 100%;
  }
  50% {
    opacity: 0%;
  }
  99% {
    opacity: 0%;
  }
  100% {
    opacity: 100%;
  }

}

@keyframes hedonist-logo-opac {
  0% {
    opacity: 0%;
  }
  49% {
    opacity: 0%;
  }
  50% {
    opacity: 100%;
  }
  99%{
    opacity:  100%;
  }
  100% {
    opacity: 0%;
  }
}