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

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:'VT323', monospace;
color:#d8d8d8;

background:#4d4361;
background-image: url("https://thatsadgirl.neocities.org/images/purpleglitch.gif");
background-size:cover;
background-position:center;
background-attachment:fixed;

overflow-y:scroll;

}

/* =========================================
PAGE
========================================= */

.page{

width:920px;

margin:20px auto;

background:rgba(8,8,8,.88);

border:2px solid #bdbdbd;

box-shadow:
0 0 25px rgba(0,0,0,.7);

padding:22px;

}

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

.topbar{

display:flex;

justify-content:space-between;

align-items:center;

color:#bcbcbc;

font-size:20px;

margin-bottom:20px;

}

/* =========================================
LOGO
========================================= */

.logo-area{

text-align:center;

margin:20px 0 10px;

padding:-10px;

}

.logo{

font-size:50px;

letter-spacing:7px;

color:#B507FA;

text-shadow:
0 0 6px rgba(141,103,212,.7),
0 0 14px rgba(85,51,119,.6);

animation:logoGlow 2s ease-in-out infinite;

}

.tagline{
display:none;

}

/* =========================================
DIVIDER
========================================= */

.divider{

height:1.3px;

background:#bdbdbd;

margin:8px 0;

}

/* =========================================
NAVIGATION
========================================= */

.sidebar-nav{

width:140px;

display:flex;

flex-direction:column;

gap:12px;

flex-shrink:0;

margin-top:5px;

}

.sidebar-nav a{

display:block;

width:100%;

text-decoration:none;

color:white;

border:2px solid #693B82;

background:black;

padding:10px;

font-size:20px;

text-align:center;

transition:.2s;

}

.sidebar-nav a:hover{

background:#8b6bc6;

color:black;

}

/* =========================================
WELCOME
========================================= */

.welcome{

text-align:center;

font-size:20px;

line-height:1.3;

margin:3px 0;

color:#EBEBEB;

margin-bottom:9px;

animation:welcomeGlow 2s ease-in-out infinite;

}

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

.buttons{

display:flex;

justify-content:center;

gap:10px;

margin:25px 0;

}

.buttons img{

width:88px;

height:31px;

image-rendering:pixelated;

}

/* =========================================
UPDATES
========================================= */

.update-box{

background:#090909;

border:2px solid #693B82;

height:180px;

overflow-y:auto;

overflow-x:hidden;

padding:13px;

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

}

.update-box ul{

list-style:none;

}

.update-box li{

margin-bottom:18px;

font-size:14px;

line-height:1.1;

}

.update-box li::before{

content:"▸ ";

color:#b88cff;

}

/* =========================================
   PURPLE SCROLLBAR
========================================= */

.update-box::-webkit-scrollbar{

width:8px;

}

.update-box::-webkit-scrollbar-track{

background:transparent;

}

.update-box::-webkit-scrollbar-thumb{

background:rgba(135,31,194,.6);
border-radius:20px;

}

.update-box::-webkit-scrollbar-thumb:hover{

background:rgba(135,31,194,.9);

}

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

a{

transition:.2s;

}

/* =========================================
SCANLINES
========================================= */

.scanlines{

position:fixed;

inset:0;

pointer-events:none;

background:repeating-linear-gradient(
to bottom,
rgba(255,255,255,.02) 0,
rgba(255,255,255,.02) 1px,
transparent 2px,
transparent 4px
);

z-index:9999;

}

/* =========================================
NOISE
========================================= */

.noise{

position:fixed;

inset:0;

pointer-events:none;

opacity:.04;

background-image:
radial-gradient(circle,#ffffff 1px,transparent 1px);

background-size:5px 5px;

z-index:9998;

}

/* =========================================
LOGO FLICKER
========================================= */

@keyframes logoGlow{

0%{
opacity:1;
text-shadow:
0 0 6px rgba(141,103,212,.7),
0 0 14px rgba(85,51,119,.6);
}

18%{
opacity:.96;
text-shadow:
0 0 9px rgba(141,103,212,.9),
0 0 20px rgba(85,51,119,.8);
}

35%{
opacity:1;
text-shadow:
0 0 7px rgba(141,103,212,.75),
0 0 15px rgba(85,51,119,.65);
}

52%{
opacity:.94;
text-shadow:
0 0 12px rgba(141,103,212,1),
0 0 24px rgba(85,51,119,.9);
}

70%{
opacity:.99;
text-shadow:
0 0 8px rgba(141,103,212,.8),
0 0 18px rgba(85,51,119,.7);
}

100%{
opacity:1;
text-shadow:
0 0 6px rgba(141,103,212,.7),
0 0 14px rgba(85,51,119,.6);
}

}

/* =========================================
WELCOME TEXT GLOW
========================================= */

@keyframes welcomeGlow{

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

20%{
text-shadow:
0 0 7px rgba(255,255,255,.6);
}

45%{
text-shadow:
0 0 4px rgba(255,255,255,.4);
}

70%{
text-shadow:
0 0 8px rgba(255,255,255,.7);
}

100%{
text-shadow:
0 0 3px rgba(255,255,255,.35);

}

}

/* =========================================
SONGS PAGE
========================================= */

body.songs-page{

background:#000;

background-image:none;

color:#ffffff;

font-family:'VT323', monospace;

}

.songs-page h1{

text-align:center;

font-size:56px;

font-weight:normal;

margin-top:30px;

margin-bottom:30px;

color:#ffffff;

}

.song-list{

width:700px;

margin:0 auto;

font-size:38px;

line-height:1.45;

}

.song-list li{

margin-bottom:6px;

text-align:center;

}

.song-list a{

color:#ffffff;

text-decoration:none;

}

.song-list a:hover{

text-decoration:underline;

}

/* =========================================
INDIVIDUAL SONG PAGE
========================================= */

body.song-page{

background:#000;

background-image:none;

color:#ffffff;

font-family:'VT323', monospace;

margin:0;

overflow:hidden;

}

.song-container h1{

font-size:64px;

font-weight:normal;

margin-bottom:80px;

color:#ffffff;

text-shadow:
0 0 6px rgba(120,0,0,.7),
0 0 16px rgba(80,0,0,.6),
0 0 30px rgba(50,0,0,.4);

animation:koolaidGlitch 9s linear infinite;

}

.song-container h1{

font-size:64px;

font-weight:normal;

letter-spacing:2px;

color:#ffffff;

margin-bottom:80px;

}

/* =========================================
TYPEWRITER
========================================= */

#typewriter{

width:90%;

margin:0 auto;

text-align:center;

font-family:'VT323', monospace;

font-size:38px;

color:#ffffff;

white-space:nowrap;

overflow:hidden;

min-height:50px;

}

#typewriter::after{

content:"|";

margin-left:4px;

animation:blinkCursor .8s infinite;

}

@keyframes blinkCursor{

0%,50%{
opacity:1;
}

51%,100%{
opacity:0;
}
}


/* =========================================
KOOL-AID PAGE
========================================= */

body.koolaid-page{

background:#000;

background-image: url("https://thatsadgirl.neocities.org/images/static.gif");

background-size:cover;

background-position:center;

background-repeat:repeat;

background-attachment:fixed;

color:#ffffff;

font-family:'VT323', monospace;

margin:0;

overflow:hidden;

}

.song-container{

width:90%;

margin:0 auto;

padding-top:60px;

text-align:center;

}

.song-container h1{

font-size:64px;

font-weight:normal;

margin-bottom:80px;

}

#typewriter{

width:90%;

margin:0 auto;

text-align:center;

font-family:'VT323', monospace;

font-size:38px;

color:white;

white-space:nowrap;

overflow:hidden;

min-height:50px;

}

#typewriter::after{

content:"|";

margin-left:4px;

animation:blinkCursor .8s infinite;

}

@keyframes blinkCursor{

0%,50%{
opacity:1;
}

51%,100%{
opacity:0;
}

}


.song-container h1{

font-size:64px;

font-weight:normal;

margin-bottom:80px;

color:#ffffff;

text-shadow:
0 0 6px rgba(120,0,0,.7),
0 0 16px rgba(80,0,0,.6),
0 0 30px rgba(50,0,0,.4);

animation:koolaidGlow 3.5s ease-in-out infinite;

}


/* =========================================
KOOL-AID TITLE GLOW
========================================= */

@keyframes koolaidGlow{

0%{

text-shadow:
0 0 6px rgba(120,0,0,.6),
0 0 16px rgba(80,0,0,.5),
0 0 30px rgba(50,0,0,.3);

opacity:1;

}

18%{

text-shadow:
0 0 10px rgba(170,0,0,.9),
0 0 24px rgba(120,0,0,.8),
0 0 45px rgba(70,0,0,.6);

}

35%{

text-shadow:
0 0 7px rgba(120,0,0,.6),
0 0 18px rgba(80,0,0,.5),
0 0 32px rgba(50,0,0,.3);

}

58%{

opacity:.94;

text-shadow:
0 0 12px rgba(190,0,0,1),
0 0 28px rgba(140,0,0,.9),
0 0 55px rgba(90,0,0,.7);

}

82%{

text-shadow:
0 0 8px rgba(140,0,0,.8),
0 0 20px rgba(100,0,0,.7),
0 0 40px rgba(70,0,0,.5);

}

100%{

text-shadow:
0 0 6px rgba(120,0,0,.6),
0 0 16px rgba(80,0,0,.5),
0 0 30px rgba(50,0,0,.3);

opacity:1;

}

}


/* =========================================
KOOL-AID GLITCH GLOW
========================================= */

@keyframes koolaidGlitch{

0%{

opacity:1;

text-shadow:
0 0 6px rgba(120,0,0,.6),
0 0 16px rgba(80,0,0,.5),
0 0 30px rgba(50,0,0,.3);

transform:translateX(0);

}

12%{

text-shadow:
0 0 10px rgba(170,0,0,.9),
0 0 24px rgba(120,0,0,.8),
0 0 45px rgba(70,0,0,.6);

}

26%{

transform:translateX(0);

}

27%{

transform:translateX(-2px);

opacity:.85;

text-shadow:
0 0 20px rgba(255,0,0,.95),
0 0 40px rgba(180,0,0,.8),
0 0 70px rgba(120,0,0,.7);

}

28%{

transform:translateX(2px);

opacity:.95;

}

29%{

transform:translateX(0);

}

52%{

text-shadow:
0 0 7px rgba(120,0,0,.6),
0 0 18px rgba(80,0,0,.5),
0 0 32px rgba(50,0,0,.3);

}

71%{

transform:translateX(-1px);

opacity:.75;

text-shadow:
0 0 18px rgba(255,20,20,.95),
0 0 36px rgba(180,0,0,.85),
0 0 65px rgba(120,0,0,.7);

}

72%{

transform:translateX(1px);

}

73%{

transform:translateX(0);

opacity:1;

}

100%{

text-shadow:
0 0 6px rgba(120,0,0,.6),
0 0 16px rgba(80,0,0,.5),
0 0 30px rgba(50,0,0,.3);

transform:translateX(0);

}

}


/* =========================================
POETRY PAGE
========================================= */

body.poetry-page{

background:#000;

background-image:none;

color:#ffffff;

font-family:'VT323', monospace;

}

.poetry-page h1{

text-align:center;

font-size:56px;

font-weight:normal;

margin-top:30px;

margin-bottom:30px;

color:#ffffff;

}

.poetry-list{

width:700px;

margin:0 auto;

font-size:38px;

line-height:1.45;

}

.poetry-list li{

margin-bottom:6px;

text-align:center;

}

.poetry-list a{

color:#ffffff;

text-decoration:none;

}

.poetry-list a:hover{

text-decoration:underline;

}


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

.main-content{
    display:flex;
    align-items:flex-start;
    gap:25px;
    margin-top:25px;
}

.sidebar-nav{
    width:140px;
    display:flex;
    flex-direction:column;
    gap:2px;
    flex-shrink:0;
}

.nav-image{
    width:120px;
    display:block;
    margin:-70px auto 15px auto;
}

.main-box{
    flex:1;
    background:#090909;
    border:2px solid #693B82;
    padding:25px;
    min-height:600px;
    box-shadow:inset 0 0 10px rgba(255,255,255,.05);
}

.right-column{
    width:205px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
    flex-shrink:0;
}

.main-box{

flex:1;

background:#090909;

border:2px solid #bdbdbd;

padding:25px;

min-height:600px;

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

}

.updates{
    width:100%;
}

.updates h2{
    text-align:center;
    margin:0 0 7px 0;
}

.update-box{
    width:100%;
    height:180px;
}

/* ---------- CURRENT MOOD ---------- */

.mood-box{
    width:100%;
    background:#0a0a0a;
    border:2px solid #693B82;
    padding:12px;
    box-sizing:border-box;
}

.mood-box h2{
    margin:0 0 10px 0;
    text-align:center;
    color:#d9b8ff;
    font-size:22px;
}

.mood-content p{
    margin:0 0 12px 0;
    font-size:18px;
    line-height:1.4;
}

.mood-content strong{
    color:#c98bd4;
}
.mood-content p{
    margin:0 0 12px 0;
    font-size:18px;
    line-height:1.4;
}

.mood-content strong{
    color:#c98bd4;
}

/* NEW - Tiny list icons */

.mini-icon{
    width:25px;
    height:25px;
    vertical-align:middle;
    margin-right:6px;
}

/* =========================================
PIXEL RAIN
========================================= */

#rain{
    position:fixed;
    inset:0;
    pointer-events:none;
    overflow:hidden;
    z-index:2;
}

.raindrop{
    position:absolute;
    width:2px;
    height:14px;
    background:rgba(255,255,255,0.28);
    image-rendering:pixelated;
    animation:rainFall linear forwards;
}

@keyframes rainFall{

    from{
        transform:translateY(-20px);
        opacity:0;
    }

    10%{
        opacity:1;
    }

    to{
        transform:translateY(calc(100vh + 30px));
        opacity:0;
    }

}

.lamp-section{
    text-align:center;
    margin-top:5px;
}

.lamp-image{
    width:120px;      /* adjust to suit */
    display:block;
    margin:0 auto;
    image-rendering:pixelated;
}

.lamp-shelf{
    width:120px;
    height:2px;
    background:#888;
    margin:4px auto 10px;
    box-shadow:0 0 5px rgba(255,255,255,.15);
}

.lamp-buttons{
    display:flex;
    justify-content:center;
    gap:8px;
}

.lamp-buttons button{
    background:#111;
    border:2px solid #bdbdbd;
    color:#bdbdbd;
    font-family:'VT323', monospace;
    font-size:12px;
    padding:-4px 10px;
    cursor:pointer;
}

.lamp-buttons button:hover{
    background:#693B82;
    color:blac/* =========================================
RESET
========================================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:'VT323', monospace;
color:#d8d8d8;

background:#4d4361;
background-image: url("https://thatsadgirl.neocities.org/images/purpleglitch.gif");
background-size:cover;
background-position:center;
background-attachment:fixed;

overflow-y:scroll;

}

/* =========================================
PAGE
========================================= */

.page{

width:920px;

margin:20px auto;

background:rgba(8,8,8,.88);

border:2px solid #bdbdbd;

box-shadow:
0 0 25px rgba(0,0,0,.7);

padding:12px;

}

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

.topbar{

display:flex;

justify-content:space-between;

align-items:center;

color:#bcbcbc;

font-size:20px;

margin-bottom:20px;

}

/* =========================================
LOGO
========================================= */

.logo-area{

text-align:center;

margin:20px 0 10px;

padding:-10px;

}

.logo{

font-size:50px;

letter-spacing:7px;

color:#B507FA;

text-shadow:
0 0 6px rgba(141,103,212,.7),
0 0 14px rgba(85,51,119,.6);

animation:logoGlow 2s ease-in-out infinite;

}

.tagline{
display:none;

}

/* =========================================
DIVIDER
========================================= */

.divider{

height:1.3px;

background:#bdbdbd;

margin:8px 0;

}

/* =========================================
NAVIGATION
========================================= */

.sidebar-nav{

width:140px;

display:flex;

flex-direction:column;

gap:12px;

flex-shrink:0;

margin-top:5px;

}

.sidebar-nav a{

display:block;

width:100%;

text-decoration:none;

color:white;

border:2px solid #693B82;

background:black;

padding:10px;

font-size:20px;

text-align:center;

transition:.2s;

}

.sidebar-nav a:hover{

background:#8b6bc6;

color:black;

}

/* =========================================
WELCOME
========================================= */

.welcome{

text-align:center;

font-size:20px;

line-height:1.3;

margin:3px 0;

color:#EBEBEB;

margin-bottom:9px;

animation:welcomeGlow 2s ease-in-out infinite;

}

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

.buttons{

display:flex;

justify-content:center;

gap:10px;

margin:25px 0;

}

.buttons img{

width:88px;

height:31px;

image-rendering:pixelated;

}

/* =========================================
UPDATES
========================================= */

.update-box{

background:#090909;

border:2px solid #693B82;

height:180px;

overflow-y:auto;

overflow-x:hidden;

padding:13px;

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

}

.update-box ul{

list-style:none;

}

.update-box li{

margin-bottom:18px;

font-size:14px;

line-height:1.1;

}

.update-box li::before{

content:"▸ ";

color:#b88cff;

}

/* =========================================
   PURPLE SCROLLBAR
========================================= */

.update-box::-webkit-scrollbar{

width:8px;

}

.update-box::-webkit-scrollbar-track{

background:transparent;

}

.update-box::-webkit-scrollbar-thumb{

background:rgba(135,31,194,.6);
border-radius:20px;

}

.update-box::-webkit-scrollbar-thumb:hover{

background:rgba(135,31,194,.9);

}

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

a{

transition:.2s;

}

/* =========================================
SCANLINES
========================================= */

.scanlines{

position:fixed;

inset:0;

pointer-events:none;

background:repeating-linear-gradient(
to bottom,
rgba(255,255,255,.02) 0,
rgba(255,255,255,.02) 1px,
transparent 2px,
transparent 4px
);

z-index:9999;

}

/* =========================================
NOISE
========================================= */

.noise{

position:fixed;

inset:0;

pointer-events:none;

opacity:.04;

background-image:
radial-gradient(circle,#ffffff 1px,transparent 1px);

background-size:5px 5px;

z-index:9998;

}

/* =========================================
LOGO FLICKER
========================================= */

@keyframes logoGlow{

0%{
opacity:1;
text-shadow:
0 0 6px rgba(141,103,212,.7),
0 0 14px rgba(85,51,119,.6);
}

18%{
opacity:.96;
text-shadow:
0 0 9px rgba(141,103,212,.9),
0 0 20px rgba(85,51,119,.8);
}

35%{
opacity:1;
text-shadow:
0 0 7px rgba(141,103,212,.75),
0 0 15px rgba(85,51,119,.65);
}

52%{
opacity:.94;
text-shadow:
0 0 12px rgba(141,103,212,1),
0 0 24px rgba(85,51,119,.9);
}

70%{
opacity:.99;
text-shadow:
0 0 8px rgba(141,103,212,.8),
0 0 18px rgba(85,51,119,.7);
}

100%{
opacity:1;
text-shadow:
0 0 6px rgba(141,103,212,.7),
0 0 14px rgba(85,51,119,.6);
}

}

/* =========================================
WELCOME TEXT GLOW
========================================= */

@keyframes welcomeGlow{

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

20%{
text-shadow:
0 0 7px rgba(255,255,255,.6);
}

45%{
text-shadow:
0 0 4px rgba(255,255,255,.4);
}

70%{
text-shadow:
0 0 8px rgba(255,255,255,.7);
}

100%{
text-shadow:
0 0 3px rgba(255,255,255,.35);

}

}

/* =========================================
SONGS PAGE
========================================= */

body.songs-page{

background:#000;

background-image:none;

color:#ffffff;

font-family:'VT323', monospace;

}

.songs-page h1{

text-align:center;

font-size:56px;

font-weight:normal;

margin-top:30px;

margin-bottom:30px;

color:#ffffff;

}

.song-list{

width:700px;

margin:0 auto;

font-size:38px;

line-height:1.45;

}

.song-list li{

margin-bottom:6px;

text-align:center;

}

.song-list a{

color:#ffffff;

text-decoration:none;

}

.song-list a:hover{

text-decoration:underline;

}

/* =========================================
INDIVIDUAL SONG PAGE
========================================= */

body.song-page{

background:#000;

background-image:none;

color:#ffffff;

font-family:'VT323', monospace;

margin:0;

overflow:hidden;

}

.song-container h1{

font-size:64px;

font-weight:normal;

margin-bottom:80px;

color:#ffffff;

text-shadow:
0 0 6px rgba(120,0,0,.7),
0 0 16px rgba(80,0,0,.6),
0 0 30px rgba(50,0,0,.4);

animation:koolaidGlitch 9s linear infinite;

}

.song-container h1{

font-size:64px;

font-weight:normal;

letter-spacing:2px;

color:#ffffff;

margin-bottom:80px;

}

/* =========================================
TYPEWRITER
========================================= */

#typewriter{

width:90%;

margin:0 auto;

text-align:center;

font-family:'VT323', monospace;

font-size:38px;

color:#ffffff;

white-space:nowrap;

overflow:hidden;

min-height:50px;

}

#typewriter::after{

content:"|";

margin-left:4px;

animation:blinkCursor .8s infinite;

}

@keyframes blinkCursor{

0%,50%{
opacity:1;
}

51%,100%{
opacity:0;
}
}


/* =========================================
KOOL-AID PAGE
========================================= */

body.koolaid-page{

background:#000;

background-image: url("https://thatsadgirl.neocities.org/images/static.gif");

background-size:cover;

background-position:center;

background-repeat:repeat;

background-attachment:fixed;

color:#ffffff;

font-family:'VT323', monospace;

margin:0;

overflow:hidden;

}

.song-container{

width:90%;

margin:0 auto;

padding-top:60px;

text-align:center;

}

.song-container h1{

font-size:64px;

font-weight:normal;

margin-bottom:80px;

}

#typewriter{

width:90%;

margin:0 auto;

text-align:center;

font-family:'VT323', monospace;

font-size:38px;

color:white;

white-space:nowrap;

overflow:hidden;

min-height:50px;

}

#typewriter::after{

content:"|";

margin-left:4px;

animation:blinkCursor .8s infinite;

}

@keyframes blinkCursor{

0%,50%{
opacity:1;
}

51%,100%{
opacity:0;
}

}


.song-container h1{

font-size:64px;

font-weight:normal;

margin-bottom:80px;

color:#ffffff;

text-shadow:
0 0 6px rgba(120,0,0,.7),
0 0 16px rgba(80,0,0,.6),
0 0 30px rgba(50,0,0,.4);

animation:koolaidGlow 3.5s ease-in-out infinite;

}


/* =========================================
KOOL-AID TITLE GLOW
========================================= */

@keyframes koolaidGlow{

0%{

text-shadow:
0 0 6px rgba(120,0,0,.6),
0 0 16px rgba(80,0,0,.5),
0 0 30px rgba(50,0,0,.3);

opacity:1;

}

18%{

text-shadow:
0 0 10px rgba(170,0,0,.9),
0 0 24px rgba(120,0,0,.8),
0 0 45px rgba(70,0,0,.6);

}

35%{

text-shadow:
0 0 7px rgba(120,0,0,.6),
0 0 18px rgba(80,0,0,.5),
0 0 32px rgba(50,0,0,.3);

}

58%{

opacity:.94;

text-shadow:
0 0 12px rgba(190,0,0,1),
0 0 28px rgba(140,0,0,.9),
0 0 55px rgba(90,0,0,.7);

}

82%{

text-shadow:
0 0 8px rgba(140,0,0,.8),
0 0 20px rgba(100,0,0,.7),
0 0 40px rgba(70,0,0,.5);

}

100%{

text-shadow:
0 0 6px rgba(120,0,0,.6),
0 0 16px rgba(80,0,0,.5),
0 0 30px rgba(50,0,0,.3);

opacity:1;

}

}


/* =========================================
KOOL-AID GLITCH GLOW
========================================= */

@keyframes koolaidGlitch{

0%{

opacity:1;

text-shadow:
0 0 6px rgba(120,0,0,.6),
0 0 16px rgba(80,0,0,.5),
0 0 30px rgba(50,0,0,.3);

transform:translateX(0);

}

12%{

text-shadow:
0 0 10px rgba(170,0,0,.9),
0 0 24px rgba(120,0,0,.8),
0 0 45px rgba(70,0,0,.6);

}

26%{

transform:translateX(0);

}

27%{

transform:translateX(-2px);

opacity:.85;

text-shadow:
0 0 20px rgba(255,0,0,.95),
0 0 40px rgba(180,0,0,.8),
0 0 70px rgba(120,0,0,.7);

}

28%{

transform:translateX(2px);

opacity:.95;

}

29%{

transform:translateX(0);

}

52%{

text-shadow:
0 0 7px rgba(120,0,0,.6),
0 0 18px rgba(80,0,0,.5),
0 0 32px rgba(50,0,0,.3);

}

71%{

transform:translateX(-1px);

opacity:.75;

text-shadow:
0 0 18px rgba(255,20,20,.95),
0 0 36px rgba(180,0,0,.85),
0 0 65px rgba(120,0,0,.7);

}

72%{

transform:translateX(1px);

}

73%{

transform:translateX(0);

opacity:1;

}

100%{

text-shadow:
0 0 6px rgba(120,0,0,.6),
0 0 16px rgba(80,0,0,.5),
0 0 30px rgba(50,0,0,.3);

transform:translateX(0);

}

}


/* =========================================
POETRY PAGE
========================================= */

body.poetry-page{

background:#000;

background-image:none;

color:#ffffff;

font-family:'VT323', monospace;

}

.poetry-page h1{

text-align:center;

font-size:56px;

font-weight:normal;

margin-top:30px;

margin-bottom:30px;

color:#ffffff;

}

.poetry-list{

width:700px;

margin:0 auto;

font-size:38px;

line-height:1.45;

}

.poetry-list li{

margin-bottom:6px;

text-align:center;

}

.poetry-list a{

color:#ffffff;

text-decoration:none;

}

.poetry-list a:hover{

text-decoration:underline;

}


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

.main-content{
    display:flex;
    align-items:flex-start;
    gap:25px;
    margin-top:25px;
}

.sidebar-nav{
    width:140px;
    display:flex;
    flex-direction:column;
    gap:2px;
    flex-shrink:0;
}

.nav-image{
    width:120px;
    display:block;
    margin:-70px auto 15px auto;
}

.main-box{
    flex:1;
    background:#090909;
    border:2px solid #693B82;
    padding:25px;
    min-height:600px;
    box-shadow:inset 0 0 10px rgba(255,255,255,.05);
}

.right-column{
    width:205px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
    flex-shrink:0;
}

.main-box{

flex:1;

background:#090909;

border:2px solid #bdbdbd;

padding:25px;

min-height:600px;

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

}

.updates{
    width:100%;
}

.updates h2{
    text-align:center;
    margin:0 0 7px 0;
}

.update-box{
    width:100%;
    height:180px;
}

/* ---------- CURRENT MOOD ---------- */

.mood-box{
    width:100%;
    background:#0a0a0a;
    border:2px solid #693B82;
    padding:12px;
    box-sizing:border-box;
}

.mood-box h2{
    margin:0 0 10px 0;
    text-align:center;
    color:#d9b8ff;
    font-size:22px;
}

.mood-content p{
    margin:0 0 12px 0;
    font-size:18px;
    line-height:1.4;
}

.mood-content strong{
    color:#c98bd4;
}
.mood-content p{
    margin:0 0 12px 0;
    font-size:18px;
    line-height:1.4;
}

.mood-content strong{
    color:#c98bd4;
}

/* NEW - Tiny list icons */

.mini-icon{
    width:25px;
    height:25px;
    vertical-align:middle;
    margin-right:6px;
}

/* =========================================
PIXEL RAIN
========================================= */

#rain{
    position:fixed;
    inset:0;
    pointer-events:none;
    overflow:hidden;
    z-index:2;
}

.raindrop{
    position:absolute;
    width:2px;
    height:14px;
    background:rgba(255,255,255,0.28);
    image-rendering:pixelated;
    animation:rainFall linear forwards;
}

@keyframes rainFall{

    from{
        transform:translateY(-20px);
        opacity:0;
    }

    10%{
        opacity:1;
    }

    to{
        transform:translateY(calc(100vh + 30px));
        opacity:0;
    }

}

.lamp-section{
    text-align:center;
    margin-top:5px;
}

.lamp-image{
    width:120px;      /* adjust to suit */
    display:block;
    margin:0 auto;
    image-rendering:pixelated;
}

.lamp-shelf{
    width:120px;
    height:2px;
    background:#888;
    margin:4px auto 10px;
    box-shadow:0 0 5px rgba(255,255,255,.15);
}

.lamp-buttons{
    display:flex;
    justify-content:center;
    gap:8px;
}

.lamp-buttons button{
    background:#111;
    border:2px solid #bdbdbd;
    color:#bdbdbd;
    font-family:'VT323', monospace;
    font-size:12px;
    padding:-4px 10px;
    cursor:pointer;
}

.lamp-buttons button:hover{
    background:#693B82;
    color:black;
}

.sidebar-nav a.active{
    background:#693B82;
    color:#fff;
    box-shadow:0 0 10px rgba(150,100,255,.5);
}


}

.sidebar-nav a.active{
    background:#693B82;
    color:#fff;
    box-shadow:0 0 10px rgba(150,100,255,.5);
}