@import url('https://fonts.googleapis.com/css2?family=VT323&family=Quicksand:wght@400;700&display=swap');

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

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

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

h1{
  margin:0;
  font-size:5rem;
  font-family:'VT323', monospace;
  color:#C48D84;
  text-shadow:
    2px 2px white,
    0 0 10px white;
}

.subtitle{
  margin-top:-8px;
  color:#9473a3;
}

/* MENU */
nav{
  text-align:center;
  margin-bottom:25px;
}

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

nav a:hover{
  transform:scale(1.08);
}

/* POSTS */
.entry{
  background:rgba(255,255,255,0.72);
  border:2px solid #ffe1f1;
  border-radius:20px;
  padding:20px;
  margin-bottom:20px;
  box-shadow:0 0 12px rgba(255,255,255,0.8);
}

.entry h2{
  margin-top:5px;
  color:#C48D84;
}

.date{
  font-size:0.9rem;
  color:#aa89b2;
  margin-bottom:8px;
  font-style:italic;
}

/* BOTONES */
.buttons{
  text-align:center;
  margin-top:30px;
}

.buttons a{
  display:inline-block;
  margin:8px;
  padding:12px 24px;
  border-radius:999px;
  text-decoration:none;
  background:linear-gradient(to bottom, #ffd9ef, #f4cfff);
  color:#7b5d82;
  font-weight:bold;
  border:2px solid white;
  box-shadow:0 0 10px rgba(255,255,255,0.9);
  transition:0.3s;
}

.buttons a:hover{
  transform:scale(1.08);
}

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

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

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

.s2{
  top:65%;
  right:9%;
  animation-delay:2s;
}

.s3{
  top:30%;
  right:18%;
  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%;
  }

  h1{
    font-size:3.5rem;
  }
}