@import url('https://fonts.google.com/specimen/Nunito?preview.text=daylife%20of%20a%20lovesick%20girl%20%E2%9D%80&specimen.preview.text=daylife+of+a+lovesick+girl+%E2%9D%80');

body{
  margin:0;
  padding:0;
  background:
    url("images/fondo.jpg"),
    linear-gradient(to bottom, #ffdff3, #f4e7ff, #dff6ff);
  font-family:'Quicksand', sans-serif;
  color:#C48D84;
  overflow-x:hidden;
}

/* CONTENEDOR */
.wrapper{
  width:850px;
  margin:40px auto;
  background:rgba(255,255,255,0.65);
  border:4px double #ffcce6;
  border-radius:25px;
  box-shadow:
    0 0 20px #ffd6ef,
    0 0 40px rgba(255,255,255,0.7);
  padding:25px;
  backdrop-filter: blur(4px);
}

/* HEADER */
header{
  text-align:center;
  margin-bottom:20px;
}

h1{
  font-family:'Nunito', monospace;
  font-size:4rem;
  color:#DB9186;
  text-shadow:
    2px 2px white,
    0 0 10px #fff;
  margin:0;
}

.subtitle{
  font-size:1.1rem;
  color:#C48D84;
  margin-top:-10px;
}

/* MENU */
nav{
  text-align:center;
  margin:20px 0;
}

nav a{
  display:inline-block;
  margin:8px;
  padding:10px 18px;
  background:linear-gradient(to bottom, #ffe6f4, #f9d6ff);
  border:2px solid #fff;
  border-radius:999px;
  text-decoration:none;
  color:#C48D84;
  font-weight:bold;
  box-shadow:0 0 10px rgba(255,255,255,0.8);
  transition:0.3s;
}

nav a:hover{
  transform:scale(1.08);
  background:linear-gradient(to bottom, #fff0fa, #f0ddff);
}

/* CAJAS */
main{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.box{
  background:rgba(255,255,255,0.7);
  border:2px solid #ffe4f4;
  border-radius:20px;
  padding:20px;
  box-shadow:0 0 12px rgba(255,255,255,0.8);
}

.box h2{
  margin-top:0;
  color:#d17cb4;
  font-size:1.4rem;
}

.box ul{
  padding-left:18px;
}

/* BOTON */
.enter{
  text-align:center;
  margin-top:30px;
}

.enter a{
  text-decoration:none;
  padding:14px 30px;
  background:linear-gradient(to bottom, #ffd6ef, #f6c7ff);
  color:#7a587c;
  border-radius:999px;
  border:2px solid white;
  font-weight:bold;
  box-shadow:0 0 15px rgba(255,255,255,0.9);
  transition:0.3s;
}

.enter a:hover{
  transform:scale(1.1);
  filter:brightness(1.05);
}

/* FOOTER */
footer{
  text-align:center;
  margin-top:25px;
  font-size:0.9rem;
  color:#C48D84;
}

/* BRILLOS */
.sparkle{
  position:fixed;
  color:white;
  font-size:2rem;
  animation:float 4s ease-in-out infinite;
  opacity:0.8;
  pointer-events:none;
}

.s1{
  top:10%;
  left:8%;
}

.s2{
  top:70%;
  right:10%;
  animation-delay:2s;
}

.s3{
  top:30%;
  right:20%;
  animation-delay:1s;
}

@keyframes float{
  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-10px);
  }

  100%{
    transform:translateY(0px);
  }
}

/* RESPONSIVE */
@media(max-width:900px){

  .wrapper{
    width:90%;
  }

  main{
    grid-template-columns:1fr;
  }

  h1{
    font-size:3.5rem;
  }
}