/*@font-face {
    font-family: 'Commodore64';
    src: url('fonts/Commodore-64-v6.3.3.ttf') format('truetype');
}

body {
    background-color: RGB(206, 206, 204);
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: 'Commodore64', monospace;
    font-size: 20.51px;
    color: RGB(134, 122, 222);
    overflow: hidden;
}

.contenedor-monitor {
    background-image: url('images/monitor.fondo_848x682.png');
    background-repeat: no-repeat;
    background-position: center;
    width: 848px;
    height: 682px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.marco-celeste {
    width: 708px;
    height: 532px;
    background-color: RGB(134, 122, 222);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0px solid red;
    position: relative;
}

.area-trabajo {
    width: 640px;
    height: 400px;
    background-color: RGB(72, 58, 170);
    display: block;
    padding-left: 0px;
    padding-top: 0px;
    position: relative;
    // Color del texto corregido para que coincida con el cursor 
    color: RGB(134, 122, 222);
}
*/
.cursor {
    width: 16px;
    height: 16px;
    background-color: RGB(134, 122, 222);
    animation: blink 1s infinite step-end;
}

.linea-basica {
    display: flex;
    align-items: left;
    height: 16px;
    line-height: 16px;
    min-height: 16px;
    margin-bottom: 0;
    justify-content: flex-start;
}

.linea-basica span {
    white-space: pre;
    /* Restaura el color del texto para las lineas dentro del area de trabajo */
    color: RGB(134, 122, 222);
}

/* Alineación de las líneas de inicio */
#c64-header {
    /* margin-left: 200px;*/
}

#ram-info {
    /*margin-left: 80px;*/
}

#ready-prompt {
    /*margin-left: 10px;*/
}

.cursor-linea-7 {
    display: flex;
    align-items: left;
    justify-content: flex-start;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

/* --- Efecto de carga del Commodore 64 --- */
.loading-effect {
    background-color: transparent !important;
    background-image: linear-gradient(
        to bottom,
        RGB(134, 122, 222) 0%,
        RGB(134, 122, 222) 8%,
        RGB(255, 255, 255) 8%,
        RGB(255, 255, 255) 16%,
        RGB(102, 204, 255) 16%,
        RGB(102, 204, 255) 24%,
        RGB(255, 153, 153) 24%,
        RGB(255, 153, 153) 32%,
        RGB(204, 255, 119) 32%,
        RGB(204, 255, 119) 40%,
        RGB(255, 204, 102) 40%,
        RGB(255, 204, 102) 48%,
        RGB(255, 102, 102) 48%,
        RGB(255, 102, 102) 56%,
        RGB(0, 187, 255) 56%,
        RGB(0, 187, 255) 64%,
        RGB(255, 153, 255) 64%,
        RGB(255, 153, 255) 72%,
        RGB(102, 255, 102) 72%,
        RGB(102, 255, 102) 80%,
        RGB(255, 255, 102) 80%,
        RGB(255, 255, 102) 88%,
        RGB(153, 153, 153) 88%,
        RGB(153, 153, 153) 96%,
        RGB(77, 77, 77) 96%,
        RGB(77, 77, 77) 100%
    );
    background-size: 100% 50px;
    animation: c64-load 0.2s linear infinite;
}

@keyframes c64-load {
    from {
        background-position-y: 0;
    }
    to {
        background-position-y: 50px;
    }
}