/* =====================================
   R0T0-DEV RETRO SYSTEM INTERFACE
===================================== */


* {
    box-sizing: border-box;
}


body {

    margin: 0;
    padding: 0;

    background: #000;

    color: #00ff66;

    font-family: "Courier New", monospace;

    line-height: 1.6;

    overflow-x: hidden;

}



/* CRT SCANLINE EFFECT */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    background:

    repeating-linear-gradient(
        0deg,
        rgba(0,255,100,0.04),
        rgba(0,255,100,0.04) 1px,
        transparent 1px,
        transparent 3px
    );

    z-index: 10;

}





/* MAIN CONTAINER */


.container {

    max-width: 900px;

    margin: 50px auto;

    padding: 35px;

    border: 2px solid #00ff66;

    box-shadow:

    0 0 15px #00ff66,
    inset 0 0 15px rgba(0,255,100,0.2);

    background:

    rgba(0,0,0,0.85);

}





/* HEADER */


header {

    text-align: center;

    margin-bottom: 40px;

}


h1 {

    font-size: 38px;

    text-shadow:

    0 0 10px #00ff66;

}


header p {

    letter-spacing: 3px;

}





/* SECTION STYLE */


section {

    margin-top: 45px;

}


h2 {

    color: #00ff99;

    text-shadow:

    0 0 8px #00ff66;

}


h3 {

    margin-top: 30px;

    color: #00ffaa;

}



.line {

    color: #008833;

}





.status {

    color: #00ffaa;

    font-weight: bold;

}





/* LINKS */


a {

    color: #00ff99;

    text-decoration: none;

}


a:hover {

    text-shadow:

    0 0 10px #00ff66;

}





/* FOOTER */


footer {

    margin-top: 50px;

    text-align: center;

    color: #008833;

}





/* =====================================
   BIOS BOOT SCREEN
===================================== */


.boot-screen {

    position: fixed;

    inset: 0;

    background: black;

    z-index: 100;

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: hidden;

    animation:

    bootFade 4.5s forwards;

}





/* BLURRY IMAGE */

.boot-image {

    position: absolute;

    inset: 0;


    background-image:

    url("boot-image.png");


    background-size: cover;

    background-position: center;


    filter:

    blur(12px);


    opacity: 0.35;


    animation:

    imageDrop 3.5s forwards;

}






/* BOOT TEXT */


.boot-text {

    position: relative;

    z-index: 2;


    text-align: center;


    font-size: 20px;


    color: #00ff66;


    text-shadow:

    0 0 10px #00ff66;


    animation:

    textGlow 1.5s infinite alternate;

}






/* IMAGE SLIDES DOWN */


@keyframes imageDrop {


    0% {

        transform:

        translateY(-100%);

        opacity: 0;

    }


    30% {

        opacity: .35;

    }


    100% {

        transform:

        translateY(100%);

        opacity: 0;

    }


}






/* SCREEN FADES */


@keyframes bootFade {


    0% {

        opacity: 1;

    }


    85% {

        opacity: 1;

    }


    100% {

        opacity: 0;

        pointer-events: none;

    }


}






@keyframes textGlow {


    from {

        text-shadow:

        0 0 5px #00ff66;

    }


    to {

        text-shadow:

        0 0 20px #00ff66;

    }

}





/* BLINKING CURSOR EFFECT */

footer::after {

    content: "_";

    animation:

    blink 1s infinite;

}



@keyframes blink {


    50% {

        opacity: 0;

    }

}





/* MOBILE SUPPORT */


@media(max-width:700px){


    .container {

        margin: 15px;

        padding: 20px;

    }


    h1 {

        font-size: 28px;

    }


}