body {

    margin:0;
    min-height:100vh;

    background:#020202;

    color:#ff5a00;

    font-family:"Courier New", monospace;

    display:flex;

    justify-content:center;

    align-items:flex-start;

    overflow-y:auto;

    padding:30px 0;

}



/* BACKGROUND */

.bg-image {

    position:fixed;

    inset:0;

    background:url('/images/Background 2.jpg');

    background-size:cover;

    background-position:center;

    opacity:.15;

    z-index:-3;

}



.crt-scanlines {

    position:fixed;

    inset:0;

    background:
    linear-gradient(
    rgba(18,16,16,0) 50%,
    rgba(0,0,0,.25) 50%
    );

    background-size:100% 4px;

    z-index:-2;

}





/* MAIN GRID */

.screen-wrapper {

    width:95vw;

    min-height:950px;

    display:grid;

    grid-template-columns:220px 620px 220px;

    grid-template-rows:70px 640px 180px 220px;

    gap:25px;

    justify-content:center;

    align-items:center;

}

.screen-wrapper::before {

    content:"";

    position:absolute;

    inset:-40px;

    background:
    radial-gradient(
        ellipse,
        rgba(255,90,0,.18),
        transparent 70%
    );

    z-index:-1;

    pointer-events:none;

}



/* TOP BOX */

.top-panel {

    grid-column:1 / 4;

    grid-row:1;

    height:100px;
  
    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:80px;

    border:2px solid #ff5a00;

    background:rgba(0,0,0,.85);

    color:#ff5a00;

    box-shadow:

    0 0 20px rgba(255,90,0,.5);

    font-size:12px;

    letter-spacing:2px;
 
    overflow:hidden;

}

/* TOP LOGO */

.top-logo {

    position:absolute;

    left:0px;

    top:0px; 

    width:300;

    height:100px;

    object-fit:contain;

    filter:
    drop-shadow(0 0 10px #ff5a00);

}


.top-banner {

    position:absolute;

    right:0px;

    top:0px;

    width:300;

    height:100px;

    object-fit:contain;

     filter:
    drop-shadow(0 0 10px #ff5a00);

}
/* TOP SEARCH TERMINAL */

.search-box {

    position:absolute;

    right:25px;

    top:58px;

    z-index:5;

    display:flex;

    align-items:center;

    gap:5px;

}


.search-box input {

    width:150px;

    background:#020202;

    border:1px solid #ff5a00;

    color:#ff5a00;

    font-family:"Courier New", monospace;

    font-size:11px;

    padding:5px;

    filter:
    drop-shadow(0 0 10px #ff5a00);

}


.search-box input::placeholder {

    color:#666;

}


.search-box button {

    background:#020202;

    border:1px solid #ff5a00;

    color:#ff5a00;

    font-family:"Courier New", monospace;

    font-size:11px;

    padding:5px 8px;

    cursor:pointer;

}


.search-box button:hover {

    background:#ff5a00;

    color:#000;

    box-shadow:0 0 10px #ff5a00;

}




/* CANTI FRAME */

.canti-head-frame {

    position:absolute;

    width:532px;

    height:500px;

    left:50%;

    top:420px;

    transform:translate(-50%,-50%);

    z-index:1;

    pointer-events:none;

    overflow:hidden;

    border-radius:

    60px 40px 50px 80px /

    50px 60px 40px 70px;

}



.canti-head-frame img {

    width:100%;

    height:100%;

    object-fit:cover;

}





/* CENTER SCREEN */

.portal {

    grid-column:2;

    grid-row:2;

    z-index:2;


    width:540px;

    height:500px;


    padding:20px 30px;

    box-sizing:border-box;


    transform:translate(40px,-25px);


    background:rgba(10,3,0,.85);


    border:3px solid #ff5a00;


    border-radius:

    60px 40px 50px 80px /

    50px 60px 40px 70px;


    overflow:hidden;


    box-shadow:

    0 0 25px rgba(255,90,0,.6);


    display:flex;

    flex-direction:column;

    justify-content:space-between;

    align-items:center;

}





/* SIDE PANELS */

.side-panel {

    z-index:3;

    height:380px;

    padding:20px;

    background:rgba(0,0,0,.85);

    border:2px solid #ff5a00;

    border-radius:35px;

    box-shadow:

    0 0 20px rgba(255,90,0,.4);


    color:#ff5a00;

    font-size:12px;

}



.left-panel {

    grid-column:1;

    grid-row:2;

}



.right-panel {

    grid-column:3;

    grid-row:2;

}





.panel-title {

    border-bottom:1px dashed #ff5a00;

    padding-bottom:8px;

    margin-bottom:15px;

    letter-spacing:3px;

}


.bottom-panel .panel-title {

    text-align:center;

}



.side-panel p {

    color:#888;

}
/* RETRO CAROUSEL KNOBS */

.carousel-knob {

    width:70px;
    height:70px;

    border-radius:50%;

    background:
    radial-gradient(
        circle at 35% 35%,
        #444,
        #111 45%,
        #000 75%
    );

    border:3px solid #ff5a00;

    box-shadow:
    0 0 10px rgba(255,90,0,.6),
    inset 0 0 12px #000;

    cursor:pointer;

    position:relative;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:0;

    transition:.15s;

}


/* ORANGE POINTER LINE */

.carousel-knob span {

    position:absolute;

    width:4px;

    height:20px;

    background:#ff5a00;

    top:5px;

    border-radius:2px;

    box-shadow:
    0 0 8px #ff5a00;

}


/* POINTER DIRECTIONS */

.left-knob span {

    transform:rotate(0deg);

}


.right-knob span {

    transform:rotate(0deg);

}



/* ROTATION FEEL */

.left-knob:active {

    transform:rotate(-360deg) scale(.92);

}


.right-knob:active {

    transform:rotate(360deg) scale(.92);

}



/* GLOW */

.carousel-knob:hover {

    box-shadow:

    0 0 20px #ff5a00,
    inset 0 0 15px #ff5a00;

}
/* BOTTOM INTERACTIVE CAROUSEL */

.bottom-panel {

    grid-column:1 / 4;

    grid-row:3;

    width:720px;

    justify-self:center;

    padding:15px;

    box-sizing:border-box;

    border:2px solid #ff5a00;

    border-radius:
    30px 30px 50px 50px;

    background:rgba(10,3,0,.75);

    color:#ff5a00;

    box-shadow:

    0 0 20px rgba(255,90,0,.5),

    inset 0 0 15px rgba(255,90,0,.3);

}

/* LOWER FULL WIDTH WINDOW */

.lower-terminal {

    grid-column:1 / 4;

    grid-row:4;

    width:95%;

    justify-self:center;

    min-height:200px;

    padding:20px;

    box-sizing:border-box;

    background:rgba(0,0,0,.85);

    border:2px solid #ff5a00;

    border-radius:35px;

    color:#ff5a00;

    box-shadow:

    0 0 20px rgba(255,90,0,.5),

    inset 0 0 20px rgba(255,90,0,.2);

}


.carousel {

    display:flex;

    align-items:center;

    justify-content:center;

    gap:15px;

    margin-top:10px;

}



.carousel img {

    width:500px;

    height:120px;

    object-fit:contain;

    background:#020202;

    border:2px solid #ff5a00;

    border-radius:20px;

    transition:.2s;

}



.carousel img:hover {

    box-shadow:

    0 0 20px #ff5a00;

}


#carousel-text {

    margin-top:10px;

    text-align:center;

    font-size:12px;

    letter-spacing:3px;

    color:#ff5a00;

}

/* TEXT */

.os-header {

    width:100%;

    display:flex;

    justify-content:space-between;

    font-size:9px;

}



.warning {

    font-size:10px;

    letter-spacing:3px;

}



h1 {

    margin:0;

    text-align:center;

    font-size:38px;

    letter-spacing:5px;


    animation:text-flicker .2s infinite alternate;


    text-shadow:

    0 0 10px #ff5a00,

    0 0 20px #ff5a00;

}



.subtitle {

    color:white;

    font-size:11px;

}



.divider {

    width:90%;

    height:1px;

    background:#ff5a00;

}



.menu-matrix {

    display:flex;

    flex-direction:column;

    gap:5px;

}



.menu-item {

    color:#ff5a00;

    text-decoration:none;

}



.menu-item:hover {

    color:white;

}



.terminal {

    width:90%;

    font-size:11px;

    color:#888;

}


.terminal-link {

    display:block;

    color:#aaa;

    text-decoration:none;

    margin-bottom:6px;

}



.status {

    font-size:11px;

}



.status span {

    color:#00ff66;

}



.button {

    padding:6px 20px;

    border:2px solid #ff5a00;

    color:#ff5a00;

    text-decoration:none;

    font-size:11px;

}



.button:hover {

    background:#ff5a00;

    color:#000;

}

.orange {

    color:#ff5a00;

}



/* TITLE FLICKER */

@keyframes text-flicker {

    0% {

        opacity:.93;

        text-shadow:0 0 6px #ff5a00;

    }


    100% {

        opacity:1;

        text-shadow:0 0 14px #ff5a00;

    }


    }


/* SHARED INNER-PAGE TEMPLATE */

.content-page {
    width:min(900px, calc(100vw - 40px));
    margin:40px auto;
    padding:clamp(24px, 5vw, 56px);
    box-sizing:border-box;
    border:2px solid #ff5a00;
    border-radius:35px;
    background:rgba(0,0,0,.9);
    box-shadow:
        0 0 25px rgba(255,90,0,.5),
        inset 0 0 20px rgba(255,90,0,.12);
}

.content-page-header {
    padding-bottom:24px;
    margin-bottom:28px;
    border-bottom:1px dashed #ff5a00;
}

.content-page-header h1 {
    margin:8px 0 18px;
    text-align:left;
}

.content-page-header p,
.content-page-panel p {
    color:#aaa;
    line-height:1.7;
}

.content-page-kicker {
    margin:0;
    color:#ff5a00 !important;
    font-size:12px;
    letter-spacing:3px;
}

.content-page-panel {
    margin-bottom:30px;
}

.content-page-panel h2 {
    margin-top:0;
    color:#ff5a00;
    letter-spacing:2px;
}

.page-actions {
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:24px;
}

.page-link,
.page-home-link {
    display:inline-block;
    padding:10px 18px;
    border:1px solid #ff5a00;
    color:#ff5a00;
    text-decoration:none;
    font-weight:bold;
}

.page-link:hover,
.page-home-link:hover {
    background:#ff5a00;
    color:#020202;
    box-shadow:0 0 12px rgba(255,90,0,.7);
}

.content-page-error {
    max-width:680px;
    text-align:center;
}

.content-page-error .content-page-header h1 {
    text-align:center;
}

@media (max-width:700px) {
    body {
        padding:15px 0;
    }

    .content-page {
        width:calc(100vw - 24px);
        margin:12px auto;
        border-radius:22px;
    }

    .content-page-header h1 {
        font-size:30px;
        letter-spacing:3px;
    }

    .page-actions {
        flex-direction:column;
    }

    .page-link {
        text-align:center;
    }
}