#video_intro {
   width: 100%;
   height: 99vh;
}

.boton-encima {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   padding-left: 120px;
   padding-right: 120px;
   padding-top: 40px;
   padding-bottom: 40px;
   box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.5);
   -webkit-box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.5);
   background-color: #00205099;
   color: white;
   font-size: 50px;
   font-weight: 100;
	   font-family: 'Jersey 10', sans-serif;
}

/* Contenedor principal para mantener todo en su sitio */
.crt-wrapper {
   position: relative;
   display: inline-block;
   overflow: hidden;
   /* Opcional: Curvatura de los bordes para simular un monitor viejo */
   border-radius: 15px;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.8) inset;
   aspect-ratio: 4 / 3;
}

/* La capa mágica del filtro */
.crt-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 10;
   pointer-events: none;
   /* ¡Crucial para poder jugar! */
   aspect-ratio: 4 / 3;
   /* Efecto de Scanlines (líneas horizontales) */
   background: linear-gradient(to bottom,
         rgba(7, 7, 7, 0.308),
         rgba(255, 255, 255, 0) 50%,
         rgba(0, 0, 0, 0.25) 50%,
         rgba(0, 0, 0, 0.25));
   background-size: 100% 4px;
   /* Ajusta el 4px para cambiar el grosor de las líneas */

   /* Sombra interior para oscurecer los bordes (Vignette) */
   box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.6);

   /* Animación de parpadeo */
   animation: flicker 0.15s infinite;
}

/* Animación sutil de parpadeo de pantalla */
@keyframes flicker {
   0% {
      opacity: 0.94;
   }

   100% {
      opacity: 1;
   }
}

canvas {
   filter: contrast(1.1) brightness(1.08);
}