@font-face{
   font-family: "pixelify";
   src:url(../fonts/PixelifySans-Regular.ttf);
      }

@font-face{
  font-family: "VT323";
  src:url(../fonts/VT323-Regular.ttf);
}
@font-face{
  font-family:"pixelscript";
  src:url(../fonts/pixelscript.ttf);
}
body{
cursor: url(images/cursorestrella.png),auto;
background-image: url(images/fondo-media-1.webp);
background-position: center;
background-repeat:repeat;
background-attachment: fixed;
}
p{
  font-family: "VT323";
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color:#33134c;
  margin-top: 10px;
  margin-left: 20px;
  margin-bottom: 5px;
  margin-right: 20x;
}
h1{
   font-family: "pixelify";
   font-style: bold;
   font-size: 32px;
   color: #33134c;
   text-align: center;
  margin-top: 70px;
}
h2{
  font-family: "VT323";
   font-size: 24px;
   color:#33134c;
   text-align: left;
   margin-top: 15px;
   margin-bottom: 5px;
   margin-left: 15px;
   margin-right: 15px;
}
.back-home{
  transform: scale(0.3) translateY(-700px) translateX(-900px);
}
.page {
  display: flex;
  flex-direction: column; /* Esto apila los elementos uno encima del otro */
  width: 100%;
}


.media-wrapper {
  cursor: url(images/cursorestrella.png),auto;
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    width:700px;
    height:600px;
  border: 80px solid transparent;
  border-radius: 10px;
  border-image-source: url(borders/medialog-1.png);
  border-image-slice: 110; 
  border-image-repeat:round;
    position: relative;
    overflow-y: scroll;
    scrollbar-color: #782222 #ebc8a1;
    background-origin: padding-box;
    background-repeat: no-repeat;
    padding: 10px 10px 10px 10px;
    display:flex;
    flex-direction:column;
    align-items: center;
    row-gap:20px;
    margin: 0 auto;
    margin-top: 20px;
}

.media-container {
    flex-wrap: wrap;
    padding: 5px 20px 5px 10px;
    border-radius: 20px;
    background-color: #f6ddc2;
    position: relative;
    width: 100%;          /* ◄ Obliga a la tarjeta a usar todo el ancho disponible */
    box-sizing: border-box; /* ◄ Evita que los paddings rompan el diseño */
    display: none;
    flex-direction: row; /* ◄ Organiza el contenido hacia abajo */
}
.media-container.show {
  display: flex; /* O 'block', según tu diseño original */
}
.media-container img {
    border-radius: 10px;
    margin: 10px;
    border-width: 3px;
    border-style: solid;
    border-color:#782222;
}

.media-texte {
    display:flex;
    flex-direction: column;
    padding:10px;
    font-size: 22px;
    font-family: "VT323";
}


.media-title {
    display:block;
}

.media-title p {
    margin: 5px 0px 20px 0px;
}

details > p {
    margin-top:5px;
}

.media-column {
    display:flex;
    flex-direction: column;
    text-align: center;
    position: absolute;
    right: 4vw;
    justify-content: space-between;
}

.media-column p {
    margin: 5px 0px 0px 0px;
    font-size:15px;
}
.show {
  display: flex;
}

#myBtnContainer {
    display:flex;
    flex-direction: column;
    align-items: center;
    row-gap:10px;
    margin-top: 20px;
}

.button-type-media {
    display: flex;
    flex-wrap: wrap;
}


.btn {
  border-color:#f2baba;
  border-width:2px;
  border-style: none;
  outline: none;
  padding: 5px 10px;
  background-color: #141e41;
  background-image: url(../images/media-images/plaid-3.jpg);
  color: #ebc8a1;
  cursor: pointer;
  border-radius: 50px;
  font-family: "pixelify";
  font-size:15px;
}
.btn:hover {
  background-color:#c37024;
  background-image: none;
  color: white;
}

.btn.active {
  background-color: #782222;
  color: white;
  border-color:#782222;
  background-image: none;
}

::marker {
  content: "\2665\0020"; /* Esto pintará el corazón (♥) seguido de un espacio */
  color: #782222;
}

.f{
    position:fixed;
    z-index: 999;
    top:999%;
    left:50%;
    max-height:90%;
    max-width:90%;
    transform:translate(-50%,-50%)}*:focus+.f{top:50%}

.media-container img{cursor:pointer}


.cover {
    max-width: 105px;
    height:150px;
}

.buttons-wrapper {
    background-image: url("../images/sites-images/gingham_pattern_yellow2.jpg");
    border-radius:20px;
    padding: 0px;
    margin: 40px 0px 20px;
    width: 65vw;
}

.buttons-wrapper img {
    width:88px;
    height:31px;
}

.buttons-wrapper p {
  margin: 0px 0px 0px 0px;
  padding: 10px 0px 10px 0px;
  border-radius: 20px 20px 0px 0px;
  background-color: #eec259dd;
  color: #ffffff;
  text-align:center;
}

.buttons-container {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  column-gap: 5px;
  row-gap: 5px;
}

.buttons-container a:hover {
    cursor: url("../images/home-images/rose.gif"), auto;
}
CSS
/* Asegura que la cabecera sirva como punto de referencia */
.header-cabecera {
  position: relative;
  width: 100%;
  text-align: center; /* Mantiene el título perfectamente centrado */
}

/* Posiciona la estrella a la izquierda */
.icono-estrella {
  position: absolute;
  left: 5%; /* Ajusta este porcentaje si quieres acercarla o alejarla del borde */
  top: 30%;
  transform: translateY(-50%); /* La centra verticalmente respecto al título */
  display: inline-block;
  cursor: pointer;
  transition: transform 0.2s ease; /* Efecto suave opcional */
}

/* Tamaño de la imagen de la estrella */
.icono-estrella img {
  width: 100px;  /* Ajusta el tamaño de la estrella según te guste */
  height: auto;
  display: block;
}

/* Efecto hover (opcional): la estrella crece un poco al pasar el ratón */
.icono-estrella:hover {
  transform: translateY(-50%) scale(1.15);
}
.subtitulo-estrella {
  font-family: "pixelify"; /* Utiliza la misma tipografía de tu web */
  font-size: 14px;      /* Tamaño pequeño para que actúe como etiqueta */
  color: #33134c;          /* Cambia el color si lo prefieres (ej. #4a2e35) */
  margin-left: 20px;   /* Espacio entre la estrella y el texto */
  font-weight: bold;
}
.icono-estrella, 
.icono-estrella:hover, 
.icono-estrella:visited, 
.icono-estrella:active {
  text-decoration: none !important;
}
.icono-youtube {
  position: absolute;
  left: 5%; /* Ajusta este porcentaje si quieres acercarla o alejarla del borde */
  top: 50%;
  transform: translateY(-50%); /* La centra verticalmente respecto al título */
  display: inline-block;
  cursor: pointer;
  transition: transform 0.2s ease; /* Efecto suave opcional */
}

/* Tamaño de la imagen de la estrella */
.icono-youtube img {
  width: 100px;  /* Ajusta el tamaño de la estrella según te guste */
  height: auto;
  display: block;
}

/* Efecto hover (opcional): la estrella crece un poco al pasar el ratón */
.icono-youtube:hover {
  transform: translateY(-50%) scale(1.15);
}
.subtitulo-youtube {
  font-family: "pixelify"; /* Utiliza la misma tipografía de tu web */
  font-size: 14px;      /* Tamaño pequeño para que actúe como etiqueta */
  color: #33134c;          /* Cambia el color si lo prefieres (ej. #4a2e35) */
  margin-left: 0px;   /* Espacio entre la estrella y el texto */
  font-weight: bold;
  margin-top: -60px;
}
.icono-youtube, 
.icono-youtube:hover, 
.icono-youtube:visited, 
.icono-youtube:active {
  text-decoration: none !important;
}