/* =========================================================
   IMANI.EXE — HEAVEN ON EARTH
   old-web / dream-pop / purple shrine
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: #16091f;
}

body {
    margin: 0;
    min-height: 100vh;

    color: #eadcff;
    background-color: #24103d;

    /* DO NOT CHANGE — YOUR WORKING GIF */
    background-image: url("images/background.gif");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    font-family: "Courier New", monospace;
    font-size: 14px;
    line-height: 1.45;

    overflow-x: hidden;

    text-shadow: 0 0 3px rgba(220, 180, 255, .35);
}


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

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.025) 0px,
            rgba(255,255,255,.025) 1px,
            rgba(0,0,0,.08) 2px,
            rgba(0,0,0,.08) 4px
        );

    box-shadow:
        inset 0 0 80px rgba(0,0,0,.45);

    opacity: .7;
}


/* =========================================================
   EVERYTHING ABOVE BACKGROUND
   ========================================================= */

body > * {
    position: relative;
    z-index: 2;
}


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

a {
    color: #e9caff;
    text-decoration: none;

    transition:
        color .15s,
        text-shadow .15s,
        filter .15s,
        transform .15s;
}

a:hover {
    color: #fff;

    text-shadow:
        0 0 4px #fff,
        0 0 9px #e7a9ff,
        0 0 18px #9b38e8;

    filter: brightness(1.25);
}


/* =========================================================
   TOP MARQUEE
   ========================================================= */

.top-marquee {
    width: 100%;

    padding: 5px 0;

    color: #fff;

    background:
        linear-gradient(
            90deg,
            rgba(35,8,54,.95),
            rgba(104,43,137,.75),
            rgba(35,8,54,.95)
        );

    border-top: 2px solid #dca4ff;
    border-bottom: 2px solid #8d40bd;

    box-shadow:
        0 0 6px #d06aff,
        0 0 18px rgba(166,67,239,.5);

    font-size: 11px;
    letter-spacing: 2px;

    text-shadow:
        0 0 5px #fff,
        0 0 12px #c965ff;
}


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

header {
    width: min(1050px, 94%);
    margin: 12px auto;

    padding: 18px 15px 20px;

    text-align: center;

    background:
        linear-gradient(
            180deg,
            rgba(77,32,101,.94),
            rgba(24,7,38,.96)
        );

    border: 2px solid #c77af3;

    box-shadow:
        0 0 4px #fff,
        0 0 10px #d15cff,
        0 0 28px rgba(148,45,207,.55),
        inset 0 0 25px rgba(222,132,255,.1);

    overflow: hidden;
}

header::before {
    content:
        "✦  ·  ✧  ·  ⋆  ·  ✦  ·  ✧  ·  ⋆  ·  ✦  ·  ✧  ·  ⋆";

    display: block;

    color: #fff;

    font-size: 13px;

    letter-spacing: 5px;

    text-shadow:
        0 0 4px #fff,
        0 0 10px #ce72ff;

    animation: twinkle 2s infinite;
}

header::after {
    content:
        "⋆  ·  ✧  ·  ✦  ·  ⋆  ·  ✧  ·  ✦  ·  ⋆  ·  ✧";

    display: block;

    margin-top: 10px;

    color: #e8c4ff;

    font-size: 12px;

    letter-spacing: 6px;

    text-shadow:
        0 0 5px #fff,
        0 0 12px #b54cff;
}

header h1 {
    margin: 10px 0 0;

    color: white;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(42px, 8vw, 76px);

    font-weight: normal;

    letter-spacing: 8px;

    text-shadow:
        0 0 3px #fff,
        0 0 8px #fff,
        0 0 18px #db86ff,
        0 0 38px #9136c5;
}

.subtitle {
    margin-top: -3px;

    color: #ead2fa;

    font-family: Georgia, serif;
    font-size: 18px;
    font-style: italic;
}

.version {
    margin-top: 7px;

    color: #ae91bd;

    font-size: 9px;
    letter-spacing: 4px;
}

.header-decoration {
    margin: 4px 0;

    color: #f3ddff;

    font-size: 20px;

    text-shadow:
        0 0 5px #fff,
        0 0 12px #d16cff,
        0 0 25px #8d32bd;

    animation: twinkle 2.4s infinite alternate;
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.layout {
    width: min(1050px, 94%);

    margin: auto;

    display: grid;

    grid-template-columns: 250px minmax(0, 1fr);

    gap: 12px;

    align-items: start;
}

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

main {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* =========================================================
   OLD WEB WINDOWS
   ========================================================= */

.window {
    position: relative;

    background:
        linear-gradient(
            145deg,
            rgba(62,26,82,.96),
            rgba(18,5,29,.97)
        );

    border: 2px solid #b96ee7;

    box-shadow:
        0 0 3px #fff,
        0 0 7px #d17aff,
        0 0 16px rgba(148,53,203,.55),
        inset 0 0 18px rgba(190,84,255,.08);

    overflow: hidden;
}


/* double-line old-web border */

.window::before {
    content: "";

    position: absolute;

    inset: 4px;

    border: 1px solid rgba(242,208,255,.42);

    pointer-events: none;

    z-index: 3;
}


/* little corner star */

.window::after {
    content: "✦";

    position: absolute;

    right: 7px;
    bottom: 4px;

    color: white;

    font-size: 12px;

    text-shadow:
        0 0 4px white,
        0 0 10px #c35cff;

    animation: twinkle 1.8s infinite;
}


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

.window-title {
    position: relative;
    z-index: 4;

    padding: 7px 10px;

    color: white;

    background:
        linear-gradient(
            90deg,
            #713a92,
            #4b2364 55%,
            #713a92
        );

    border-bottom: 2px solid #b86ee6;

    font-size: 10px;
    font-weight: bold;
    letter-spacing: 2px;

    text-shadow:
        0 0 4px white,
        0 0 8px #d067ff;
}

.window-title::before {
    content: "✦ ";
    color: #fff;
}

.window-title::after {
    content: " ✧";
    color: #f3dfff;
}


/* =========================================================
   PROFILE
   ========================================================= */

.portrait {
    display: block;

    width: calc(100% - 28px);

    margin: 15px auto 9px;

    padding: 5px;

    background:
        linear-gradient(
            135deg,
            #e5c4ff,
            #71318f,
            #f2d8ff,
            #5d247c
        );

    border: 1px solid white;

    box-shadow:
        0 0 5px #fff,
        0 0 12px #d46cff,
        0 0 25px rgba(170,65,240,.65);

    filter: saturate(.95);
}

.profile-info {
    padding: 3px 15px 16px;
}

.profile-info p {
    margin: 6px 0;
}

.profile-info strong {
    color: #f1d7ff;

    text-shadow:
        0 0 6px #bf5cff;
}

.tiny-text {
    color: #bfa9c8;

    font-size: 10px;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar .window ul {
    margin: 0;
    padding: 13px 26px 15px;
}

.sidebar .window li {
    margin-bottom: 8px;
}

.sidebar-buttons {
    padding: 12px;

    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sidebar-buttons a {
    padding: 7px 10px;

    background:
        linear-gradient(
            90deg,
            rgba(116,51,148,.7),
            rgba(39,15,53,.75)
        );

    border: 1px solid #9e5fc2;

    box-shadow:
        inset 0 0 7px rgba(231,174,255,.08),
        0 0 5px rgba(188,78,255,.2);

    font-size: 10px;
    letter-spacing: 1px;
}

.sidebar-buttons a:hover {
    transform: translateX(5px);

    border-color: white;

    box-shadow:
        0 0 7px #fff,
        0 0 15px #b94fff;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
    text-align: center;
}

.hero-content {
    position: relative;

    padding: 28px 25px 32px;
}

.butterfly-large {
    font-size: 55px;

    filter:
        drop-shadow(0 0 4px #fff)
        drop-shadow(0 0 12px #dc91ff)
        drop-shadow(0 0 25px #9137c4);

    animation: butterfly 4s ease-in-out infinite;
}

.hero h2 {
    max-width: 650px;

    margin: 5px auto 12px;

    color: #f9efff;

    font-family: Georgia, serif;

    font-size: clamp(22px, 4vw, 33px);

    font-weight: normal;

    line-height: 1.3;

    text-shadow:
        0 0 8px rgba(215,139,255,.55);
}

.hero p {
    color: #d1b7df;
}

blockquote {
    max-width: 560px;

    margin: 20px auto 0;

    padding: 10px 18px;

    color: #e8d2f4;

    border-left: 2px solid #c06bea;
    border-right: 2px solid #c06bea;

    font-family: Georgia, serif;
    font-style: italic;

    box-shadow:
        0 0 12px rgba(187,77,255,.15);
}


/* =========================================================
   MUSIC
   ========================================================= */

.music-player {
    padding: 25px;

    text-align: center;
}

.music-player h2 {
    color: #efd9ff;

    font-family: Georgia, serif;
    font-weight: normal;
}

.music-player p {
    margin: 4px;
}

.music-player .small {
    color: #a990b5;
    font-size: 10px;
}

audio {
    width: min(100%, 500px);
    margin-top: 15px;
}


/* =========================================================
   CASSETTE
   ========================================================= */

.cassette {
    position: relative;

    width: 220px;
    height: 132px;

    margin: 0 auto 18px;

    background:
        linear-gradient(
            145deg,
            #98919f,
            #45404b
        );

    border: 2px solid #c2b7ca;

    border-radius: 8px;

    box-shadow:
        0 7px 20px rgba(0,0,0,.6),
        0 0 10px rgba(215,130,255,.2);
}

.cassette-label {
    position: absolute;

    top: 27px;
    left: 22px;
    right: 22px;

    padding: 8px;

    background: #ddcfda;

    color: #3c2d42;

    font-size: 9px;
    font-weight: bold;
    letter-spacing: 1px;
}

.cassette-reel {
    position: absolute;

    top: 78px;

    width: 29px;
    height: 29px;

    border: 5px dotted #252229;

    border-radius: 50%;
}

.cassette-reel.left {
    left: 40px;
}

.cassette-reel.right {
    right: 40px;
}


/* =========================================================
   CONTENT GRIDS
   ========================================================= */

.inspiration-grid,
.rent-free,
.rabbit-holes {
    padding: 14px;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 9px;
}

.inspiration-box,
.person,
.rabbit-holes a {
    padding: 12px;

    background:
        linear-gradient(
            135deg,
            rgba(87,39,112,.55),
            rgba(31,11,43,.65)
        );

    border: 1px solid rgba(207,153,239,.4);

    box-shadow:
        inset 0 0 10px rgba(213,111,255,.05);
}

.inspiration-box:hover,
.person:hover,
.rabbit-holes a:hover {
    border-color: #dca0ff;

    box-shadow:
        0 0 8px rgba(202,94,255,.3);

    background:
        rgba(107,47,139,.6);
}

.inspiration-box {
    text-align: center;
}

.inspiration-box h3,
.person h3 {
    margin-top: 0;

    color: #ebccff;

    font-family: Georgia, serif;

    text-shadow:
        0 0 6px rgba(193,80,255,.5);
}

.inspiration-box p,
.person p {
    color: #c9b2d5;

    font-size: 12px;
}

.rabbit-holes a {
    font-size: 11px;
}


/* =========================================================
   DIARY
   ========================================================= */

.diary {
    padding: 14px;

    display: flex;
    flex-direction: column;
    gap: 9px;
}

.diary-entry {
    padding: 13px;

    background: rgba(48,19,65,.6);

    border-left: 3px solid #a959d2;

    box-shadow:
        inset 0 0 12px rgba(192,80,255,.05);
}

.diary-entry h3 {
    margin: 0 0 5px;

    color: #e4c4f8;

    font-size: 11px;
    letter-spacing: 2px;
}

.diary-entry p {
    color: #ccb7d6;
}

.diary-entry a {
    font-size: 10px;
}


/* =========================================================
   GUESTBOOK
   ========================================================= */

.guestbook {
    padding: 22px;

    text-align: center;
}

.guestbook h2 {
    color: #f0dcff;

    font-family: Georgia, serif;
    font-weight: normal;
}

.guestbook textarea {
    width: 100%;
    min-height: 110px;

    margin: 15px 0 10px;

    padding: 10px;

    color: white;

    background: rgba(14,4,23,.8);

    border: 1px solid #a864c9;

    font-family: "Courier New", monospace;
}

.guestbook textarea:focus {
    outline: none;

    border-color: white;

    box-shadow:
        0 0 8px #c15aff;
}

.guestbook button {
    padding: 8px 13px;

    color: white;

    background:
        linear-gradient(
            #9859bb,
            #4c2168
        );

    border: 1px solid #d8a8f5;

    font-family: "Courier New", monospace;

    font-size: 10px;

    cursor: pointer;

    box-shadow:
        0 0 7px rgba(196,88,255,.3);
}

.guestbook button:hover {
    box-shadow:
        0 0 8px white,
        0 0 18px #bd54ff;
}


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

footer {
    width: min(1050px, 94%);

    margin: 12px auto 25px;

    padding: 18px;

    text-align: center;

    color: #ae98ba;

    background: rgba(25,8,38,.85);

    border: 1px solid #87509f;

    box-shadow:
        0 0 10px rgba(157,58,205,.25);
}

.footer-stars {
    color: #e1b5ff;

    text-shadow:
        0 0 5px white,
        0 0 12px #bd55ff;

    animation: twinkle 2s infinite;
}

footer p {
    margin: 5px;
}

footer .small {
    color: #78627f;
    font-size: 9px;
}


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

@keyframes twinkle {
    0%, 100% {
        opacity: .45;
        filter: brightness(.9);
    }

    50% {
        opacity: 1;
        filter: brightness(1.6);
    }
}

@keyframes butterfly {
    0%, 100% {
        transform:
            translateY(0)
            rotate(-3deg);
    }

    50% {
        transform:
            translateY(-10px)
            rotate(3deg);
    }
}


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

@media (max-width: 760px) {

    .layout {
        grid-template-columns: 1fr;
    }

    .sidebar {
        order: 2;
    }

    main {
        order: 1;
    }

    .inspiration-grid,
    .rent-free,
    .rabbit-holes {
        grid-template-columns: 1fr;
    }

    header h1 {
        letter-spacing: 4px;
    }

    .hero-content {
        padding: 25px 15px;
    }
}