/* =====================================================
   GENERAL
===================================================== */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;
    background: #000;
    color: #fff;
    font-family: "Courier New", monospace;
}


/* =====================================================
   DESKTOP
===================================================== */

.desktop {

    position: relative;

    width: 100%;

    height: 850px;

    overflow: hidden;

    background-color: #000;

    background-image:
        radial-gradient(
            white 1px,
            transparent 1px
        );

    background-size: 80px 80px;

}


/* =====================================================
   ESTRELLAS
===================================================== */

.desktop::after {

    content: "";

    position: absolute;

    inset: 0;

    background-image:
        radial-gradient(
            white 1px,
            transparent 1px
        );

    background-size: 137px 137px;

    opacity: 0.45;

    pointer-events: none;

    z-index: 1;

}


/* =====================================================
   ★★★★★
   TEXTO 80s
   ★★★★★

   ESTE TEXTO NO ES UN DIV.

   FORMA PARTE DEL FONDO DEL ESCRITORIO.

===================================================== */

.desktop::before {

    content:
        "SCROLL DOWN\A FOR MORE ↓";

    white-space: pre;

    position: absolute;

    top: 270px;

    left: 50%;

    transform:
        translateX(-50%)
        rotate(-6deg);

    width: 1200px;

    text-align: center;

    font-family:
        Impact,
        "Arial Black",
        sans-serif;

    font-size: 150px;

    font-weight: 900;

    line-height: 0.82;

    letter-spacing: 8px;

    color: #ff1493;

    -webkit-text-stroke: 5px #ff69b4;

    text-shadow:

        10px 10px 0 #00ffff,

        20px 20px 0 #0000ff,

        0 0 15px #ff00ff,

        0 0 30px #ff00ff,

        0 0 60px #00ffff;

    pointer-events: none;

    user-select: none;

    z-index: 2;

}


/* =====================================================
   TÍTULO
===================================================== */

.desktop-title {

    position: absolute;

    top: 15px;

    left: 20px;

    font-size: 20px;

    color: #00ffcc;

    text-shadow:

        0 0 5px #00ffcc,

        0 0 10px #00ffcc;

    z-index: 50;

}


/* =====================================================
   CARPETAS
===================================================== */

.folders {

    position: absolute;

    top: 80px;

    left: 25px;

    display: flex;

    flex-direction: column;

    gap: 18px;

    z-index: 50;

}


.folder {

    width: 100px;

    color: white;

    text-decoration: none;

    text-align: center;

    font-size: 12px;

}


.folder-icon {

    display: block;

    font-size: 42px;

    margin-bottom: 3px;

}


.folder:hover {

    color: #00ffff;

    text-shadow:
        0 0 5px cyan;

}


.folder:hover .folder-icon {

    transform: scale(1.08);

}


/* =====================================================
   WINDOWS
===================================================== */

.window {

    position: absolute;

    width: 390px;

    background: #c0c0c0;

    color: #000;

    border:
        3px solid #fff;

    box-shadow:
        4px 4px 0 #555;

    z-index: 20;

}


/* =====================================================
   WINDOW 1
===================================================== */

.window-one {

    top: 100px;

    left: 250px;

}


/* =====================================================
   WINDOW 2
===================================================== */

.window-two {

    top: 390px;

    left: 650px;

}


/* =====================================================
   WINDOW TITLE
===================================================== */

.window-title {

    height: 30px;

    background:
        linear-gradient(
            to right,
            #000080,
            #1084d7
        );

    color: #fff;

    font-family:
        Arial,
        sans-serif;

    font-weight: bold;

    padding:
        5px 5px 5px 8px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    cursor: move;

    user-select: none;

}


/* =====================================================
   CLOSE BUTTON
===================================================== */

.close-button {

    width: 22px;

    height: 22px;

    padding: 0;

    background: #c0c0c0;

    color: #000;

    border-top:
        2px solid white;

    border-left:
        2px solid white;

    border-right:
        2px solid #555;

    border-bottom:
        2px solid #555;

    font-weight: bold;

    cursor: pointer;

}


.close-button:active {

    border-top:
        2px solid #555;

    border-left:
        2px solid #555;

    border-right:
        2px solid white;

    border-bottom:
        2px solid white;

}


/* =====================================================
   WINDOW CONTENT
===================================================== */

.window-content {

    padding: 20px;

    min-height: 220px;

    font-family: Arial, sans-serif;

}


.window-content h2 {

    color: #000080;

    margin-top: 0;

}


.window-content h3 {

    color: #000080;

}


.window-content hr {

    border: 0;

    border-top:
        1px solid #777;

}


/* =====================================================
   STARS
===================================================== */

.stars {

    text-align: center;

    font-size: 22px;

    margin: 20px 0;

    color: #000080;

}


/* =====================================================
   MAIN CONTENT
===================================================== */

.main-content {

    max-width: 900px;

    margin: 80px auto;

    padding: 30px;

    background: #050505;

    border:
        2px solid #333;

}


.main-content h1 {

    color: #00ffcc;

    text-align: center;

}


.subtitle {

    text-align: center;

    color: #888;

}


.main-content h2 {

    color: #00ffff;

}


.main-content section {

    border-left:
        3px solid #00ffff;

    padding-left: 20px;

    margin: 50px 0;

}


/* =====================================================
   FOOTER
===================================================== */

footer {

    margin-top: 100px;

    padding: 30px;

    border-top:
        1px solid #333;

    text-align: center;

    color: #666;

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 800px) {

    .desktop {

        height: 750px;

    }


    .desktop::before {

        top: 280px;

        width: 900px;

        font-size: 85px;

        letter-spacing: 3px;

    }


    .window {

        width: 340px;

    }


    .window-one {

        left: 150px;

    }


    .window-two {

        left: 300px;

    }

}