/* 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." */
@font-face {
    font-family: "PixelOperator";
    src: url("fonts/PixelOperator.ttf") format("truetype");
}

@font-face {
    font-family: "MonoFonto";
    src: url("fonts/monofonto rg.otf") format("opentype");
}

@font-face {
    font-family: "GothicPixels";
    src: url("fonts/GothicPixels.ttf") format("truetype");
}

.link {
    color: rgb(255, 255, 255);
    text-decoration: none;
}

nav {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

body {
    margin: 0;

    background-color: rgb(0, 0, 0);
    color: white;
    font-family: "PixelOperator";
}
.window {
    width: 900px;
    background: #000000;
    border: 1px solid #ffffff;
    border-radius: 0px;
    overflow: hidden;
    
    
    
}

.window-scroll {
    width: 900px;
    height: 600px;

    margin: 20px auto;

    background: black;
    border: 1px dashed white;

    padding: 20px;
    box-sizing: border-box;

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

.window-scroll2 {
    width: 200px;
    height: 200px;

    margin: 20px auto;

    background: black;
    border: 1px dashed white;

    padding: 20px;
    box-sizing: border-box;

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

.box {
    width: 138px;
    background: #00000000;
    border: 1px dashed #ffffff;
    border-radius: 0px;
    margin: 0px;
    overflow: hidden;

    padding: 0px 27px;
}

.titlebar {
    background: #00000000;
    padding: 15px;
    font-weight: bold;
}

.content {
    padding: 30px;
}

nav a {
    margin-bottom: 1px;
    
    cursor: pointer;

    color: white;
    background: black;

    font-family: "PixelOperator";

    display: flex;
    justify-content: center; /* centers left/right */
    align-items: center;     /* centers up/down */
    

    transition: 0.2s;
}

nav a:hover {

    color: rgb(0, 0, 0);
    background: rgb(255, 255, 255);
    display: flex;
    justify-content: center;
    height: auto;
    overflow: hidden;
    
}

.row {
    display: flex;
    justify-content: center;
    gap: 0px;

}

h1 {
    text-align: center;
}

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

.cover {
    position: relative;
    display: inline-block;
}

.cover::after {
    content: "";

    position: absolute;
    inset: 0;

    background: url("images/dither.png");
    opacity: .2;

    pointer-events: none;
}

.about {
    display: flex;
    align-items: flex-start;
}

.about2 {
    display: flex;
    justify-content: flex-start;
}

.window {
    margin-left: auto;
    margin-right: auto;
}

a {
    color: white;
    text-decoration: none;
}

a:visited {
    color: white;
}

.columns {
    display: flex;
}

.left {
    width: 50%;
}

.right {
    width: 50%;
}

.window {
    position: relative;
}

.corner {
    position: absolute;
    top: 20px;
    right: 20px;
}

.corner2 {
    margin-left: 0;
}

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

    width: 100%;
    box-sizing: border-box;

}

.card {
    border: 1px dashed white;
    padding: 15px;
}

.profile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.bio-box {
    width: 200px;
    border: 1px dashed white;
    padding: 15px;
    box-sizing: border-box;
}

.bio-box2 {
    width: 420px;
    border: 1px dashed white;
    padding: 0px;
    box-sizing: border-box;
}

.music-window {
    width: 900px;
    height: 600px;      /* Height of the window */
    margin: 20px auto;

    border: 1px dashed white;
    background: black;

    padding: 20px;
    box-sizing: border-box;

    overflow-y: auto;   /* Vertical scrolling */
    overflow-x: hidden; /* No horizontal scrolling */
}

.album-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.album-card {
    border: 1px dashed white;
    padding: 15px;
    text-align: center;
}

.album-card2 {
    margin: 20px auto;

    background: black;
    border: 1px dashed white;

    padding: 20px;
    box-sizing: border-box;

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

.album-card img {
    width: 100%;
    height: auto;
}



::-webkit-scrollbar {
    width: 16px;
}

::-webkit-scrollbar-track {
    background: black;
    border: 1px dashed white;
}

::-webkit-scrollbar-thumb {
    background: white;
    border: 1px dashed black;
}

::-webkit-scrollbar-thumb:hover {
    background: #bbbbbb;
}

.music-player {
    width: 500px;
    background: black;
    border: 2px dashed white;
    color: white;

    padding: 15px;
    margin: 20px auto;

    font-family: "PixelOperator";
}

.player-title {
    text-align: center;
    border-bottom: 1px dashed white;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.current-song {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.album-cover {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border: 1px dashed white;
}

.song-info {
    flex: 1;
}

.song-info h3 {
    margin: 0;
}

.song-info p {
    margin: 5px 0 15px;
}

.song-info audio {
    width: 100%;
}

.playlist {
    margin-top: 15px;

    height: 180px;
    overflow-y: auto;

    border: 1px dashed white;

    padding: 10px;
}

.playlist a {
    display: block;
    color: white;
    text-decoration: none;

    padding: 6px;
}

.playlist a:hover {
    background: white;
    color: black;
}

.album {
    border: 1px dashed white;
    margin-bottom: 20px;
}

.album-button {
    width: 100%;
    background: black;
    color: white;
    border: none;
    padding: 15px;
    font-family: "PixelOperator";
    font-size: 20px;
    text-align: left;
    cursor: pointer;
}

.album-button:hover {
    background: white;
    color: black;
}

.songs {

    padding: 20px;
    overflow-y: auto;
    overflow-x: hidden;
}

.songs audio {
    width: 100%;
    margin-bottom: 15px;
}

.song {
    border: 1px dashed white;
    padding: 10px 15px;
    margin-bottom: 8px;

    cursor: pointer;

    color: white;
    background: black;

    transition: 0.15s;

    font-family: "PixelOperator";
    font-size: 18px;
}

.song2 {
    padding: 10px 15px;
    margin-bottom: 8px;

    cursor: pointer;

    color: white;
    background: black;

    transition: 0.15s;

    font-family: "PixelOperator";
    font-size: 18px;
}

.song:hover {
    background: white;
    color: black;
}

.song2:hover {
    background: white;
    color: black;
}

.lyrics-window {
    width: 900px;      /* or whatever width you want */
    height: 180px;     /* Fixed height */

    border: 1px dashed white;
    padding: 15px;

    overflow: hidden;  /* Hide lyrics outside the window */
    position: relative;

    box-sizing: border-box;
}

#lyrics {
    transition: transform 0.35s ease;
}

#lyrics {
    position: absolute;
    width: 100%;

    left: 0;
    top: 0;

    transition: transform 0.35s ease;
}

.lyric {
    height: 40px;
    line-height: 40px;

    color: #777;
    transition: .25s;
}

.lyric.active {
    color: white;
    font-size: 22px;
}

.media{
    display:flex;
    gap:20px;
}

.video-box{

    width:500px;
    border:1px dashed white;
    padding:10px;
    display: none;

}

#musicVideo{

    width:100%;

}

.video-box {
    display: none;
    animation: openWindow .2s steps(5);
}

@keyframes openWindow{
    from{
        transform:scale(.9);
        opacity:0;
    }

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

img {
    image-rendering: crisp-edges;
}

.cover img{
    filter:
        brightness(70%)
        contrast(130%)
        saturate(70%);
}

.cover2 img{
    filter:
        brightness(100%)
        contrast(200%)
        saturate(40%);
}

.song {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* DIGITAL MUSIC PLAYER */

.digital-player {
    width: 420px;
    margin: 15px auto;
    background: black;
    border: 1px dashed white;
    padding: 10px;
    box-sizing: border-box;
    font-family: "PixelOperator";
}

.digital-screen {
    border: 1px solid white;
    background: black;
    padding: 12px;
}

.digital-label {
    font-size: 12px;
    opacity: 0.6;
    margin-bottom: 8px;
}

#song-title {
    font-size: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 12px;
}

.digital-time {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
}

.digital-bars {
    letter-spacing: 2px;
    font-size: 12px;
}

#progress {
    width: 100%;
    margin-top: 10px;
    cursor: pointer;
    accent-color: white;
}

.digital-controls {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
}

.digital-controls button {
    background: black;
    color: white;
    border: 1px dashed white;

    font-family: "PixelOperator";
    font-size: 16px;

    padding: 8px 14px;
    cursor: pointer;
}

.digital-controls button:hover {
    background: white;
    color: black;
}

.home-columns {
    display: flex;
    align-items: stretch;
    gap: 15px;

    width: 100%;
    padding: 15px;

    box-sizing: border-box;

}    
/* LEFT SIDE */

.home-games {
    flex: 1;
    min-width: 0;

    padding: 0 15px;

    box-sizing: border-box;
}


/* RIGHT SIDE */

.mini-blog {
    width: 250px;
    flex-shrink: 0;

    height: 350px;

    padding: 0 15px;

    border-left: 1px dashed white;

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

    box-sizing: border-box;
}

/* EACH BLOG ENTRY */

.blog-post {
    border-top: 1px dashed white;
    padding: 10px 0;
}

.blog-date {
    color: #777;
    margin-bottom: 5px;
}

/* GAME EMBEDS */

.about2 {
    display: flex;
    justify-content: flex-start;
    gap: 10px;

    margin-top: 20px;
}

.bottom-layout {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 30px;

    padding: 20px;
}

.time-window {
    width: 400px;
    border-left: 1px dashed white;
    padding-left: 30px;
    margin-left: 30px;
}

/* CLOCK NIGGGAAAAAA [yes im black i can say that] */

.analog-clock {
    width: 180px;
    height: 180px;

    border: 2px dashed white;
    border-radius: 50%;

    position: relative;

    margin: 20px auto;
}

.clock-hand {
    position: absolute;

    left: 50%;
    bottom: 50%;

    background: white;

    transform-origin: bottom center;
}

.hour-hand {
    width: 4px;
    height: 45px;
}

.minute-hand {
    width: 2px;
    height: 65px;
}

.second-hand {
    width: 1px;
    height: 75px;
}

.clock-center {
    position: absolute;

    width: 8px;
    height: 8px;

    background: white;
    border-radius: 50%;

    left: 50%;
    top: 50%;

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


/* CALENDAR BITYAAAACHHH */

.calendar {
    border-top: 1px dashed white;
    margin-top: 20px;
    padding-top: 10px;

    text-align: center;
}

.calendar-days,
#calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.calendar-days {
    margin-bottom: 8px;
}

.calendar-days span {
    font-size: 12px;
}

#calendar-grid span {
    padding: 4px;
}

.today {
    background: white;
    color: black;
}

.drop-button {
    display: block;

    color: white;
    text-decoration: none;

    border: 1px solid #888;
    padding: 10px;
    margin-bottom: 8px;

    background: linear-gradient(
        to bottom,
        #666 0%,
        #333 45%,
        #111 50%,
        #000 100%
    );
}

.drop-button:hover {
    background: linear-gradient(
        to bottom,
        #ffffff,
        #777777,
        #222222
    );

    color: black;
}

.marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;

}

.marquee-text {
    display: inline-block;
    padding-left: 100%;

    animation: scrollText 10s linear infinite;
}

@keyframes scrollText {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.mini-winamp {
    width: 280px;
    background: #111;

    border: 2px solid #888;

    font-family: "PixelOperator";
    color: white;

    padding: 0px;

    box-sizing: border-box;
}

.winamp-title {
    display: flex;
    justify-content: space-between;

    padding: 4px 6px;

    color: white;

    background: linear-gradient(
        to right,
        #111,
        #555,
        #111
    );

    border-bottom: 1px solid #777;
}

.winamp-screen {
    background: black;

    border: 1px inset #777;

    margin: 5px;
    padding: 8px;

    min-height: 40px;
}

#mini-song-title {
    white-space: nowrap;
    overflow: hidden;

    font-size: 14px;
}

.winamp-time {
    font-size: 20px;
    margin-top: 5px;
}

.mini-seeker {
    width: calc(100% - 10px);
    margin: 5px;
}

.winamp-controls {
    display: flex;
    justify-content: center;

    gap: 3px;

    padding: 5px;
}

.winamp-controls button {
    background: linear-gradient(
        to bottom,
        #666,
        #222
    );

    color: white;

    border: 1px solid #999;

    font-family: "PixelOperator";

    cursor: pointer;
}

.winamp-controls button:active {
    background: black;
}

.winamp-visualizer {
    margin: 5px;
    height: 55px;

    background: black;
    border: 1px inset #777;

    overflow: hidden;
}

#visualizer {
    width: 100%;
    height: 100%;

    display: block;

    image-rendering: pixelated;
}

.star-visualizer {
    height: 80px;
    margin: 5px;

    background: black;
    border: 1px inset #777;

    overflow: hidden;
}

#starVisualizer {
    width: 100%;
    height: 100%;
    display: block;

    image-rendering: pixelated;
}

.wireframe-visualizer {
    height: 110px;
    margin: 5px;

    background: black;
    border: 1px inset #777;

    overflow: hidden;
}

#wireframeVisualizer {
    width: 100%;
    height: 100%;
    display: block;

    image-rendering: pixelated;
}

body {
    cursor: url("paw cursor.png"), auto;
}


a,
button,
[onclick],
[role="button"],
input[type="button"],
input[type="submit"],
input[type="range"] {
    cursor: url("paw cursor2.png"), pointer !important;
}

.banner {
    display: flex;
    justify-content: center;
    width: 100%;
    overflow: hidden;
}

.banner img {
    max-width: 100%;
    height: auto;
    display: block;
}


@font-face {
    font-family: "MonoFonto";
    src: url("fonts/monofonto rg.otf") format("opentype");
}

#digital-bars {
    font-family: "MonoFonto", monospace;
}

body {
    background-color: black;

}

.sideways-text {
    transform: rotate(90deg);
    display: inline-block;
}

.window {
    position: relative;
}

.side-label {
    position: absolute;
    top: 0;
    left: 0;

    height: ;

    display: flex;
    justify-content: space-around;
}

.chat-window {
    position: fixed;

    width: 350px;
    height: 430px;

    right: 30px;
    bottom: 30px;

    background: black;
    color: white;

    border: 2px dashed white;

    font-family: "PixelOperator";

    z-index: 9999;

    display: none;

    box-sizing: border-box;
}


/* TITLE BAR */

.chat-titlebar {
    height: 30px;

    border-bottom: 1px dashed white;

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

    padding: 0 6px;

    cursor: move;

    user-select: none;

    background: linear-gradient(
        to right,
        #111,
        #555,
        #111
    );    
}


/* X / MINIMIZE */

.chat-window-buttons {
    display: flex;
}

.chat-window-buttons button {
    background: black;
    color: white;

    border: 1px solid white;

    font-family: inherit;

    cursor: pointer;

    width: 25px;
    height: 20px;
}

.chat-window-buttons button:hover {
    background: white;
    color: black;
}


/* MESSAGES */

.chat-messages {
    height: 285px;

    padding: 10px;

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

    box-sizing: border-box;
}

.chat-system {
    text-align: center;
    opacity: 0.6;

    margin-bottom: 10px;
}


/* USERNAME */

.chat-name-row {
    height: 35px;

    border-top: 1px dashed white;

    display: flex;
    align-items: center;

    padding: 4px;

    gap: 5px;

    box-sizing: border-box;
}


/* MESSAGE BOX */

.chat-input-row {
    height: 75px;

    border-top: 1px dashed white;

    display: flex;

    padding: 8px;
    gap: 5px;

    box-sizing: border-box;
}


.chat-window input {
    background: black;
    color: white;

    border: 1px dashed white;

    font-family: inherit;

    outline: none;

    padding: 5px;
}


#chat-name {
    flex: 1;
}


#chat-input {
    flex: 1;
}


#chat-send {
    background: black;
    color: white;

    border: 1px dashed white;

    font-family: inherit;

    cursor: pointer;
}


#chat-send:hover {
    background: white;
    color: black;
}


/* OPEN CHAT BUTTON */

.chat-open-button {
    background: black;
    color: white;

    border: 1px dashed white;

    padding: 8px 15px;

    font-family: "PixelOperator";

    cursor: pointer;
}

.chat-open-button:hover {
    background: white;
    color: black;
}

.corner-gif {
    position: absolute;

    bottom: 0;
    right: 0;

    height: auto;
}


body::after
    content: "";
    position: fixed;
    inset: 0;

    pointer-events: none;
    z-index: 9999;

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



.nav-window {
    width: 125px;
    flex-shrink: 0;

    border-right: 1px dashed white;
    padding-right: 15px;

    box-sizing: border-box;
}


.nav-window > p {
    margin-top: 0;
    text-align: center;
}

.side-nav {
    display: flex;
    flex-direction: column;
    gap: 5px;

    width: 100%;
}

.side-nav a {
    display: block;

    width: 100%;
    padding: 6px 8px;

    border: 1px dashed white;

    box-sizing: border-box;

    text-align: center;

    color: white;
    background: black;
    text-decoration: none;
}

.side-nav a:hover {
    background: white;
    color: black;
}

/* CURSOR + PARTICLES */

.cursor-particle {
    position: fixed;

    width: 9px;
    height: 9px;

    pointer-events: none;
    z-index: 9998;

    animation:
        cursorSnow 3.5s steps(4) forwards,
        cursorFade 4s linear forwards;
}


/* DRAW THE + */

.cursor-particle::before,
.cursor-particle::after {
    content: "";
    position: absolute;
    background: white;
}

.cursor-particle::before {
    width: 9px;
    height: 1px;

    left: 0;
    top: 4px;
}

.cursor-particle::after {
    width: 1px;
    height: 9px;

    left: 4px;
    top: 0;
}


/* SNOWFLAKE FALL */

@keyframes cursorSnow {

    0% {
        transform: translate(0px, 0px);
    }

    20% {
        transform: translate(-8px, 25px);
    }

    40% {
        transform: translate(8px, 50px);
    }

    60% {
        transform: translate(-10px, 80px);
    }

    80% {
        transform: translate(9px, 115px);
    }

    100% {
        transform: translate(-5px, 150px);
    }
}

@keyframes cursorFade {

    0% {
        opacity: 1;
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

#visualizer-window {
    position: fixed;

    width: 600px;
    height: 450px;

    left: 60px;
    bottom: 60px;


    transform: none;

    background: black;

    border: 2px solid white;

    z-index: 9000;

    box-shadow:
        5px 5px 0 black,
        6px 6px 0 white;

    box-sizing: border-box;
    overflow: hidden;

    display: flex;
    flex-direction: column;
}

.visualizer-titlebar {
    height: 25px;

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

    padding-left: 8px;

    background: black;
    color: white;

    border-bottom: 1px solid white;

    box-sizing: border-box;
}


#visualizer-close {
    height: 100%;
    width: 30px;

    border: 0;
    border-left: 1px solid white;

    background: black;
    color: white;

    cursor: pointer;
}


#rainbow-visualizer {
    display: block;

    width: 100%;
    height: calc(100% - 25px);

    background: black;
}

/* =========================================
   PSYCHEDELIC VISUALIZER SCREEN
   PIXEL + CRT + VHS
   ========================================= */

.rainbow-canvas-wrap {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: black;

    /* slightly rounded CRT-ish screen */
    border-radius: 2px;
}


/* =========================================
   PIXELATED CANVAS
   ========================================= */

#rainbow-visualizer {
    display: block;

    width: 100%;
    height: 100%;

    /*
       Prevent browser smoothing when the
       low-resolution canvas is enlarged.
    */

    image-rendering: pixelated;
    image-rendering: crisp-edges;

    /*
       Extra saturation + contrast keeps the
       colors neon instead of pastel.
    */

    filter:
        contrast(1.25)
        saturate(1.55)
        brightness(1.04);

    animation:
        crtFlicker 0.13s steps(2) infinite;
}


/* =========================================
   CRT SCANLINES + RGB PHOSPHORS
   ========================================= */

.rainbow-canvas-wrap::after {

    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    z-index: 20;

    background:

        /* DARK HORIZONTAL SCANLINES */

        repeating-linear-gradient(
            to bottom,

            transparent 0px,
            transparent 2px,

            rgba(0, 0, 0, 0.28) 3px,
            rgba(0, 0, 0, 0.28) 4px
        ),


        /* RGB CRT PHOSPHOR COLUMNS */

        repeating-linear-gradient(
            to right,

            rgba(255, 0, 0, 0.055) 0px,
            rgba(255, 0, 0, 0.055) 1px,

            rgba(0, 255, 0, 0.04) 1px,
            rgba(0, 255, 0, 0.04) 2px,

            rgba(0, 80, 255, 0.055) 2px,
            rgba(0, 80, 255, 0.055) 3px
        );

    mix-blend-mode: overlay;
}


/* =========================================
   VHS TRACKING BAR
   ========================================= */

.rainbow-canvas-wrap::before {

    content: "";

    position: absolute;

    left: 0;
    top: -15%;

    width: 100%;
    height: 10%;

    pointer-events: none;

    z-index: 21;

    background:

        linear-gradient(
            to bottom,

            transparent 0%,

            rgba(255,255,255,0.03) 25%,

            rgba(255,255,255,0.15) 50%,

            rgba(255,255,255,0.04) 70%,

            transparent 100%
        );

    animation:
        vhsTracking 3.2s steps(22) infinite;
}


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

@keyframes crtFlicker {

    0% {

        filter:
            contrast(1.25)
            saturate(1.55)
            brightness(1.04);

    }

    50% {

        filter:
            contrast(1.32)
            saturate(1.7)
            brightness(0.98);

    }

    100% {

        filter:
            contrast(1.25)
            saturate(1.55)
            brightness(1.04);

    }

}


/* =========================================
   VHS TRACKING MOVEMENT
   ========================================= */

@keyframes vhsTracking {

    0% {

        transform:
            translateY(0);

        opacity: 0;

    }


    5% {

        opacity: 0.7;

    }


    25% {

        opacity: 0.25;

    }


    55% {

        opacity: 0.6;

    }


    80% {

        opacity: 0.35;

    }


    100% {

        transform:
            translateY(1150%);

        opacity: 0;

    }

}

/* =========================================
   VISUALIZER TABS
   ========================================= */

.visualizer-tabs {
    display: flex;

    width: 100%;

    background: black;

    border-bottom: 1px solid white;
}


.visualizer-tab-button {
    flex: 1;

    padding: 4px 8px;

    background: black;
    color: white;

    border: 0;
    border-right: 1px solid white;

    font-family: "PixelOperator", monospace;
    font-size: 12px;

    cursor: pointer;
}


.visualizer-tab-button:last-child {
    border-right: 0;
}


.visualizer-tab-button:hover {
    background: white;
    color: black;
}


/* CURRENT TAB */

.visualizer-tab-button.active {
    background: white;
    color: black;
}


/* =========================================
   TAB CONTENT
   ========================================= */

.visualizer-tab-content {
    display: none;

    position: relative;

    width: 100%;

    flex: 1;
    min-height: 0;

    overflow: hidden;

    background: black;
}

.visualizer-tab-content.active {
    display: block;
    flex: 1;
}


/* =========================================
   BOTH CANVASES
   ========================================= */

#rainbow-visualizer,
#milkdrop-visualizer {
    display: block;

    width: 100%;
    height: 100%;
}


/* ONLY ACID GETS PIXELATED */

#rainbow-visualizer {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}


/* MILKDROP STAYS SMOOTH */

#milkdrop-visualizer {
    image-rendering: auto;
}

.visualizer-titlebar {
    flex-shrink: 0;

    cursor: move;
    user-select: none;
}

.visualizer-tabs {
    flex-shrink: 0;
}

#butterchurn-visualizer {
    display: block;

    width: 100%;
    height: 100%;

    background: black;

    image-rendering: auto;
}

#three-visualizer {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
    background: black;
}

#three-visualizer canvas {
    display: block;

    width: 100% !important;
    height: 100% !important;
}

#overdose-visualizer {
    display: block;

    width: 100%;
    height: 100%;

    background: black;
}

#songMilkdrop {

    display: none;

    width: 100%;
    height: 100%;

    background: black;
}

.video-box.milkdrop-mode #songMilkdrop {
    display: block;
}

.video-box.milkdrop-mode #musicVideo {
    display: none;
}


.digital-clock {

    width: 350px;
    margin: 25px auto 15px auto;

    padding: 16px 10px;

    box-sizing: border-box;

    background: #000;

    border: 2px solid #fff;

    display: flex;

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

    gap: 8px;

}


#digital-time {

    font-family: "PixelOperator", monospace;

    font-size: 60px;

    letter-spacing: 2px;

    color: white;

    line-height: 1;

}


#digital-period {

    font-family: "PixelOperator", monospace;

    font-size: 30px;

    color: white;

}



.music-floating-window {

    position: fixed;

    width: min(900px, 80vw);
    height: 76vh;

    right: -10%;
    top: 55%;

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

    background: black;

    border: 2px solid white;

    box-sizing: border-box;

    z-index: 100;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.music-floating-window2 {

    position: fixed;

    width: min(600px, 75vw);
    height: 60vh;

    left: 20%;
    top: 38%;

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

    background: black;

    border: 2px solid white;

    box-sizing: border-box;

    z-index: 100;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.music-floating-window3 {

    position: fixed;

    width: min(500px, 75vw);
    height: 25vh;

    left: 20%;
    top: 82%;

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

    background: black;

    border: 2px solid white;

    box-sizing: border-box;

    z-index: 100;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}



.music-window-titlebar {

    height: 32px;

    flex-shrink: 0;

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

    padding: 0 10px;

    box-sizing: border-box;

    border-bottom: 2px solid white;

    background: linear-gradient(
        to right,
        #111,
        #555,
        #111
    );
    color: white;

    font-family: "PixelOperator", monospace;

    cursor: default;
}



.music-window-content {

    flex: 1;

    min-height: 0;

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

    box-sizing: border-box;
}


/* scrollbar */

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

.music-window-content::-webkit-scrollbar-track {
    background: black;
}

.music-window-content::-webkit-scrollbar-thumb {
    background: white;
}


body {
    background: #000;
}




.galaxy-background {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;

    overflow: hidden;

    z-index: -10;
    pointer-events: none;

    filter: contrast(115%) saturate(130%);

    background:
        radial-gradient(
            ellipse at 20% 30%,
            rgba(255, 255, 255, 0.18),
            transparent 45%
        ),

        radial-gradient(
            ellipse at 80% 65%,
            rgba(255, 255, 255, 0.15),
            transparent 45%
        ),

        radial-gradient(
            ellipse at 50% 100%,
            rgba(255, 255, 255, 0.1),
            transparent 50%
        ),

        #020205;
}


.galaxy-nebula {
    position: absolute;

    width: 140%;
    height: 140%;

    left: -20%;
    top: -20%;

    background:
        radial-gradient(
            ellipse at 30% 40%,
            rgba(255, 255, 255, 0.13),
            transparent 25%
        ),

        radial-gradient(
            ellipse at 70% 55%,
            rgba(255, 255, 255, 0.1),
            transparent 30%
        ),

        radial-gradient(
            ellipse at 45% 75%,
            hsla(0, 0%, 100%, 0.08),
            transparent 25%
        );

    filter: blur(35px);

    animation:
        nebulaDrift 35s ease-in-out infinite alternate;
}


@keyframes nebulaDrift {

    from {
        transform:
            translate(-2%, -2%)
            scale(1);
    }

    to {
        transform:
            translate(3%, 2%)
            scale(1.08);
    }

}



.stars {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    background-repeat: repeat;
}




.stars-small {

    background-image:

        radial-gradient(
            white 0.6px,
            transparent 0.8px
        );

    background-size:
        17px 17px;

    opacity: 0.35;

    animation:
        starDrift 120s linear infinite;
}



.stars-medium {

    background-image:

        radial-gradient(
            white 1px,
            transparent 1.5px
        );

    background-size:
        73px 73px;

    background-position:
        20px 30px;

    opacity: 0.55;

    animation:
        starDrift 80s linear infinite;
}



.stars-large {

    background-image:

        radial-gradient(
            circle,
            rgba(255,255,255,1) 0px,
            rgba(255,255,255,0.8) 1px,
            rgba(170,190,255,0.25) 2px,
            transparent 4px
        );

    background-size:
        190px 190px;

    background-position:
        45px 70px;

    opacity: 0.75;

    animation:
        starDrift 55s linear infinite,
        starTwinkle 4s ease-in-out infinite alternate;
}

@keyframes starDrift {

    from {
        transform:
            translateY(0);
    }

    to {
        transform:
            translateY(-100px);
    }

}


@keyframes starTwinkle {

    0% {
        opacity: 0.35;
    }

    50% {
        opacity: 0.9;
    }

    100% {
        opacity: 0.55;
    }

}

/* =========================================
   LANDING / ENTER PAGE
   ========================================= */

.landing-page {

    margin: 0;

    width: 100vw;
    height: 100vh;

    overflow: hidden;

    background: black;

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

    font-family: "PixelOperator", monospace;
}


.enter-container {

    text-align: center;

}


.enter-title {

    color: white;

    font-size: 60px;

    letter-spacing: 8px;

    margin-bottom: 40px;

}


.enter-button {

    color: white;

    font-size: 24px;

    text-decoration: none;

    cursor: pointer;

}


.enter-button:hover {

    text-decoration: underline;
}



#paw-particles {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;

    pointer-events: none;

    z-index: 0;
}



.enter-screen {
    position: fixed;
    inset: 0;

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

    z-index: 2;
}


.enter-link {
    font-family: "PixelOperator", monospace;

    color: white;

    font-size: 22px;
    letter-spacing: 5px;

    text-decoration: none;
}


.enter-link:hover {
    text-shadow:
        0 0 5px white,
        0 0 15px white;
}

/* =========================================
   CLICKABLE LANDING PAGE
   ========================================= */

body.landing-page {
    margin: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    cursor: pointer;
}




.tv-transition {
    position: fixed;
    inset: 0;
    z-index: 99999;

    pointer-events: none;

    display: flex;
    flex-direction: column;
}

.tv-top,
.tv-bottom {
    width: 100%;
    height: 50%;

    background: black;

    transform: scaleY(0);

    transition:
        transform 0.7s
        cubic-bezier(0.76, 0, 0.24, 1);
}


/* top half grows upward */

.tv-top {
    transform-origin: top;
}


/* bottom half grows downward */

.tv-bottom {
    transform-origin: bottom;
}


/* activate transition */

body.entering .tv-top,
body.entering .tv-bottom {
    transform: scaleY(1);
}

/* =========================================
   CRT ENTER TRANSITION
   ========================================= */

body.landing-page {
    margin: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}


/* Everything visually collapses */

body.landing-page::after {
    content: "";

    position: fixed;
    left: 50%;
    top: 50%;

    width: 0;
    height: 2px;

    background: white;

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

    z-index: 999999;

    opacity: 0;

    pointer-events: none;
}


/* Collapse the actual page */

body.crt-closing > * {
    animation:
        crt-collapse 0.55s
        cubic-bezier(0.7, 0, 0.3, 1)
        forwards;
}


/* White CRT line */

body.crt-closing::after {
    animation:
        crt-line 0.75s
        ease-out
        forwards;
}


@keyframes crt-collapse {

    0% {
        transform: scaleY(1);
        filter: brightness(1);
        opacity: 1;
    }

    70% {
        transform: scaleY(0.015);
        filter: brightness(2);
        opacity: 1;
    }

    100% {
        transform: scaleY(0);
        filter: brightness(4);
        opacity: 0;
    }

}


@keyframes crt-line {

    0% {
        width: 0;
        opacity: 0;
    }

    35% {
        width: 100vw;
        opacity: 1;
    }

    70% {
        width: 100vw;
        opacity: 1;
    }

    100% {
        width: 0;
        opacity: 0;
    }

}