@font-face {
    font-family:"amstrad";
    src:url("../fonts/amstrad_cpc464.eot?") format("eot"),url("../fonts/amstrad_cpc464.woff") format("woff"),url("../fonts/amstrad_cpc464.ttf") format("truetype"),url("../fonts/amstrad_cpc464.svg#Amstrad-CPC464") format("svg");font-weight:normal;
    font-style:normal;
}

:root{    
    --azul:#000085;
    --amarillo:#ffff00;
}

*{
    box-sizing: border-box;
}

body{
    max-width:1920px;
    margin: 0;
    padding: 0;
    min-width: 100vw;
    min-height: 100vh;
    overflow-x: hidden;
}

html{
    font-family: amstrad;
    background-color:var(--azul);
    color:var(--amarillo);
    font-size: 16px;
}

main{
    width: 100%;
    padding: 50px 30px;
    font-size: 1.875rem;
}

#intro{
    padding-left:3.125rem;
}

#intro-linea{
    padding-left:388px;
}

#editor{
    padding-left:21px;        
}

#cuadrado{
    font-size:50px;
    line-height:10px;
}

#contenedor{    
    padding-left:25px;  
}

input{
    border:var(--azul);
    background-color:var(--azul);
    caret-color:var(--azul);
    color:var(--azul);
    outline-style: none;
    outline-color:var(--azul);
    width:90%;
    font-size: 1px;
}

input:active{
	color:var(--amarillo)
}


/* EFECTO PANTALLA CRT */

.crt-effect {
    
    position: absolute; /* Esencial para que los pseudo-elementos se posicionen correctamente */
    /*overflow: hidden;   /* Importante para contener los efectos dentro del div */
    overflow-x: hidden;

    /* Efecto de líneas de escaneo CRT */
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Dos degradados: uno para líneas horizontales, otro para verticales muy finas */
        background:
            linear-gradient(rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.3) 50%), /* Líneas horizontales */
            linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); /* Líneas verticales */
        background-size: 100% 2px, 2px 100%; /* Tamaño y espaciado de las líneas */
        z-index: 100; 
        pointer-events: none; /* Permite interacciones con elementos subyacentes */
        animation: crt-scanlines 0.5s infinite linear; /* Animación de movimiento sutil */
    }

    /* Ligero brillo y distorsión sutil del monitor */
    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Un degradado radial para un sutil "glob" y oscurecimiento en las esquinas */
        background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
        /* Un filtro blur para suavizar y dar un toque de desenfoque de CRT */
        filter: blur(1px); 
        opacity: 0.15; /* Para que sea muy sutil */
        z-index: 99; /* Por debajo de las scanlines pero por encima del contenido */
        pointer-events: none;
        animation: crt-flicker 0.1s infinite alternate; /* Parpadeo sutil */
    }
}

/* Animación para las líneas de escaneo */
@keyframes crt-scanlines {
    0% { background-position: 0 0; }
    100% { background-position: 0 2px; } /* Mueve las líneas ligeramente hacia abajo */
}

/* Animación para el parpadeo general de la pantalla */
@keyframes crt-flicker {
    0% { opacity: 0.15; }
    50% { opacity: 0.25; } /* Un poco más de opacidad para el parpadeo */
    100% { opacity: 0.15; }
}