body {
  background-image: url("/media/imagenes_pantalla_inicio/backround.jpg");
  color: #FDD3AB;
  font-size: 32px;
  font-style: "Alfa Slab One", serif;
  cursor:url("/media/imagenes_pantalla_inicio/golosina.gif"), auto;
}

#bienvenida{
  width: 556px;
}

#ilmyweb{
  width: 400px;
}

section.bienvenida{
  position: relative; /* Añadido para anclar pegatinas */
  background-color: rgba(90,158,193,0.9);
  border-style: groove;
  border-color: #F79FD1;
  border-width: 5px;
  border-radius: 8px;
  padding: 1.5rem;
  margin-left: 16%;
  margin-right: 16%;
  margin-top: 100px;
}

ul li{
  list-style: none;
  margin: 0;
  padding: 0;
}

.separador ul {
  display: flex;
  flex-direction: row;
  justify-content: center; /* Esto centrará las burbujitas en la pantalla */
  flex-wrap: wrap; /* Esto evita que se aplasten si la pantalla es muy pequeña */
  padding: 0;
}

.separador img{
  width:180px;
}

.container {
  position: relative; /* Para anclar al Cinnamoroll del centro */
  display: flex;
  flex-direction: row;
  justify-content: center; /* Centra los dos bloques en la pantalla */
  align-items: center; /* Los alinea verticalmente para que queden a la misma altura */
  gap: 40px; /* Este es el espacio exacto de separación entre el About Me y los botones */
  flex-wrap: wrap; 
  width: 100%;
  padding: 0 5%; /* Da un poco de respiro a los lados de la pantalla */
  box-sizing: border-box; /* Evita que el padding rompa las medidas */
}

.about_me {
  width: 45%; /* En lugar de 1059px, le decimos que ocupe un poco menos de la mitad */
  background-color: rgba(90,158,193,0.9);
  border-style: groove;
  border-color: #F79FD1;
  border-width: 5px;
  border-radius: 8px;
  padding: 1.5rem;
  box-sizing: border-box;
}

#titulo{
  font-weight: bold;
  font-size:32px;
}
.cosikas {
  position: relative; /* Para anclar el hada */
  width: 45%; /* Le damos exactamente el mismo ancho que al About Me */
  box-sizing: border-box;
}

.cosikas ul {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Esto crea exactamente 2 columnas del mismo ancho (1 fracción cada una) */
  gap: 20px; /* Esto es el espacio o "hueco" que hay entre los botones, tanto en vertical como en horizontal */
  padding: 0;
  margin: 0;
}

.cosikas button {
  width: 100%; 
  background-color: rgba(90, 158, 193, 0.9);
  border-style: groove;
  border-color: #F79FD1;
  border-width: 5px;
  border-radius: 8px;
  padding: 1.5rem;
  font-family: "Alfa Slab One", serif;
  font-size: 32px; 
  color: #FDD3AB;
  cursor: url("/media/imagenes_pantalla_inicio/golosina.gif"), auto;
  transition: all 0.2s ease-in-out; 
}

.cosikas button:hover {
  /* Invertimos los colores principales para un contraste llamativo */
  background-color: #F79FD1; 
  color: rgba(90, 158, 193, 1);
  
  /* Cambiamos el estilo del borde de groove a dashed (rayitas) o dotted (puntos) */
  border-style: dashed;
  
  /* Sombra de texto sólida (sin difuminar) para el efecto píxel */
  text-shadow: 2px 2px 0px #FFF;
  
  /* Sombra en la caja para darle volumen de botón de máquina recreativa */
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.5);
  
  /* Un pequeño salto hacia arriba al pasar el ratón */
  transform: translateY(-4px);
  
  /* Mantenemos el cursor de golosina */
  cursor: url("/media/imagenes_pantalla_inicio/golosina.gif"), auto;
}
  
footer{
  position: relative; /* Añadido para anclar a Totoro */
}
  
footer ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap; 
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

.flores li img{
  width:11rem;
}

/* =========================================
   IMÁGENES FLOTANTES (Efecto pegatina)
   ========================================= */

#pompompurin {
  position: absolute;
  top: -62px;  
  z-index: 10;
  width: 160px;
}

#ordenador {
  position: absolute;
  bottom: -8px;
  left: -100px; 
  z-index: 10;
}

#surfing_cinamonroll {
  position: absolute;
  bottom: -40px;
  right: -50px; 
  z-index: 10;
  width: 160px;
}

#cinamonroll {
  position: absolute;
  bottom: 120px; 
  left: 50%; 
  transform: translateX(-50%);
  z-index: 10;
  width: 240px;
}

#hada {
  position: absolute;
  bottom: -20px;
  right: -60px; 
  z-index: 10;
}

#totoro {
  position: absolute;
  bottom: 10px;
  left: 30px;
  z-index: 10;
}