@import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap');


body {
  background-image: url("images/fondo1.jpg");
  background-color: #ecb7cc;
  color: #EB236C; 
  font-family: "Times New Roman", Times, serif; /* Fuente por defecto noventera */
  font-size: 18px;
  margin: 10px;
}

/* ==========================================
   SIDEBARS DE GIFS REPETITIVOS AUTOMÁTICOS
   ========================================== */

.sidebar-izq {
  background-image: url("images/marco_2.png");
  background-repeat: repeat-y;
  background-position: left top; /* Alinea la imagen totalmente a la izquierda */
  background-size: 120px auto;   /* Define el ancho de tu marco/GIF */
  min-width: 120px;              /* Ajustado al ancho real de la imagen */
}

.sidebar-der {
  background-image: url("images/marco_4.png");
  background-repeat: repeat-y;
  background-position: right top; /* Alinea la imagen totalmente a la derecha */
  background-size: 120px auto;    /* Define el ancho de tu marco/GIF */
  min-width: 120px;               /* Ajustado al ancho real de la imagen */
}

.titulo1 {
  
  text-align: center;
  font-family: 'Cedarville Cursive', cursive;
    font-size: 100px;
  
}

.footer-90s {
  margin-top: 40px;
  border-top: 5px double #EB236C;
  padding-top: 20px;
}

.badges img {
  border: 0px solid #d4af37;
  margin: 2px;
}

/* ==========================================
   ADAPTACIÓN PARA PANTALLAS MÓVILES
   ========================================== */
@media screen and (max-width: 768px) {
  
  /* 1. Ocultar los sidebars laterales para ganar espacio */
  .sidebar-izq, .sidebar-der {
    display: none !important;
  }

  /* 2. Convertir las celdas de la tabla para que ocupen todo el ancho */
  table, tr, td {
    display: block !important;
    width: 100% !important;
  }

  /* 3. Hacer que las imágenes se ajusten al ancho de la pantalla */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 4. Ajustar el título principal para que no sea gigante en móvil */
  .titulo1 {
    font-size: 50px !important;
  }
}