/* =====================================================
   MEMORY.DAT
   PS1-INSPIRED BLOG STYLESHEET
===================================================== */


/* =====================================================
   COLORS AND SETTINGS
===================================================== */

:root {

    --bg: #151522;

    --panel: #2c2c46;

    --panel-dark: #1d1d2e;

    --accent: #b98dff;

    --highlight: #7dd3fc;

    --text: #e8e8f2;

    --border-light: #8c8cb8;

    --border-dark: #141420;

    --shadow: rgba(0, 0, 0, 0.45);


    /*
       FUTURE ANIME BACKGROUND

       Leave this as "none" for now.

       Later, place an image inside your images folder
       and change this line to:

       --page-background: url("images/background.jpg");
    */

    --page-background: none;

}


/* =====================================================
   RESET
===================================================== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


/* =====================================================
   HTML AND BODY
===================================================== */

html,
body {

    width: 100%;

    min-height: 100%;

    height: auto;

}

body {

    color: var(--text);

    font-family: "IBM Plex Mono", monospace;


    /*
       The first layer darkens the background image.

       The second layer is your future anime image.

       The final layer is the current purple background.
    */

    background-image:

        linear-gradient(
            rgba(15, 15, 30, 0.50),
            rgba(15, 15, 30, 0.72)
        ),

        var(--page-background),

        radial-gradient(
            circle at top,
            #34345a,
            #171726 70%
        );

    background-size:
        cover,
        cover,
        cover;

    background-position:
        center,
        center,
        center;

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat;

    background-attachment:
        fixed,
        fixed,
        fixed;


    /* Allow the page to scroll */

    overflow-x: hidden;

    overflow-y: auto;

}


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

#desktop {

    display: none;

    flex-direction: column;

    width: 100%;

    min-height: 100vh;

    height: auto;

    padding:

        18px

        18px

        60px;

}


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

#boot-screen {

    position: fixed;

    inset: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    background: #060608;

    z-index: 999;

}

.boot-window {

    width: min(460px, 90%);

    padding: 28px;

    text-align: center;

    background: #1c1c2d;

    border-top:
        2px solid var(--border-light);

    border-left:
        2px solid var(--border-light);

    border-right:
        2px solid var(--border-dark);

    border-bottom:
        2px solid var(--border-dark);

    box-shadow:

        0 0 30px rgba(0, 0, 0, 0.55),

        6px 6px 0 rgba(0, 0, 0, 0.35);

}

.boot-window h1 {

    font-size: 20px;

    margin-bottom: 20px;

    letter-spacing: 2px;

}

.boot-window p {

    margin-bottom: 16px;

}

.boot-warning {

    font-size: 12px;

    opacity: 0.65;

}


/* =====================================================
   LOADING BAR
===================================================== */

.loading-bar {

    width: 100%;

    height: 20px;

    margin-bottom: 16px;

    background: #111111;

    border-top:
        2px solid var(--border-dark);

    border-left:
        2px solid var(--border-dark);

    border-right:
        2px solid var(--border-light);

    border-bottom:
        2px solid var(--border-light);

    overflow: hidden;

}

.loading-fill {

    width: 0%;

    height: 100%;

    background:

        linear-gradient(
            to right,
            var(--accent),
            var(--highlight)
        );

    transition:
        width 0.08s linear;

}


/* =====================================================
   TITLE SCREEN
===================================================== */

#title-screen {

    display: none;

    position: fixed;

    inset: 0;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    text-align: center;

    background:

        radial-gradient(
            circle,
            #2d2d49,
            #151522
        );

    z-index: 998;

}

.title-logo h1 {

    font-size: 56px;

    letter-spacing: 6px;

    margin-bottom: 12px;

    text-shadow:

        3px 3px 0 rgba(0, 0, 0, 0.50),

        0 0 14px rgba(185, 141, 255, 0.25);

}

.title-logo p {

    font-size: 18px;

    opacity: 0.80;

}

.press-start {

    margin-top: 60px;

    padding: 12px 18px;

    font-size: 20px;

    cursor: pointer;

    user-select: none;

    animation:

        blink 1s steps(2) infinite;

}

.press-start:hover {

    color: var(--highlight);

}

.press-start:focus-visible {

    outline:
        2px solid var(--highlight);

    outline-offset: 6px;

}


/* =====================================================
   BLINK ANIMATION
===================================================== */

@keyframes blink {

    50% {

        opacity: 0.20;

    }

}


/* =====================================================
   TOP BAR
===================================================== */

#top-bar {

    height: 48px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-shrink: 0;

    padding:
        0 18px;

    /*
       This creates the open background space
       above the main blog columns.
    */

    margin-bottom: 70px;

    background:

        linear-gradient(
            to bottom,
            #40405e,
            #24243a
        );

    border-top:
        2px solid var(--border-light);

    border-left:
        2px solid var(--border-light);

    border-right:
        2px solid var(--border-dark);

    border-bottom:
        2px solid var(--border-dark);

    box-shadow:

        0 4px 12px var(--shadow);

    letter-spacing: 2px;

    user-select: none;

}


/* =====================================================
   WORKSPACE
===================================================== */

#workspace {

    display: grid;

    grid-template-columns:

        260px

        minmax(0, 1fr)

        250px;

    gap: 18px;

    width: 100%;

    height: auto;

    min-height: 0;

    align-items: start;

}


/* =====================================================
   SIDEBARS
===================================================== */

#sidebar,
#right-panel {

    display: flex;

    flex-direction: column;

    gap: 18px;

    align-self: start;

}


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

.window {

    background:

        linear-gradient(
            to bottom,
            rgba(60, 60, 90, 0.92),
            rgba(34, 34, 52, 0.94)
        );

    border-top:
        2px solid var(--border-light);

    border-left:
        2px solid var(--border-light);

    border-right:
        2px solid var(--border-dark);

    border-bottom:
        2px solid var(--border-dark);

    box-shadow:

        5px 5px 0 rgba(0, 0, 0, 0.30),

        0 0 16px rgba(185, 141, 255, 0.08);

    overflow: hidden;

    transition:

        transform 0.15s ease,

        box-shadow 0.15s ease,

        border-color 0.15s ease;

}


/* Window hover effect */

.window:hover {

    transform:
        translateY(-2px);

    box-shadow:

        8px 8px 0 rgba(0, 0, 0, 0.35),

        0 0 18px rgba(125, 211, 252, 0.18);

}


/* =====================================================
   WINDOW HEADER
===================================================== */

.window-header {

    padding:
        8px 12px;

    font-size: 14px;

    letter-spacing: 2px;

    color: white;

    text-transform: uppercase;

    background:

        linear-gradient(
            to bottom,
            #61618f,
            #40405f
        );

    border-bottom:
        2px solid var(--border-dark);

}


/* =====================================================
   WINDOW BODY
===================================================== */

.window-body {

    padding: 14px;

    line-height: 1.8;

    font-size: 14px;

}

.window-body ul {

    padding-left: 22px;

}


/* =====================================================
   MAIN WINDOW
===================================================== */

#main-window {

    display: flex;

    flex-direction: column;

    width: 100%;

    min-width: 0;

    min-height: 650px;

}

#main-window .window-body {

    flex: initial;

    overflow: visible;

}


/* =====================================================
   AVATAR
===================================================== */

#avatar {

    width: 140px;

    max-width: 100%;

    display: block;

    margin:

        0 auto 14px;

    border:
        2px solid var(--border-light);

    image-rendering: pixelated;

}


/* =====================================================
   METERS
===================================================== */

.meter {

    margin-bottom: 14px;

    color: var(--highlight);

    letter-spacing: 2px;

    overflow-wrap: anywhere;

}


/* =====================================================
   MENU
===================================================== */

#menu {

    list-style: none;

    padding-left: 0;

}

#menu li {

    padding:
        8px 12px;

    margin-bottom: 4px;

    cursor: pointer;

    user-select: none;

    transition:

        background 0.12s ease,

        transform 0.12s ease,

        color 0.12s ease;

}


/* Selected option */

#menu .active {

    color: white;

    background:

        rgba(185, 141, 255, 0.18);

}


/* Menu hover */

#menu li:hover {

    color: white;

    background:

        rgba(125, 211, 252, 0.15);

    transform:
        translateX(8px);

}


/* =====================================================
   HORIZONTAL LINES
===================================================== */

hr {

    border: none;

    border-top:

        1px solid rgba(255, 255, 255, 0.12);

    margin:
        18px 0;

}


/* =====================================================
   HEADINGS AND PARAGRAPHS
===================================================== */

h2 {

    margin-bottom: 12px;

    font-size: 22px;

    color: white;

}

p {

    margin-bottom: 12px;

}


/* =====================================================
   MEMORY CARD BLOCKS
===================================================== */

.memory-block {

    padding: 10px;

    margin-bottom: 10px;

    cursor: pointer;

    background:

        rgba(255, 255, 255, 0.04);

    border:

        2px solid rgba(255, 255, 255, 0.08);

    transition:

        transform 0.15s ease,

        border-color 0.15s ease,

        background 0.15s ease;

}

.memory-block:hover {

    transform:
        translateX(6px);

    border-color:
        var(--highlight);

    background:

        rgba(125, 211, 252, 0.10);

}


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

/*
   The footer is still inside your HTML,
   but this removes it completely.
*/

#footer {

    display: none !important;

}


/* =====================================================
   CUSTOM SCROLLBAR
===================================================== */

::-webkit-scrollbar {

    width: 14px;

}

::-webkit-scrollbar-track {

    background:
        #1b1b2a;

    border-left:
        2px solid var(--border-dark);

}

::-webkit-scrollbar-thumb {

    background:

        linear-gradient(
            to bottom,
            #6a6a90,
            #50506f
        );

    border:
        2px solid var(--border-light);

}

::-webkit-scrollbar-thumb:hover {

    background:

        linear-gradient(
            to bottom,
            var(--accent),
            var(--highlight)
        );

}


/* Firefox scrollbar */

* {

    scrollbar-width: thin;

    scrollbar-color:

        var(--accent)

        #1b1b2a;

}


/* =====================================================
   BUTTONS
===================================================== */

button {

    padding:
        8px 16px;

    color: white;

    font-family: inherit;

    cursor: pointer;

    background:

        linear-gradient(
            to bottom,
            #575781,
            #343455
        );

    border-top:
        2px solid var(--border-light);

    border-left:
        2px solid var(--border-light);

    border-right:
        2px solid var(--border-dark);

    border-bottom:
        2px solid var(--border-dark);

    transition:
        0.15s;

}

button:hover {

    background:

        linear-gradient(
            to bottom,
            var(--accent),
            #7b5cb8
        );

}

button:active {

    transform:
        translateY(2px);

}


/* =====================================================
   LINKS
===================================================== */

a {

    color: var(--highlight);

    text-decoration: none;

}

a:hover {

    color: white;

}


/* =====================================================
   FADE ANIMATIONS
===================================================== */

.fade-in {

    animation:
        fadeIn 0.35s ease;

}

.fade-out {

    animation:
        fadeOut 0.35s ease;

}

@keyframes fadeIn {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}

@keyframes fadeOut {

    from {

        opacity: 1;

    }

    to {

        opacity: 0;

    }

}


/* =====================================================
   CRT MODE
===================================================== */

.crt {

    position: relative;

}

.crt::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background-image:

        repeating-linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.02),
            rgba(255, 255, 255, 0.02) 1px,
            transparent 2px,
            transparent 4px
        );

    opacity: 0.30;

}


/* =====================================================
   GLOW EFFECT
===================================================== */

.glow {

    box-shadow:

        0 0 10px rgba(125, 211, 252, 0.20),

        0 0 20px rgba(185, 141, 255, 0.15);

}


/* =====================================================
   HIDDEN ELEMENTS
===================================================== */

.hidden {

    display: none !important;

}


/* =====================================================
   TEXT SELECTION
===================================================== */

::selection {

    color: white;

    background:
        var(--accent);

}


/* =====================================================
   TABLET LAYOUT
===================================================== */

@media (max-width: 1200px) {

    #workspace {

        grid-template-columns:

            220px

            minmax(0, 1fr);

    }

    #right-panel {

        display: none;

    }

}


/* =====================================================
   PHONE LAYOUT
===================================================== */

@media (max-width: 800px) {

    body {

        overflow-x: hidden;

        overflow-y: auto;

    }

    #desktop {

        width: 100%;

        min-height: 100vh;

        height: auto;

        padding:

            12px

            12px

            40px;

    }

    #top-bar {

        height: auto;

        min-height: 48px;

        padding:

            10px 12px;

        margin-bottom: 36px;

        gap: 10px;

        flex-wrap: wrap;

    }

    #workspace {

        display: flex;

        flex-direction: column;

        width: 100%;

        height: auto;

    }

    #main-window {

        order: 1;

        width: 100%;

        min-height: 500px;

    }

    #sidebar {

        order: 2;

        width: 100%;

    }

    #right-panel {

        display: none;

    }

    .title-logo h1 {

        font-size: 38px;

        letter-spacing: 3px;

    }

    .title-logo p {

        font-size: 14px;

    }

    .press-start {

        margin-top: 45px;

        font-size: 16px;

    }

}


/* =====================================================
   VERY SMALL PHONES
===================================================== */

@media (max-width: 420px) {

    #desktop {

        padding:

            8px

            8px

            32px;

    }

    #top-bar {

        margin-bottom: 28px;

        font-size: 12px;

    }

    .window-body {

        padding: 12px;

        font-size: 13px;

    }

    h2 {

        font-size: 19px;

    }

    #avatar {

        width: 120px;

    }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

    * {

        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

}


/* =====================================================
   END OF STYLESHEET
===================================================== */