@import url("https://fonts.googleapis.com/css2?family=Barriecito&display=swap");

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

/* FONDO PSICODÉLICO */
body{
  margin:0;
  padding:0;

  background: linear-gradient(
    45deg,
    #ff5f6d,
    #7fff71,
    #47e5bc,
    #4c6ef5,
    #c77dff,
    #ff5f6d
  );

  background-size: 400% 400%;
  animation: fondoPsicodelico 12s ease infinite;

  font-family: sans-serif;
}

@keyframes fondoPsicodelico{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

/* LAYOUT 3 COLUMNAS */
#layout{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 90px;
}

/* TITULO */
#tituloPagina{
  font-family:"Barriecito", system-ui;
  font-size:8vw;
  margin:0;
  display:flex;
}

#tituloPagina span{
  display:inline-block;
}

/* COLORES DEL TITULO */
.l1{color:#ff4c4fd2;}
.l2{color:#ff4c4c;}
.l3{color:#3affde;}
.l4{color:#4926c9;}
.l5{color:#b75286;}
.l6{color:#1982c4;}
.l7{color:#4267ac;}
.l8{color:#6a4c93;}
.l9{color:#c77dff;}
.l10{color:#ff5d8f;}
.l11{color:#ff8fab;}

/* COLLAGE */
#contenedorPersonaje{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
}

/* IMAGENES */
.imagen{
  width: 420px;
  height: 220px;
  object-fit: cover;
  display: block;
  border: none;
  margin: 0;
  padding: 0;
}
#ojo{
  object-position: center 30%;
}
#nariz{
  object-position: center 35%;
}


#boca{
  object-position: center 85%;
}

/* BOTON ROJO */
#boton{
  width:10vw;
  height:10vw;
  border-radius:50%;
  border:none;
  cursor:pointer;

  background: radial-gradient(circle at 30% 30%, #ff4d4d, #c40000);

  box-shadow:
    inset 0 12px 22px rgba(255,255,255,0.5),
    inset 0 -12px 22px rgba(0,0,0,0.5),
    0 12px 20px rgba(0,0,0,0.3);

  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

#boton:active{
  transform: translateY(10px);
  box-shadow: inset 0 5px 10px rgba(0,0,0,0.6);
}

#linkSecreto{
  display:none;
  position:absolute;
  bottom:60px;
  right:90px;
  font-family:"Barriecito", system-ui;
  font-size:4vw;
  color:#fc43fc;
  text-decoration:underline;
}