body {
    animation: colorchange 2s ease-in-out infinite;
    transition: background-color 0.3s ease-in-out;
}

@keyframes colorchange {
  0%,100% { background-color: #ffe564; }
  25% { background-color: #ffbdee; }
  50% { background-color: #ffffff; }
  75% { background-color: #caefe0; }
}

#color-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  background-color: transparent;
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0; /* debajo del contenido */
}

.wild-card{
    padding: 30px;
    border-radius: 30px;
    box-shadow: 10px 10px #333333, 0px 0px #333333, 0px 0px  #333333, 0px 0px  #333333, 0px 0px  #333333, 0px 0px  #333333, 0px 0px  #333333;
    border: solid 4px #333333;
    transition: 0.3s;
    background-color: white;
}

.wild-card:hover{
    transition: 0.3s;
    transform: translate(-10px, -50px);
    box-shadow: 20px 20px #333333, 40px 40px  #fff, -20px -20px  #fff, -20px 15px  #fff, 0px 40px  #fff, 15px -20px  #fff, 40px 0px  #fff;   
}

.social{
    border-radius: 20px;
    box-shadow: 5px 5px #333333, 0px 0px #333333, 0px 0px  #333333, 0px 0px  #333333, 0px 0px  #333333, 0px 0px  #333333, 0px 0px  #333333;
    border: solid 3px #333333;
    transition: 0.3s;
    background-color: white;
}

.social:hover{
    transition: 0.3s;
    transform: translate(-5px, -5px);
    box-shadow: 10px 10px #333333, 20px 20px  #fff, -10px -10px  #fff, -10px 5px  #fff, 0px 20px  #fff, 5px -10px  #fff, 20px 0px  #fff;   
}