/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
    overflow:hidden;
    background:#000;
    font-family:Verdana,sans-serif;
}

/* CRT Canvas */

#crtCanvas{

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    z-index:0;

}

/* Desktop */

#desktop{
    position:relative;
    width:100vw;
    height:calc(100vh - 20px);
    z-index:10;
}

/* Wallpaper */

body{
    background:#000;
}
#wallpaper{
    position: fixed;
    inset: 0;

    background-image: url("images/Naamloos_01.png");
    background-repeat: no-repeat;

    background-size: cover;
    background-position: center center;

    z-index: 0;
}
@keyframes tvJump{

    0%,96%,100%{

        transform:none;

    }

    97%{

        transform:translateY(-12px);

    }

    98%{

        transform:translateY(8px);

    }

    99%{

        transform:translateY(-5px);

    }

}
/* Desktop icon */

/* ===========================
   Desktop Shortcut
=========================== */

.desktop-shortcut{

    position:absolute;

    top:8px;

    left:8px;

    width:170px;

    display:flex;

    flex-direction:column;

    align-items:center;

    cursor:pointer;

    user-select:none;

}

/* Icon */

.desktop-icon{

    width:50px;

    transition:.25s;

}

.desktop-shortcut:hover .desktop-icon{

    transform:scale(1.05);

}

/* Text */

.desktop-text{

    margin-top:8px;

    color:#ff9ed7;

   font-size:0.8em;

    font-family:Verdana,sans-serif;

    text-align:center;

    text-shadow:
        0 0 6px hotpink,
        0 0 12px deeppink,
        0 0 22px hotpink;

}

/* Window */

.window{

    position:fixed;

    top:100px;

    left:180px;

    width:650px;

    height:450px;

    background:#ffe6f5;

    border:4px solid hotpink;

    border-radius:8px;

    box-shadow:8px 8px #ff8dc7;

    display:block;

    overflow:hidden;
    z-index:1000;
}

.window.show{

    display:block;

}

.title-bar{

    background:linear-gradient(#ff8ed5,#ff5cb6);

    color:white;

    padding:8px 12px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-weight:bold;

    cursor:move;

    border-bottom:2px solid #ffb3dd;

}

/* Taskbar */

.taskbar{

    position:fixed;
    bottom:-45px; /* Hide most of the taskbar */

    left:0;

    width:100%;

    height:56px;

    background:#ffb8df;

    border-top:4px solid hotpink;

    display:flex;

    align-items:center;

    gap:12px;

    padding:0 12px;

    transition:bottom 0.3s ease;

      z-index: 9999;
}
.taskbar img{

    width:34px;

    height:34px;

    image-rendering:pixelated;

    cursor:pointer;

    transition:.15s;

}

.taskbar img:hover{

    transform:translateY(-2px) scale(1.08);

}
.clock{

    margin-left:auto;

    color:white;

    background:#ff74c3;

    padding:6px 12px;

    border:2px solid white;

    border-radius:6px;

    font-weight:bold;

}

/* CRT Overlay */

.crt{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:100;

}
#cdButton{

    width:32px;

    height:32px;

    cursor:pointer;

    transition:.2s;

}

#cdButton:hover{

    transform:scale(1.1);

}

#player{

    position:fixed;

    top:120px;

    left:180px;

    width:340px;

    background:#ffe6f5;

    border:4px solid hotpink;

    box-shadow:8px 8px #ff8dc7;

    image-rendering:pixelated;

      z-index:1001;

}
#titlebar{

background:#ff5cb6;

color:white;

padding:8px;

display:flex;

justify-content:space-between;

cursor:move;

font-weight:bold;

}

#content{

padding:15px;

text-align:center;

}

#cover{

width:120px;

image-rendering:pixelated;

}

button{

background:#ff9ed2;

border:2px solid #ff4aa2;

padding:8px;

margin:5px;

cursor:pointer;

}

button:hover{

background:white;

}

#progressContainer{

width:100%;

height:12px;

background:white;

margin:15px 0;

}

#progress{

height:100%;

width:0%;

background:hotpink;

}

.song{

padding:5px;

cursor:pointer;

}

.song:hover{

background:pink;

}
.hidden{
    display:none;
}
button{

    background:#ff9ed2;

    border:2px solid #ff4aa2;

    color:white;

    padding:5px 10px;

    cursor:pointer;

    font-weight:bold;

}

button:hover{

    background:#ffb8df;

}

.taskbar:hover{

    bottom:0;

}

.gallery{
    column-count:3;
    column-gap:12px;

    padding:12px;
}

.gallery-image{
    width:100%;
    height:auto;

    display:block;

    margin-bottom:12px;

    break-inside:avoid;

    border-radius:6px;

    object-fit:cover;

    cursor:pointer;

    transition:transform 0.2s ease;
}

.gallery-image:hover{
    transform:scale(1.02);
}
.viewer-content{

    position: relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    padding:20px;

}
#prevPhoto{
    position:absolute;
    left:15px;
    top:50%;
    transform:translateY(-50%);
    z-index:9999;
}

#nextPhoto{
    position:absolute;
    right:15px;
    top:50%;
    transform:translateY(-50%);
    z-index:9999;
}

#bigImage{

    max-width:90%;

    max-height:350px;

    border:4px solid hotpink;

    image-rendering:auto;

}

.viewer-buttons{

    margin-top:20px;

}

.viewer-buttons button{

    margin:0 10px;

}
#tvDistortion{
    position:absolute;
    inset:0;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(0,0,0,.9) 0px,
            rgba(0,0,0,.9) 2px,
            transparent 3px,
            transparent 7px
        ),
        repeating-radial-gradient(
            circle,
            white 0px,
            white 1px,
            black 2px,
            black 3px
        );

    background-size:
        100% 12px,
        4px 4px;

    filter:contrast(5) brightness(1.5);
}

#tvDistortion.active{

    opacity:.6;

    animation:
        staticShake .18s steps(2) infinite,
        colorFlash 7s infinite;
animation:
staticShake .18s steps(2) infinite,
colorFlash 7s infinite,
rgbJump 5s infinite;
}

#tvDistortion::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(255,255,255,.45) 48%,
            transparent 52%
        );
    opacity:0;
    animation:bigGlitch 7s infinite;
}

#tvDistortion::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0px,
            transparent 28px,
            rgba(255,0,140,.18) 29px,
            rgba(0,255,255,.18) 30px,
            transparent 32px
        );
    opacity:0;
    animation:rgbGlitch 5s infinite;
}

@keyframes staticShake{
    0%{
        background-position:0 0, 0 0;
    }

    25%{
        background-position:0 4px, 20px -10px;
    }

    50%{
        background-position:0 -6px, -15px 15px;
    }

    75%{
        background-position:0 10px, 10px 20px;
    }

    100%{
        background-position:0 0, 0 0;
    }
}

@keyframes bigGlitch{
    0%, 88%, 100%{
        opacity:0;
        transform:translateY(-100%);
    }

    89%{
        opacity:.8;
        transform:translateY(-40%);
    }

    90%{
        opacity:.5;
        transform:translateY(20%);
    }

    91%{
        opacity:.9;
        transform:translateY(80%);
    }

    92%{
        opacity:0;
        transform:translateY(120%);
    }
}

@keyframes rgbGlitch{
    0%, 70%, 100%{
        opacity:0;
        transform:translateX(0);
    }

    71%{
        opacity:.55;
        transform:translateX(-8px);
    }

    72%{
        opacity:.35;
        transform:translateX(10px);
    }

    73%{
        opacity:.6;
        transform:translateX(-5px);
    }

    74%{
        opacity:0;
        transform:translateX(0);
    }
}

@keyframes colorFlash{

    0%,92%,100%{
        filter:none;
    }

    93%{
        filter:hue-rotate(60deg) saturate(2);
    }

    94%{
        filter:hue-rotate(-90deg) saturate(3);
    }

    95%{
        filter:hue-rotate(120deg) saturate(2);
    }

    96%{
        filter:none;
    }

}

#tvDistortion .glitchBar{

    position:absolute;

    left:0;

    width:100%;

    height:45px;

    background:white;

    opacity:0;

    mix-blend-mode:screen;

    animation:glitchBar 9s infinite;

}
@keyframes glitchBar{

    0%,90%,100%{

        opacity:0;

        top:-60px;

    }

    91%{

        opacity:.7;

        top:15%;

    }

    92%{

        opacity:.4;

        top:35%;

    }

    93%{

        opacity:.8;

        top:65%;

    }

    94%{

        opacity:0;

        top:100%;

    }

}
@keyframes rgbJump{

    0%,94%,100%{

        transform:none;

    }

    95%{

        transform:translateX(-8px);

    }

    96%{

        transform:translateX(10px);

    }

    97%{

        transform:translateX(-5px);

    }

}

/* Always-on light Fears to Fathom VHS filter */
#crtCanvas{
    display:none;
}

.crt{
    position:fixed !important;
    inset:0 !important;
    pointer-events:none !important;
    z-index:99999 !important;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,.12) 0px,
            rgba(255,255,255,.12) 1px,
            transparent 2px,
            transparent 4px
        ),
        radial-gradient(
            ellipse at center,
            transparent 45%,
            rgba(0,0,0,.55) 100%
        );

    opacity:.75;
    mix-blend-mode:screen;

    animation:crtMove .12s infinite steps(2);
}

@keyframes crtMove{
    0%{
        transform:translate(0,0);
        filter:hue-rotate(0deg) contrast(1.2);
    }

    50%{
        transform:translate(1px,-1px);
        filter:hue-rotate(8deg) contrast(1.5);
    }

    100%{
        transform:translate(-1px,1px);
        filter:hue-rotate(-8deg) contrast(1.2);
    }
}


/* =========================================
   80s PIXEL NEON PINK THEME
   Plak dit helemaal onderaan je CSS
========================================= */

:root {
    --neon-pink: #ff00aa;
    --bright-pink: #ff55cc;
    --light-pink: #ffb3e6;
    --dark-pink: #7a004f;
    --deep-purple: #19001f;
    --window-dark: #240027;
    --almost-black: #09000d;
}

/* Pixelachtige tekst */
body,
button,
.window,
.taskbar,
#player {
    font-family: "Courier New", monospace;
}

/* Desktop-tekst onder je icoon */
.desktop-text {
    color: #ff9ed7;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1px;
    text-align: center;

    text-shadow:
        0 0 6px #ff66cc,
        0 0 12px #ff33bb,
        0 0 22px #ff00aa,
        0 0 40px #ff00aa;
}

/* Vensters */
.window {
    background: var(--window-dark);

    border: 3px solid var(--neon-pink);
    border-radius: 0;

    box-shadow:
        4px 4px 0 var(--dark-pink),
        8px 8px 0 #31003e,
        0 0 12px var(--neon-pink),
        0 0 28px rgba(255, 0, 170, 0.55);

    color: white;
}

/* Bovenkant van vensters */
.title-bar {
    background:
        repeating-linear-gradient(
            90deg,
            #ff00aa 0px,
            #ff00aa 8px,
            #d00089 8px,
            #d00089 16px
        );

    color: white;
    padding: 7px 10px;

    border-bottom: 3px solid var(--light-pink);

    text-transform: uppercase;
    letter-spacing: 1px;

    text-shadow:
        2px 2px 0 var(--dark-pink),
        0 0 7px white;
}

/* Muziekspeler */
#player {
    background: var(--window-dark);

    border: 3px solid var(--neon-pink);
    border-radius: 0;

    box-shadow:
        4px 4px 0 var(--dark-pink),
        8px 8px 0 #31003e,
        0 0 14px var(--neon-pink),
        0 0 30px rgba(255, 0, 170, 0.5);

    color: white;
}

/* Muziekspeler titlebar */
#titlebar {
    background:
        repeating-linear-gradient(
            90deg,
            #ff00aa 0px,
            #ff00aa 8px,
            #c90083 8px,
            #c90083 16px
        );

    color: white;
    border-bottom: 3px solid var(--light-pink);

    text-transform: uppercase;
    letter-spacing: 1px;

    text-shadow:
        2px 2px 0 var(--dark-pink),
        0 0 7px white;
}

/* Taskbar */
.taskbar {
    background:
        repeating-linear-gradient(
            90deg,
            #19001f 0px,
            #19001f 10px,
            #26002e 10px,
            #26002e 20px
        );

    border-top: 3px solid var(--bright-pink);
    border-bottom: 2px solid var(--dark-pink);

    box-shadow:
        0 -4px 0 var(--dark-pink),
        0 -7px 14px rgba(255, 0, 170, 0.75),
        inset 0 2px 0 var(--light-pink);

    border-radius: 0;
}

/* Taskbar-iconen */
.taskbar img {
    border: 2px solid transparent;
    padding: 2px;
    image-rendering: pixelated;
}

.taskbar img:hover {
    background: var(--dark-pink);
    border-color: var(--bright-pink);

    box-shadow:
        0 0 7px var(--neon-pink),
        0 0 15px var(--neon-pink);

    transform: translateY(-3px);
}

/* Klok */
.clock {
    color: white;
    background: var(--almost-black);

    border:
        2px solid var(--bright-pink);
    border-radius: 0;

    padding: 6px 12px;

    box-shadow:
        inset 2px 2px 0 var(--dark-pink),
        inset -2px -2px 0 var(--light-pink),
        0 0 8px var(--neon-pink);

    text-shadow:
        0 0 5px white,
        0 0 9px var(--neon-pink);

    font-family: "Courier New", monospace;
    letter-spacing: 1px;
}

/* Alle knoppen */
button {
    background: var(--almost-black);
    color: white;

    border: 2px solid var(--bright-pink);
    border-radius: 0;

    padding: 6px 11px;
    margin: 5px;

    font-family: "Courier New", monospace;
    font-weight: bold;
    text-transform: uppercase;

    box-shadow:
        3px 3px 0 var(--dark-pink),
        0 0 7px rgba(255, 0, 170, 0.8);

    text-shadow:
        0 0 5px var(--neon-pink);

    cursor: pointer;
}

button:hover {
    background: var(--neon-pink);
    color: #09000d;

    border-color: white;

    box-shadow:
        3px 3px 0 white,
        0 0 10px var(--neon-pink),
        0 0 22px var(--neon-pink);

    text-shadow: none;
}

button:active {
    transform: translate(3px, 3px);
    box-shadow:
        0 0 8px var(--neon-pink);
}

/* Muziekvoortgang */
#progressContainer {
    height: 14px;
    background: var(--almost-black);

    border: 2px solid var(--bright-pink);

    box-shadow:
        inset 2px 2px 0 #000,
        0 0 7px var(--neon-pink);
}

#progress {
    background:
        repeating-linear-gradient(
            90deg,
            #ff00aa 0px,
            #ff00aa 6px,
            #ff66d4 6px,
            #ff66d4 10px
        );

    box-shadow:
        0 0 8px var(--neon-pink);
}

/* Liedjeslijst */
.song {
    color: white;
    border-bottom: 1px dashed var(--dark-pink);
}

.song:hover {
    background: var(--dark-pink);
    color: white;

    text-shadow:
        0 0 6px var(--neon-pink);
}

/* Galerijafbeeldingen */
.gallery-image {
    border: 3px solid var(--neon-pink);
    border-radius: 0;

    box-shadow:
        3px 3px 0 var(--dark-pink),
        0 0 8px rgba(255, 0, 170, 0.7);
}

.gallery-image:hover {
    transform: translate(-2px, -2px) scale(1.03);

    box-shadow:
        6px 6px 0 var(--dark-pink),
        0 0 13px var(--neon-pink),
        0 0 25px var(--neon-pink);
}

/* Grote afbeelding in viewer */
#bigImage {
    border: 3px solid var(--neon-pink);

    box-shadow:
        4px 4px 0 var(--dark-pink),
        0 0 14px var(--neon-pink);
}

/* Albumcover */
#cover {
    border: 3px solid var(--neon-pink);

    box-shadow:
        4px 4px 0 var(--dark-pink),
        0 0 12px var(--neon-pink);

    image-rendering: pixelated;
}

/* Pixelachtige scrollbar */
.gallery::-webkit-scrollbar {
    width: 14px;
}

.gallery::-webkit-scrollbar-track {
    background: var(--almost-black);
    border-left: 2px solid var(--dark-pink);
}

.gallery::-webkit-scrollbar-thumb {
    background: var(--neon-pink);
    border: 2px solid var(--light-pink);

    box-shadow:
        inset 2px 2px 0 var(--dark-pink);
}

/* Scherpe hoeken voor de retrostijl */
.window,
.title-bar,
.taskbar,
.clock,
#player,
#titlebar,
button,
#progressContainer,
.gallery-image,
#bigImage,
#cover {
    border-radius: 0 !important;
}


/* =========================
   OLD INTERNET PROFILE
========================= */

#profileWindow {
    width: 620px;
    max-width: 88vw;
    height: 560px;
    max-height: 78vh;
}

.profile-content{

    height:calc(100% - 32px);   /* subtracts the title bar */

    overflow-y:auto;
    overflow-x:hidden;

    box-sizing:border-box;

    padding:14px;

    scrollbar-width:thin;
    
       padding:14px;
    padding-bottom:40px;
}

.profile-header {
    padding: 10px;
    margin-bottom: 16px;

    text-align: center;
    font-weight: bold;
    letter-spacing: 2px;

    color: white;
    background: linear-gradient(
        90deg,
        #ff1493,
        #ff77cc,
        #b93dff,
        #ff1493
    );

    border: 3px ridge #ffffff;

    text-shadow:
        2px 2px #7a0053,
        0 0 8px white;

    animation: profileGlow 2s infinite alternate;
}

.friendbook-top {
    display: flex;
    align-items: flex-start;
    gap: 22px;

    padding: 16px;
    margin-bottom: 16px;

    background: rgba(255, 255, 255, 0.7);

    border: 3px double #ff3eaa;
    box-shadow:
        5px 5px 0 #cc1685,
        inset 0 0 12px rgba(255, 20, 147, 0.25);
}

.profile-photo-frame {
    position: relative;
    flex-shrink: 0;

    width: 190px;
    padding: 12px 12px 8px;

    background: white;

    border: 2px solid #ff69b4;
    box-shadow:
        5px 6px 0 rgba(142, 0, 91, 0.35);

    transform: rotate(-2deg);
}

.profile-photo {
    display: block;
    width: 100%;
    height: 220px;

    object-fit: cover;

    border: 2px solid #ffb2df;
    filter: contrast(1.05) saturate(1.1);
}

.profile-photo-frame p {
    margin: 9px 0 2px;
    text-align: center;

    color: #ff1493;
    font-family: cursive;
    font-weight: bold;
}

.photo-tape {
    position: absolute;
    top: -9px;

    width: 52px;
    height: 18px;

    background: rgba(255, 118, 204, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.8);

    z-index: 2;
}

.tape-left {
    left: -13px;
    transform: rotate(-17deg);
}

.tape-right {
    right: -13px;
    transform: rotate(17deg);
}

.profile-details {
    flex: 1;
    min-width: 0;
}

.profile-line {
    display: flex;
    gap: 8px;

    padding: 7px 4px;

    border-bottom: 2px dotted #ff69b4;
}

.profile-line .question {
    width: 105px;
    flex-shrink: 0;

    color: #b90073;
    font-weight: bold;
}

.profile-line .answer {
    color: #47113b;
}

.profile-line .online {
    color: #00a758;

    text-shadow:
        0 0 5px #5cff9c;
}

.profile-section {
    padding: 13px;
    margin-bottom: 15px;

    background: rgba(255, 255, 255, 0.75);

    border: 2px dashed #ff1493;
    box-shadow: 4px 4px 0 rgba(255, 20, 147, 0.25);
}

.profile-section h3,
.profile-card h3 {
    margin: -5px 0 10px;

    color: #d1007f;
    text-align: center;

    text-shadow:
        1px 1px white,
        0 0 5px #ff8bd2;
}

.profile-section p,
.profile-card p {
    line-height: 1.5;
}

.profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;

    margin-bottom: 15px;
}

.profile-card {
    min-height: 150px;
    padding: 13px;

    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.9),
        rgba(255, 199, 233, 0.9)
    );

    border: 3px ridge #ff5fbc;
    box-shadow: 4px 4px 0 rgba(130, 0, 84, 0.25);
}

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

.now-playing {
    padding: 8px;

    color: white;
    background: #26001d;

    border: 2px inset #ff84cf;

    animation: nowPlayingBlink 1.3s infinite;
}

.loulou-section {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.9),
        rgba(255, 199, 233, 0.9)
    );
}

.profile-footer {
    display: flex;
    justify-content: space-between;
    gap: 10px;

    padding: 10px;

    color: white;
    background: #3a002d;

    border: 3px outset #ff69b4;

    font-size: 12px;
    text-align: center;
}

.visitor-counter {
    padding: 2px 6px;

    color: #ff65c2;
    background: black;

    border: 2px inset #ff69b4;

    font-family: monospace;
    letter-spacing: 2px;
}

#profileDrag {
    cursor: grab;
}

#profileDrag:active {
    cursor: grabbing;
}

@keyframes profileGlow {
    from {
        filter: brightness(1);
    }

    to {
        filter: brightness(1.2);
    }
}

@keyframes nowPlayingBlink {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.65;
    }
}

@media (max-width: 650px) {
    .friendbook-top {
        flex-direction: column;
        align-items: center;
    }

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

    .profile-footer {
        flex-direction: column;
    }
}

.profile-content::-webkit-scrollbar{
    width:10px;
}

.profile-content::-webkit-scrollbar-track{
    background:#ffd8ef;
}

.profile-content::-webkit-scrollbar-thumb{
    background:#ff4fa9;
    border:2px solid #ffd8ef;
}

.profile-content::-webkit-scrollbar-thumb:hover{
    background:#ff1d8c;
}
#albumCover{
    width:120px;
    height:120px;

    object-fit:cover;

    border:3px solid #ff4fd8;
    border-radius:8px;

    box-shadow:
        0 0 8px #ff4fd8,
        0 0 16px #ff4fd8,
        inset 0 0 8px rgba(255,80,220,.6);

    background:black;

    image-rendering:auto;
}

.gallery-content{
    height:calc(100% - 32px);
    overflow-y:auto;
    overflow-x:hidden;
}

.gallery-content::-webkit-scrollbar{
    width:8px;
}

.gallery-content::-webkit-scrollbar-track{
    background:#111;
}

.gallery-content::-webkit-scrollbar-thumb{
    background:#ff4fd8;
    border-radius:10px;
}

.gallery-content::-webkit-scrollbar-thumb:hover{
    background:#ff7bdd;
}

.art-shortcut{
    left:5px;
    top:120px;
}
.art-shortcut .desktop-icon{

    filter:
        drop-shadow(0 0 6px #ff66cc)
        drop-shadow(0 0 14px #ff00aa);

    transition:.25s;

}

.art-shortcut:hover .desktop-icon{

    transform:scale(1.08);

    filter:
        drop-shadow(0 0 10px #ff66cc)
        drop-shadow(0 0 20px #ff00aa);

}

/* =========================
   TARAH'S STUDIO
========================= */

.art-window{
    width:620px;
    height:520px;

    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);

    background:#ffd8f1;
    border:3px solid #ff4fba;
    box-shadow:
        0 0 0 2px #7d145b,
        8px 8px 0 rgba(75, 0, 52, 0.45),
        0 0 24px rgba(255, 0, 170, 0.55);

    overflow:hidden;
    z-index:500;
}

/* Important: dragging must not keep the window centred */
.art-window.dragging{
    transform:none;
}

.art-window-content{
    height:calc(100% - 32px);
    padding:18px;
    overflow-y:auto;
    overflow-x:hidden;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.12) 0,
            rgba(255,255,255,0.12) 1px,
            transparent 1px,
            transparent 4px
        ),
        linear-gradient(
            135deg,
            #ffd8f1,
            #ffb4df
        );
}

/* Welcome note */

.studio-note{
    width:75%;
    margin:0 auto 30px;
    padding:15px;

    background:#fff8bd;
    color:#5a2446;

    border:2px solid #e49dcb;
    box-shadow:
        4px 5px 0 rgba(104, 24, 78, 0.25),
        0 0 10px rgba(255,255,255,0.7);

    font-family:"Courier New", monospace;
    text-align:center;

    transform:rotate(-1deg);
}

.studio-note p{
    margin:4px 0 12px;
}

.studio-note span{
    display:block;
    text-align:right;
    font-weight:bold;
    color:#d11687;
}

/* Folder area */

.studio-folders{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:24px 20px;
    padding:8px 8px 25px;
}

/* Hanging folder */

.studio-folder{
    position:relative;

    min-height:125px;
    padding:0;

    border:none;
    background:none;

    font-family:"Courier New", monospace;
    color:#5b1643;

    cursor:pointer;
    transition:
        transform 0.18s ease,
        filter 0.18s ease;
}

.folder-tab{
    position:absolute;
    top:-16px;
    left:12px;

    width:115px;
    min-height:28px;

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

    padding:3px 10px;

    background:#ff82c8;
    border:2px solid #98236d;
    border-bottom:none;
    border-radius:8px 8px 0 0;

    font-weight:bold;
    font-size:14px;
    text-transform:uppercase;

    z-index:2;
}

.folder-body{
    min-height:105px;

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

    padding:18px 15px 12px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.55),
            transparent 35%
        ),
        #ff9ed4;

    border:2px solid #98236d;
    border-radius:6px;

    box-shadow:
        inset 0 -8px 0 rgba(154, 27, 103, 0.13),
        4px 5px 0 rgba(89, 13, 63, 0.28);

    font-size:13px;
    line-height:1.35;
    text-align:center;
}

/* Folder hover movement */

.studio-folder:hover{
    transform:translateY(-6px) rotate(-1deg);

    filter:
        drop-shadow(0 0 5px #ffffff)
        drop-shadow(0 0 10px #ff20aa);
}

.studio-folder:hover .folder-body{
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.75),
            transparent 35%
        ),
        #ffb9e1;
}

.studio-folder:active{
    transform:translateY(-1px);
}

/* Studio scrollbar */

.art-window-content::-webkit-scrollbar{
    width:14px;
}

.art-window-content::-webkit-scrollbar-track{
    background:#ffb4dc;
    border-left:2px solid #a02070;
}

.art-window-content::-webkit-scrollbar-thumb{
    background:#ff5fb8;
    border:2px solid #8f1a64;
}

.art-window-content::-webkit-scrollbar-thumb:hover{
    background:#ff82ca;
}

/* Smaller screens */

@media (max-width:700px){
    .art-window{
        width:90vw;
        height:70vh;
    }

    .studio-folders{
        grid-template-columns:1fr;
    }

    .studio-note{
        width:auto;
    }
}
/* =========================
   ANIMATED DESKTOP ICON TEXT
========================= */

.desktop-text{
    color:#ffd9f3;
    font-size:13px;
    font-weight:bold;
    letter-spacing:1px;
    text-align:center;

    text-shadow:
        0 0 4px #ffffff,
        0 0 8px #ff8fda,
        0 0 15px #ff38b8,
        0 0 28px #ff00aa;

    animation:
        desktopTextGlow 2.6s ease-in-out infinite,
        desktopTextShimmer 7s linear infinite;
}

/* Soft breathing neon glow */
@keyframes desktopTextGlow{
    0%,
    100%{
        text-shadow:
            0 0 4px #ffffff,
            0 0 8px #ff8fda,
            0 0 15px #ff38b8,
            0 0 28px #ff00aa;

        filter:brightness(1);
    }

    50%{
        text-shadow:
            0 0 5px #ffffff,
            0 0 12px #ff9ee0,
            0 0 22px #ff38b8,
            0 0 40px #ff00aa;

        filter:brightness(1.2);
    }
}

/* Tiny CRT shimmer every few seconds */
@keyframes desktopTextShimmer{
    0%,
    88%,
    100%{
        transform:translateX(0);
        opacity:1;
    }

    89%{
        transform:translateX(-1px);
        opacity:.8;
    }

    90%{
        transform:translateX(1px);
        opacity:1;
    }

    91%{
        transform:translateX(0);
        opacity:.9;
    }
}

/* =========================
   FASHION PROJECT EXPLORER
========================= */

.fashion-window{
    width:620px;
    height:470px;

    top:90px;
    left:220px;

    z-index:1100;
}

.fashion-content{
    height:calc(100% - 36px);

    padding:20px;

    overflow-y:auto;
    overflow-x:hidden;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.04) 0,
            rgba(255,255,255,0.04) 1px,
            transparent 1px,
            transparent 5px
        ),
        #240027;

    color:white;
}

.fashion-intro{
    margin:0 0 20px;

    color:#ffd9f3;
    text-align:center;

    text-shadow:
        0 0 5px #ff66cc,
        0 0 12px #ff00aa;
}

.fashion-projects{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px;
}

.project-folder{
    min-height:110px;

    display:flex;
    align-items:center;
    gap:14px;

    padding:15px;

    background:#160019;
    border:2px solid #ff55cc;

    box-shadow:
        4px 4px 0 #75004d,
        0 0 10px rgba(255,0,170,0.45);

    color:white;
    text-align:left;

    cursor:pointer;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.project-folder:hover{
    background:#2b0028;

    transform:translate(-2px,-2px);

    box-shadow:
        6px 6px 0 #75004d,
        0 0 15px #ff00aa,
        0 0 28px rgba(255,0,170,0.65);
}

.project-folder-icon{
    font-size:42px;

    filter:
        drop-shadow(0 0 5px #ff66cc)
        drop-shadow(0 0 12px #ff00aa);
}

.project-folder-info{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.project-folder-info strong{
    color:#ffd9f3;

    font-size:14px;
    text-transform:uppercase;

    text-shadow:
        0 0 5px #ff66cc,
        0 0 11px #ff00aa;
}

.project-folder-info small{
    color:#ff9ed7;
    font-size:11px;
}


/* Scrollbar */

.fashion-content::-webkit-scrollbar{
    width:12px;
}

.fashion-content::-webkit-scrollbar-track{
    background:#09000d;
}

.fashion-content::-webkit-scrollbar-thumb{
    background:#ff00aa;
    border:2px solid #ff8fda;
}


@media (max-width:700px){

    .fashion-window{
        width:90vw;
        height:70vh;

        left:5vw;
        top:12vh;
    }

    .fashion-projects{
        grid-template-columns:1fr;
    }

}

/* =========================
   INDIVIDUAL PROJECT WINDOW
========================= */

.project-window{
    width:720px;
    height:560px;

    top:65px;
    left:270px;

    z-index:1200;
}

.project-window-content{
    height:calc(100% - 36px);

    padding:20px;

    overflow-y:auto;
    overflow-x:hidden;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.04) 0,
            rgba(255,255,255,0.04) 1px,
            transparent 1px,
            transparent 5px
        ),
        #240027;

    color:white;
}

.project-header{
    margin-bottom:24px;
    padding:18px;

    background:#140018;
    border:2px solid #ff55cc;

    box-shadow:
        4px 4px 0 #7a004f,
        0 0 12px rgba(255,0,170,0.55);
}

.project-header h2{
    margin:0 0 12px;

    color:#ff9ed7;
    text-align:center;
    text-transform:uppercase;

    text-shadow:
        0 0 7px #ff38b8,
        0 0 16px #ff00aa;
}

.project-description{
    line-height:1.6;
    text-align:center;
}

.project-information{
    margin-top:16px;
    padding-top:12px;

    border-top:1px dashed #ff55cc;

    color:#ffd9f3;
    font-size:13px;
}

.project-information p{
    margin:5px 0;
}

.project-gallery{
    column-count:2;
    column-gap:15px;
}

.project-photo{
    width:100%;
    height:auto;

    display:block;

    margin-bottom:15px;

    break-inside:avoid;

    border:3px solid #ff55cc;

    box-shadow:
        4px 4px 0 #7a004f,
        0 0 10px rgba(255,0,170,0.6);

    cursor:pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.project-photo:hover{
    transform:translate(-2px,-2px) scale(1.02);

    box-shadow:
        6px 6px 0 #7a004f,
        0 0 15px #ff00aa,
        0 0 28px rgba(255,0,170,0.65);
}

.project-window-content::-webkit-scrollbar{
    width:12px;
}

.project-window-content::-webkit-scrollbar-track{
    background:#09000d;
}

.project-window-content::-webkit-scrollbar-thumb{
    background:#ff00aa;
    border:2px solid #ff8fda;
}

@media (max-width:750px){

    .project-window{
        width:90vw;
        height:75vh;

        left:5vw;
        top:10vh;
    }

    .project-gallery{
        column-count:1;
    }

}

/* =========================
   FASHION PROJECT PICTURES
========================= */

.fashion-projects{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:16px;
}

.fashion-project{
    width:100%;
    padding:8px;

    display:flex;
    flex-direction:column;
    gap:8px;

    background:#140018;
    border:2px solid #ff55cc;

    box-shadow:
        4px 4px 0 #75004d,
        0 0 10px rgba(255,0,170,0.45);

    cursor:pointer;

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.fashion-project:hover{
    transform:translate(-2px,-2px);

    box-shadow:
        6px 6px 0 #75004d,
        0 0 15px #ff00aa,
        0 0 28px rgba(255,0,170,0.65);
}

.fashion-project-image{
    width:100%;
    height:210px;

    display:block;
    object-fit:cover;

    border:2px solid #ff9ed7;
}

.fashion-project-name{
    color:#ffd9f3;

    font-size:13px;
    font-weight:bold;
    text-align:center;
    text-transform:uppercase;

    text-shadow:
        0 0 5px #ff66cc,
        0 0 11px #ff00aa;
}

@media (max-width:750px){

    .fashion-projects{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

}

@media (max-width:500px){

    .fashion-projects{
        grid-template-columns:1fr;
    }

}

/* =========================
   STUDIO PROJECT WINDOWS
========================= */

.studio-project-window{
    width:650px;
    height:500px;

    top:85px;
    left:240px;

    z-index:1150;
}

.studio-project-content{
    height:calc(100% - 36px);

    padding:20px;

    overflow-y:auto;
    overflow-x:hidden;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.04) 0,
            rgba(255,255,255,0.04) 1px,
            transparent 1px,
            transparent 5px
        ),
        #240027;

    color:white;
}

.studio-project-intro{
    margin:0 0 20px;

    color:#ffd9f3;
    text-align:center;

    text-shadow:
        0 0 5px #ff66cc,
        0 0 12px #ff00aa;
}

.studio-project-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:16px;
}

.studio-project-card{
    width:100%;
    padding:8px;

    display:flex;
    flex-direction:column;
    gap:8px;

    background:#140018;
    border:2px solid #ff55cc;

    box-shadow:
        4px 4px 0 #75004d,
        0 0 10px rgba(255,0,170,0.45);

    color:white;
    cursor:pointer;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.studio-project-card:hover{
    background:#260022;

    transform:translate(-2px,-2px);

    box-shadow:
        6px 6px 0 #75004d,
        0 0 15px #ff00aa,
        0 0 28px rgba(255,0,170,0.65);
}

.studio-project-image{
    width:100%;
    height:210px;

    display:block;
    object-fit:cover;

    border:2px solid #ff9ed7;
}

.studio-project-name{
    color:#ffd9f3;

    font-size:13px;
    font-weight:bold;
    text-align:center;
    text-transform:uppercase;

    text-shadow:
        0 0 5px #ff66cc,
        0 0 11px #ff00aa;
}

.studio-project-content::-webkit-scrollbar{
    width:12px;
}

.studio-project-content::-webkit-scrollbar-track{
    background:#09000d;
}

.studio-project-content::-webkit-scrollbar-thumb{
    background:#ff00aa;
    border:2px solid #ff8fda;
}

@media (max-width:750px){

    .studio-project-window{
        width:90vw;
        height:75vh;

        left:5vw;
        top:10vh;
    }

    .studio-project-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

}

@media (max-width:500px){

    .studio-project-grid{
        grid-template-columns:1fr;
    }

}

/* =========================
   PROJECT VIDEO
========================= */

.project-video {
    display: block;
    width: 100%;
    max-height: 520px;
    object-fit: contain;

    background: black;

    border: 2px solid #ff4fc3;

    box-shadow:
        0 0 8px rgba(255, 0, 174, 0.8),
        0 0 18px rgba(255, 0, 174, 0.45);

    box-sizing: border-box;
}

/* =========================
   LOULOU OS LOGIN SCREEN
========================= */

#loginScreen {
    position: fixed;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    z-index: 9999999;

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

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(255, 80, 195, 0.3),
            rgba(38, 0, 32, 0.96) 55%,
            #080006 100%
        );

    font-family: Arial, sans-serif;

    opacity: 1;
    visibility: visible;

    transition:
        opacity 0.8s ease,
        visibility 0.8s ease;
}

/* Hidden after logging in */

#loginScreen.login-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* Moving background glow */

#loginScreen::before {
    content: "";

    position: absolute;

    top: -40%;
    left: -40%;

    width: 180%;
    height: 180%;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 60px,
            rgba(255, 0, 174, 0.04) 61px,
            transparent 62px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 60px,
            rgba(255, 0, 174, 0.04) 61px,
            transparent 62px
        );

    animation: loginBackgroundMove 14s linear infinite;

    pointer-events: none;
}

@keyframes loginBackgroundMove {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(60px, 60px);
    }
}


/* Subtle VHS noise */

.login-noise {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    pointer-events: none;

    opacity: 0.16;

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

    animation: loginNoiseMove 0.18s steps(2) infinite;
}

@keyframes loginNoiseMove {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(2px);
    }

    100% {
        transform: translateY(-2px);
    }
}


/* Main login window */

.login-window {
    position: relative;

    width: min(410px, 88vw);

    border: 3px solid #ff72cf;

    background: rgba(24, 0, 20, 0.96);

    box-shadow:
        0 0 10px #ff00ae,
        0 0 30px rgba(255, 0, 174, 0.8),
        0 0 80px rgba(255, 0, 174, 0.35),
        inset 0 0 18px rgba(255, 0, 174, 0.2);

    animation: loginWindowAppear 0.8s ease;
}

@keyframes loginWindowAppear {
    from {
        opacity: 0;
        transform: scale(0.88) translateY(25px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}


/* Pink title bar */

.login-title-bar {
    padding: 9px 12px;

    color: white;

    font-weight: bold;
    letter-spacing: 1px;

    background:
        linear-gradient(
            90deg,
            #8a0060,
            #ff1caf,
            #8a0060
        );

    border-bottom: 2px solid #ff8bdb;

    text-shadow:
        0 0 5px white,
        0 0 9px #ff00ae;
}


/* Login content */

.login-content {
    display: flex;
    flex-direction: column;

    padding: 28px 34px 30px;

    color: #ffd8f3;
}

.login-content h1 {
    margin: 15px 0 5px;

    color: #ff78d2;

    text-align: center;

    font-size: 25px;

    text-shadow:
        0 0 5px #ff00ae,
        0 0 15px #ff00ae;
}

.login-message {
    margin: 0 0 24px;

    text-align: center;

    color: #eeb3db;
}


/* User icon */

.login-icon-frame {
    width: 102px;
    height: 102px;

    margin: 0 auto;

    padding: 6px;

    border: 2px solid #ff74cf;

    background: rgba(255, 0, 174, 0.1);

    box-shadow:
        0 0 10px #ff00ae,
        inset 0 0 12px rgba(255, 0, 174, 0.45);
}

.login-user-icon {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    image-rendering: pixelated;
}


/* Labels */

.login-content label {
    margin-bottom: 5px;

    color: #ff91d9;

    font-size: 13px;
    font-weight: bold;

    text-shadow: 0 0 5px rgba(255, 0, 174, 0.8);
}


/* Inputs */

.login-content input {
    width: 100%;

    margin-bottom: 17px;
    padding: 10px 11px;

    box-sizing: border-box;

    border:
        2px inset
        #ff8ada;

    outline: none;

    background: #150012;
    color: white;

    font-family: inherit;

    box-shadow:
        inset 0 0 9px rgba(255, 0, 174, 0.25);
}

.login-content input:focus {
    border-color: #ff4fc5;

    box-shadow:
        0 0 8px rgba(255, 0, 174, 0.9),
        inset 0 0 9px rgba(255, 0, 174, 0.35);
}

.login-content input::placeholder {
    color: #9e668d;
}


/* Login button */

#loginButton {
    margin-top: 4px;
    padding: 11px;

    border: 2px outset #ff9ee0;

    background:
        linear-gradient(
            to bottom,
            #ff70cf,
            #bd167f
        );

    color: white;

    font-family: inherit;
    font-weight: bold;
    letter-spacing: 1px;

    cursor: pointer;

    text-shadow:
        0 0 5px #7b0054;

    box-shadow:
        0 0 9px rgba(255, 0, 174, 0.65);
}

#loginButton:hover {
    filter: brightness(1.15);

    box-shadow:
        0 0 9px #ff00ae,
        0 0 20px rgba(255, 0, 174, 0.7);
}

#loginButton:active {
    border-style: inset;
    transform: translateY(1px);
}


/* Small text underneath */

.login-hint {
    margin: 14px 0 0;

    color: #a96c98;

    text-align: center;
    font-size: 11px;
}


/* Bottom screen text */

.login-footer {
    position: absolute;

    bottom: 18px;

    color: rgba(255, 155, 220, 0.65);

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

    text-shadow: 0 0 7px #ff00ae;
}

/* =========================
   RADIO DESKTOP ICON
========================= */

.radio-shortcut {
    top: 250px;
    left: 15px;
}


/* =========================
   LOULOU INTERNET RADIO
========================= */

.radio-window {
    width: min(760px, 92vw);
    height: min(650px, 84vh);

    position: fixed;

    top: 50%;
    left: 50%;

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

    background: #08000c;

    border: 3px solid #ff4fc8;

    box-shadow:
        0 0 10px #ff00bb,
        0 0 28px rgba(255, 0, 187, 0.75),
        inset 0 0 25px rgba(255, 0, 187, 0.12);

    z-index: 5000;
}

.radio-content {
    height: calc(100% - 35px);

    padding: 22px;

    box-sizing: border-box;

    overflow-y: auto;

    color: #ffd6f3;

    background:
        linear-gradient(
            rgba(8, 0, 12, 0.9),
            rgba(8, 0, 12, 0.94)
        ),
        repeating-linear-gradient(
            to bottom,
            rgba(255, 0, 200, 0.07) 0,
            rgba(255, 0, 200, 0.07) 1px,
            transparent 2px,
            transparent 5px
        );
}


/* Band header */

.radio-header {
    display: grid;

    grid-template-columns: 190px 1fr;

    gap: 25px;

    align-items: center;

    padding-bottom: 22px;

    border-bottom: 1px solid rgba(255, 71, 198, 0.6);
}

.radio-logo-frame {
    position: relative;

    padding: 7px;

    border: 2px solid #ff46c6;

    background: #150010;

    box-shadow:
        0 0 10px rgba(255, 0, 187, 0.8),
        inset 0 0 12px rgba(255, 0, 187, 0.3);
}

.radio-band-photo {
    display: block;

    width: 100%;
    height: 180px;

    object-fit: cover;

    filter:
        contrast(1.15)
        saturate(1.2);
}

.radio-live-badge {
    position: absolute;

    right: 12px;
    bottom: 12px;

    padding: 5px 8px;

    background: rgba(10, 0, 8, 0.9);

    border: 1px solid #ff59cb;

    color: #ff5fcb;

    font-size: 11px;
    font-weight: bold;

    text-shadow:
        0 0 5px #ff00bb,
        0 0 10px #ff00bb;
}

.radio-band-information h1 {
    margin: 4px 0 12px;

    color: #ff67d0;

    font-size: 34px;

    text-transform: uppercase;

    text-shadow:
        2px 0 #00fff0,
        -2px 0 #ff005d,
        0 0 12px #ff00bb;
}

.radio-band-information p {
    line-height: 1.55;
}

.radio-small-title {
    margin: 0;

    color: #64fff1;

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


/* Now playing */

.radio-now-playing {
    margin-top: 20px;
    padding: 14px 16px;

    display: grid;

    grid-template-columns: auto 1fr auto;

    gap: 14px;

    align-items: center;

    border: 1px solid #ff4bc7;

    background: rgba(255, 0, 187, 0.08);

    box-shadow:
        inset 0 0 12px rgba(255, 0, 187, 0.25);
}

.radio-label {
    color: #5ffff1;

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

#radioNowPlaying {
    color: white;

    font-weight: bold;

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

.radio-frequency {
    color: #ff7ed5;

    font-size: 10px;
}


/* Fake animated sound bars */

.radio-visualizer {
    height: 70px;

    margin: 18px 0;

    display: flex;

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

    gap: 7px;

    overflow: hidden;

    border-top: 1px solid rgba(255, 0, 187, 0.35);
    border-bottom: 1px solid rgba(255, 0, 187, 0.35);
}

.radio-visualizer span {
    width: 12px;
    height: 15px;

    background:
        linear-gradient(
            to top,
            #ff008f,
            #ff5fd1,
            #72fff2
        );

    box-shadow:
        0 0 8px #ff00bb;

    animation: radioBars 0.75s ease-in-out infinite alternate;
}

.radio-visualizer span:nth-child(2) {
    animation-delay: 0.1s;
}

.radio-visualizer span:nth-child(3) {
    animation-delay: 0.3s;
}

.radio-visualizer span:nth-child(4) {
    animation-delay: 0.15s;
}

.radio-visualizer span:nth-child(5) {
    animation-delay: 0.5s;
}

.radio-visualizer span:nth-child(6) {
    animation-delay: 0.25s;
}

.radio-visualizer span:nth-child(7) {
    animation-delay: 0.4s;
}

.radio-visualizer span:nth-child(8) {
    animation-delay: 0.2s;
}

.radio-visualizer span:nth-child(9) {
    animation-delay: 0.45s;
}

@keyframes radioBars {
    from {
        height: 10px;
    }

    to {
        height: 60px;
    }
}


/* Track list */

.radio-track-list {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.radio-track {
    display: grid;

    grid-template-columns: 45px 1fr auto;

    gap: 10px;

    align-items: center;

    width: 100%;

    padding: 12px 14px;

    border: 1px solid #bd238f;

    background: rgba(28, 0, 24, 0.95);

    color: white;

    font-family: inherit;

    text-align: left;

    cursor: pointer;

    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.radio-track:hover {
    transform: translateX(4px);

    border-color: #ff6ed2;

    box-shadow:
        0 0 12px rgba(255, 0, 187, 0.6),
        inset 0 0 8px rgba(255, 0, 187, 0.15);
}

.radio-track.active {
    border-color: #6ffff3;

    background: rgba(255, 0, 187, 0.17);

    box-shadow:
        0 0 12px rgba(105, 255, 242, 0.55);
}

.radio-track-number {
    color: #ff62cd;
}

.radio-track-name {
    font-weight: bold;
}

.radio-track-play {
    color: #69fff2;

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


/* Band information */

.radio-band-section {
    margin-top: 23px;
    padding: 17px;

    border: 1px solid rgba(255, 67, 195, 0.65);

    background: rgba(255, 0, 187, 0.05);
}

.radio-band-section h2 {
    margin-top: 0;

    color: #ff65cf;

    letter-spacing: 2px;

    text-shadow:
        0 0 8px #ff00bb;
}

.radio-band-section p {
    line-height: 1.6;
}


/* Footer */

.radio-footer {
    margin-top: 18px;

    display: flex;
    flex-wrap: wrap;

    justify-content: space-between;

    gap: 10px;

    color: #bc77a9;

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


/* Smaller screens */

@media (max-width: 620px) {

    .radio-header {
        grid-template-columns: 1fr;
    }

    .radio-logo-frame {
        max-width: 230px;
        margin: 0 auto;
    }

    .radio-now-playing {
        grid-template-columns: 1fr;
    }

}

/* =========================
   GOOGLE SUCKS WINDOW
========================= */

.google-sucks-window {
    position: fixed;

    width: 750px;
    max-width: 90vw;

    height: 520px;
    max-height: 80vh;

    top: 50%;
    left: 50%;

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

    background: #10000d;

    border: 3px solid #ff4fc3;

    box-shadow:
        0 0 10px #ff00b7,
        0 0 30px rgba(255, 0, 183, 0.7);

    overflow: hidden;

    z-index: 9000;
}


/* Title bar */

.google-sucks-window .title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    height: 30px;

    padding-left: 10px;

    background: linear-gradient(
        90deg,
        #710052,
        #ff21b6,
        #710052
    );

    color: white;

    font-family: "Courier New", monospace;
    font-weight: bold;

    cursor: move;

    text-shadow:
        0 0 5px white,
        0 0 10px #ff00b7;
}


/* Close button */

#closeGoogleSucks {
    width: 32px;
    height: 26px;

    margin-right: 3px;

    border: 2px outset #ffb5e7;

    background: #d0008e;

    color: white;

    font-weight: bold;

    cursor: pointer;
}

#closeGoogleSucks:active {
    border-style: inset;
}


/* Browser content */

.google-sucks-content {
    height: calc(100% - 30px);

    overflow-y: auto;

    background:
        linear-gradient(
            rgba(15, 0, 12, 0.96),
            rgba(5, 0, 5, 0.98)
        );

    color: white;
}


/* Browser toolbar */

.google-toolbar {
    display: flex;
    align-items: center;

    gap: 5px;

    padding: 7px;

    border-bottom: 2px solid #ff57c5;

    background: #290020;
}

.google-toolbar button {
    width: 35px;
    height: 28px;

    border: 2px outset #ff9cda;

    background: #ae0878;

    color: white;

    cursor: pointer;
}

.google-address-bar {
    flex: 1;

    padding: 6px 10px;

    border: 2px inset #ff8bd7;

    background: black;

    color: #73fff2;

    font-family: "Courier New", monospace;
    font-size: 12px;
}


/* Homepage */

.google-home {
    padding: 45px 25px;

    text-align: center;
}

.google-sucks-logo {
    margin: 0;

    color: #ff5bc7;

    font-family: Impact, "Arial Black", sans-serif;
    font-size: 65px;
    letter-spacing: -2px;

    text-shadow:
        3px 0 #00fff0,
        -3px 0 #ff0059,
        0 0 10px #ff00b7,
        0 0 30px #ff00b7;
}

.google-sucks-tagline {
    margin-top: 8px;
    margin-bottom: 30px;

    color: #dd9bc8;

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


/* Search row */

.google-search-row {
    display: flex;

    gap: 7px;

    max-width: 580px;

    margin: 0 auto;
}

#googleSucksInput {
    flex: 1;

    min-width: 0;

    padding: 12px;

    border: 2px solid #ff54c4;

    outline: none;

    background: black;

    color: white;

    font-family: "Courier New", monospace;

    box-shadow:
        inset 0 0 8px rgba(255, 0, 183, 0.4),
        0 0 8px rgba(255, 0, 183, 0.5);
}

#googleSucksInput:focus {
    border-color: #73fff2;

    box-shadow:
        0 0 12px rgba(115, 255, 242, 0.7);
}

#googleSucksSearch,
#googleSucksUnlucky {
    border: 2px outset #ffa7df;

    background: linear-gradient(
        #ff72cf,
        #9b076c
    );

    color: white;

    font-family: "Courier New", monospace;
    font-weight: bold;

    cursor: pointer;
}

#googleSucksSearch {
    padding: 0 18px;
}

#googleSucksUnlucky {
    margin-top: 15px;

    padding: 8px 16px;
}

#googleSucksSearch:active,
#googleSucksUnlucky:active {
    border-style: inset;
}


/* Results box */

#googleSucksResults {
    max-width: 620px;

    margin: 35px auto 0;

    padding: 16px;

    border: 1px solid #9f2879;

    background: rgba(255, 0, 183, 0.06);

    color: #e6bdd9;

    font-family: "Courier New", monospace;

    text-align: left;
}

#googleSucksResults h2 {
    margin-top: 8px;

    color: #ff65cb;

    text-shadow:
        0 0 8px rgba(255, 0, 183, 0.8);
}

#googleSucksResults ul {
    padding-left: 22px;
}

#googleSucksResults li {
    margin-bottom: 7px;

    color: #73fff2;
}

.google-result-count {
    color: #936d87;

    font-size: 11px;
}

/* =========================
   GOOGLE SUCKS LOADING
========================= */

.google-sucks-loading {
    max-width: 620px;

    margin: 35px auto 0;

    padding: 20px;

    border: 1px solid #ff56c5;

    background: rgba(255, 0, 183, 0.06);

    color: #73fff2;

    font-family: "Courier New", monospace;

    text-align: center;

    box-shadow:
        inset 0 0 10px rgba(255, 0, 183, 0.2),
        0 0 10px rgba(255, 0, 183, 0.25);
}

.google-loading-bar {
    width: 100%;
    height: 18px;

    margin-top: 15px;
    padding: 2px;

    box-sizing: border-box;

    border: 1px solid #ff60c9;

    background: #080006;
}

#googleLoadingFill {
    width: 0;
    height: 100%;

    background: repeating-linear-gradient(
        90deg,
        #ff20b4 0,
        #ff20b4 14px,
        #73fff2 15px,
        #73fff2 20px
    );

    box-shadow:
        0 0 8px #ff00b7;

    transition: width 0.25s ease;
}

/* =========================
   GOOGLE SUCKS AUTOCOMPLETE
========================= */

.google-sucks-suggestions {
    max-width: 470px;

    margin: 0 auto;

    border: 1px solid #ff54c4;
    border-top: none;

    background: rgba(8, 0, 7, 0.98);

    text-align: left;

    box-shadow:
        0 8px 15px rgba(0, 0, 0, 0.6),
        0 0 10px rgba(255, 0, 183, 0.4);

    position: relative;

    z-index: 50;
}

.google-suggestion-button {
    display: block;

    width: 100%;

    padding: 9px 12px;

    border: none;
    border-bottom: 1px solid rgba(255, 84, 196, 0.25);

    background: transparent;

    color: #ffc5eb;

    font-family: "Courier New", monospace;
    font-size: 12px;

    text-align: left;

    cursor: pointer;
}

.google-suggestion-button:last-child {
    border-bottom: none;
}

.google-suggestion-button:hover {
    background: rgba(255, 0, 183, 0.17);

    color: #73fff2;

    padding-left: 17px;
}

/* =========================
   WORLD MAP
========================= */

.world-map {
    position: relative;

    width: 100%;
    height: 350px;

    display: flex;

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

    background: #000;

    border: 2px solid #ff69d9;

    box-shadow:
        0 0 5px #ff69d9,
        0 0 15px #ff69d9,
        inset 0 0 20px rgba(255, 105, 217, 0.25);

    overflow: hidden;
}

.world-map-image {

    width: 92%;
    height: 92%;

    object-fit: contain;

    opacity: 0.9;

    filter:
        brightness(0)
        saturate(100%)
        invert(55%)
        sepia(80%)
        saturate(2000%)
        hue-rotate(290deg)
        brightness(110%)
        contrast(100%)

        drop-shadow(0 0 5px #ff69d9)
        drop-shadow(0 0 12px #ff69d9);
}
/* =========================
   LOULOU CREATIVE MAP
========================= */

.world-map-content {
    padding: 20px;
    text-align: center;

    background: #080008;

    color: #ff69d9;
}

.world-map-content h2 {

    margin-top: 0;

    color: #ff69d9;

    text-shadow:
        0 0 5px #ff69d9,
        0 0 10px #ff69d9,
        0 0 20px #ff69d9;
}

.creative-map-subtitle {

    margin-top: -10px;

    color: #ffb5ed;

    font-size: 14px;
}


/* =========================
   MAP TABS
========================= */

.creative-map-tabs {

    display: flex;

    justify-content: center;

    gap: 10px;

    margin: 15px 0;
}

.creative-map-tab {

    padding: 8px 18px;

    border: 2px solid #ff69d9;

    background: #120012;

    color: #ff69d9;

    font-family: inherit;

    font-size: 14px;

    cursor: pointer;

    box-shadow:
        0 0 5px #ff69d9;

    transition: 0.15s;
}

.creative-map-tab:hover {

    background: #ff69d9;

    color: #120012;

    box-shadow:
        0 0 10px #ff69d9,
        0 0 20px #ff69d9;
}

.creative-map-tab.active {

    background: #ff69d9;

    color: #120012;

    box-shadow:
        0 0 5px #ff69d9,
        0 0 15px #ff69d9;
}


/* =========================
   MAP MODES
========================= */

.map-mode {

    width: 100%;
}

.map-mode.hidden {

    display: none;
}

.map-mode-title h3 {

    margin-bottom: 3px;

    color: #ff69d9;

    text-shadow:
        0 0 5px #ff69d9;
}

.map-mode-title p {

    margin-top: 0;

    color: #ffb5ed;

    font-size: 13px;
}


/* =========================
   WORLD MAP
========================= */

.world-map {

    position: relative;

    width: 100%;

   height: 480px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #000;

    border: 2px solid #ff69d9;

    box-shadow:
        0 0 5px #ff69d9,
        0 0 15px #ff69d9,
        inset 0 0 20px rgba(255, 105, 217, 0.25);

    overflow: hidden;
}

.world-map-image {

    width: 96%;

    height: auto;

    opacity: 0.9;

    filter:
        brightness(0)
        saturate(100%)
        invert(55%)
        sepia(80%)
        saturate(2000%)
        hue-rotate(290deg)
        brightness(110%)
        contrast(100%)

        drop-shadow(0 0 5px #ff69d9)
        drop-shadow(0 0 12px #ff69d9);
}


/* =========================
   ART MARKERS
========================= */

.art-map-marker {

    position: absolute;

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

    width: 24px;

    height: 24px;

    padding: 0;

    border: none;

    background: transparent;

    color: #ff69d9;

    font-family: inherit;

    font-size: 20px;

    cursor: pointer;

    z-index: 10;

    text-shadow:
        0 0 5px #ff69d9,
        0 0 10px #ff69d9,
        0 0 20px #ff69d9;

    animation: artMarkerPulse 1.5s infinite alternate;
}

.art-map-marker:hover {

    color: white;

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

    text-shadow:
        0 0 5px white,
        0 0 10px #ff69d9,
        0 0 25px #ff69d9;
}

@keyframes artMarkerPulse {

    from {
        opacity: 0.55;
    }

    to {
        opacity: 1;
    }

}


/* =========================
   EMPTY EMINENT MAP
========================= */

.map-empty-message {

    margin-top: 12px;

    color: #ff69d9;

    font-size: 13px;
}

.map-empty-message p {

    margin: 0;

    text-shadow:
        0 0 5px #ff69d9;
}

.map-empty-message span {

    color: #ffb5ed;

    font-size: 11px;
}

/* =========================
   ART MAP POPUP
========================= */

.art-map-popup {

    position: absolute;

    left: 55%;
    top: 35%;

    width: 190px;

    padding: 12px;

    background: #100010;

    border: 2px solid #ff69d9;

    color: #ffb5ed;

    text-align: left;

    z-index: 50;

    box-shadow:
        0 0 5px #ff69d9,
        0 0 15px #ff69d9,
        inset 0 0 10px rgba(255, 105, 217, 0.2);
}

.art-map-popup.hidden {
    display: none;
}

.art-map-popup h3 {

    margin: 0 25px 3px 0;

    color: #ff69d9;

    font-size: 17px;

    text-shadow:
        0 0 5px #ff69d9;
}

.art-map-popup-year {

    color: #ff69d9;

    font-size: 11px;
}

.art-map-popup p {

    margin: 8px 0;

    font-size: 12px;

    line-height: 1.4;
}

.art-map-popup-close {

    position: absolute;

    top: 5px;
    right: 5px;

    border: none;

    background: transparent;

    color: #ff69d9;

    cursor: pointer;

    font-family: inherit;
}

.art-map-popup-close:hover {

    color: white;

    text-shadow:
        0 0 5px #ff69d9;
}

.art-map-popup-button {

    width: 100%;

    padding: 5px;

    border: 1px solid #ff69d9;

    background: #180018;

    color: #ff69d9;

    cursor: pointer;

    font-family: inherit;

    font-size: 11px;
}

.art-map-popup-button:hover {

    background: #ff69d9;

    color: #180018;
}

/* =========================
   BIGGER WORLD MAP WINDOW
========================= */

.world-map-window {
    width: 1000px;
    height: 700px;

    max-width: 90vw;
    max-height: 85vh;
}

.world-map-content {
    height: calc(100% - 40px);
    box-sizing: border-box;

    overflow-y: auto;
}

.art-map-marker {
    position: absolute;
    background: none;
    border: none;
    padding: 0;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.art-map-marker img {
    width: 100%;
    height: 100%;
    object-fit: contain;

    filter:
        brightness(0)
        invert(1)
        drop-shadow(0 0 3px white)
        drop-shadow(0 0 6px white)
        drop-shadow(0 0 12px white);
}

/* =========================
   LOULOU BOOK CLOSET
========================= */

.library-window {
    width: 750px;
    max-width: 90vw;
    height: 600px;
    max-height: 80vh;
}

.library-content {
    height: calc(100% - 35px);
    overflow-y: auto;
    padding: 25px;
    box-sizing: border-box;
}

.library-header {
    text-align: center;
    margin-bottom: 25px;
}

.library-header h2 {
    margin: 0 0 8px;
    color: white;
    text-shadow:
        0 0 5px white,
        0 0 10px #ff69d4,
        0 0 20px #ff69d4;
}

.library-header p {
    color: white;
    margin: 0;
}


/* SECTIONS */

.library-section {
    margin-bottom: 30px;
}

.library-section h3 {
    color: white;
    margin-bottom: 12px;

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


/* BOOKSHELF */

.library-shelf {
    min-height: 150px;

    display: flex;
    align-items: flex-end;
    gap: 18px;

    padding: 20px 20px 10px;

    border-bottom: 8px solid #ff69d4;

    box-shadow:
        0 5px 10px rgba(255, 105, 212, 0.6),
        0 0 15px #ff69d4;

    background: rgba(255, 105, 212, 0.05);
}


/* BOOK */

.library-book {
    width: 75px;

    background: none;
    border: none;
    padding: 0;

    cursor: pointer;

    display: flex;
    flex-direction: column;
    align-items: center;

    transition:
        transform 0.2s ease,
        filter 0.2s ease;
}


.library-book img {
    width: 65px;
    height: 100px;

    object-fit: cover;

    border: 2px solid white;

    box-shadow:
        0 0 5px white,
        0 0 10px #ff69d4,
        0 0 20px #ff69d4;
}


.library-book span {
    margin-top: 7px;

    color: white;
    font-size: 11px;

    text-shadow:
        0 0 5px #ff69d4;

    text-align: center;
}


/* BOOK HOVER */

.library-book:hover {
    transform: translateY(-12px) rotate(-2deg);

    filter:
        drop-shadow(0 0 5px white)
        drop-shadow(0 0 12px #ff69d4);
}


/* =========================
   BOOK INFORMATION
========================= */

.book-info-window {
    width: 500px;
    max-width: 85vw;
}


.book-info-content {
    display: flex;
    gap: 25px;

    padding: 25px;

    color: white;
}


.book-info-content > img {
    width: 150px;
    height: 220px;

    object-fit: cover;

    border: 2px solid white;

    box-shadow:
        0 0 5px white,
        0 0 15px #ff69d4,
        0 0 30px #ff69d4;
}


.book-info-text {
    flex: 1;
}


.book-info-text h2 {
    margin-top: 0;

    color: white;

    text-shadow:
        0 0 5px white,
        0 0 10px #ff69d4,
        0 0 20px #ff69d4;
}


#bookInfoAuthor {
    color: #ffb5ec;
}


#bookInfoRating {
    color: white;

    font-size: 20px;

    margin: 15px 0;

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


.book-thoughts {
    margin-top: 20px;

    padding: 15px;

    border: 1px solid #ff69d4;

    box-shadow:
        0 0 8px #ff69d4;

    background: rgba(255, 105, 212, 0.08);
}


.book-thoughts h3 {
    margin-top: 0;

    color: white;

    text-shadow:
        0 0 8px #ff69d4;
}


/* =========================
   BOOK CLOSET DETAILS
========================= */

.library-window {
    background:
        linear-gradient(
            rgba(20, 0, 18, 0.94),
            rgba(10, 0, 12, 0.96)
        );

    border: 2px solid #ff69d4;

    box-shadow:
        0 0 8px #ff69d4,
        0 0 20px #ff69d4,
        0 0 45px rgba(255, 105, 212, 0.5);
}


/* BOOKSHELF BACKGROUND */

.library-shelf {
    position: relative;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255, 105, 212, 0.025) 0px,
            rgba(255, 105, 212, 0.025) 40px,
            rgba(255, 255, 255, 0.025) 41px,
            rgba(255, 255, 255, 0.025) 42px
        );

    border-bottom: 7px solid #ff69d4;

    box-shadow:
        0 5px 0 rgba(255, 105, 212, 0.25),
        0 8px 15px rgba(255, 105, 212, 0.5),
        0 0 15px #ff69d4;
}


/* LITTLE LIGHT ABOVE SHELF */

.library-shelf::before {
    content: "♡  ♡  ♡";

    position: absolute;

    top: 5px;
    right: 15px;

    color: white;

    font-size: 12px;

    opacity: 0.7;

    text-shadow:
        0 0 5px white,
        0 0 10px #ff69d4;
}


/* BOOK VARIATIONS */

.library-book:nth-child(2) {
    transform: rotate(2deg);
}

.library-book:nth-child(3) {
    transform: rotate(-2deg);
}

.library-book:nth-child(4) {
    transform: rotate(1deg);
}

.library-book:nth-child(5) {
    transform: rotate(-3deg);
}


/* DON'T LET HOVER OVERRIDE THE VARIATIONS */

.library-book:nth-child(2):hover,
.library-book:nth-child(3):hover,
.library-book:nth-child(4):hover,
.library-book:nth-child(5):hover {
    transform:
        translateY(-12px)
        rotate(0deg);
}


/* BOOK SPINES */

.library-book img {
    border-radius: 2px;

    transition:
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


.library-book:hover img {
    transform: scale(1.04);

    box-shadow:
        0 0 5px white,
        0 0 12px white,
        0 0 25px #ff69d4,
        0 0 40px #ff69d4;
}


/* BOOK TITLE */

.library-book span {
    opacity: 0.85;

    transition:
        opacity 0.2s ease,
        text-shadow 0.2s ease;
}


.library-book:hover span {
    opacity: 1;

    text-shadow:
        0 0 5px white,
        0 0 10px #ff69d4;
}


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

.library-content::-webkit-scrollbar {
    width: 10px;
}

.library-content::-webkit-scrollbar-track {
    background: rgba(255, 105, 212, 0.05);
}

.library-content::-webkit-scrollbar-thumb {
    background: #ff69d4;

    box-shadow:
        0 0 5px #ff69d4,
        0 0 10px #ff69d4;
}


/* =========================
   BOOK INFO GLOW
========================= */

.book-info-window {
    background:
        rgba(15, 0, 12, 0.96);

    border: 2px solid #ff69d4;

    box-shadow:
        0 0 8px #ff69d4,
        0 0 20px #ff69d4,
        0 0 40px rgba(255, 105, 212, 0.5);
}

.library-book:nth-child(1) img {
    height: 115px;
}

.library-book:nth-child(2) img {
    height: 105px;
}

.library-book:nth-child(3) img {
    height: 125px;
}

.library-book:nth-child(4) img {
    height: 110px;
}

.library-book:nth-child(5) img {
    height: 120px;
}

.library-closet-label {
    display: inline-block;

    padding: 5px 12px;

    margin-bottom: 10px;

    border: 1px solid #ff69d4;

    color: white;

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

    box-shadow:
        0 0 5px #ff69d4,
        inset 0 0 5px rgba(255, 105, 212, 0.3);

    text-shadow:
        0 0 5px white,
        0 0 10px #ff69d4;
}