body, html {
  margin: 0;
  padding: 0;
  font-family: 'Arial', 'DotGothic16', sans-serif, 'Courier New', monospace;
  overflow-x: hidden;
  width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  -webkit-overflow-scrolling: touch;
}


body {
    margin: 0;
    padding: 0;

    display: flex;
    justify-content: center;  /* horizontal centering */
    align-items: flex-start;  /* aligns mainpg from top */
}

.vt323-regular {
  font-family: "VT323", monospace;
  font-weight: 400;
  font-style: normal;
}

.schoolbell-regular {
  font-family: "Schoolbell", cursive;
  font-weight: 400;
  font-style: normal;
}

.doto-style {
  font-family: "Doto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-variation-settings:
    "ROND" 0;
}
.rubik-pixels-regular {
  font-family: "Rubik Pixels", system-ui;
  font-weight: 400;
  font-style: normal;
}

.sixtyfour-normal {
  font-family: "Sixtyfour", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "BLED" 0,
    "SCAN" 0;
}

.homepage-svg {
    position: absolute;
    top: 5vh;
    left: 0;
    width: 100%;
    min-width: 768px;
    height: calc(100% - 1vh);
    object-fit: cover;
    z-index: 1;
    pointer-events: none;

    /* soft fade into top padding */
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 15%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 15%);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
}
/* --------------------------
   Global scrollbars (all scrollable elements)
--------------------------- */
::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

::-webkit-scrollbar-track {
    background: url('/assets/images/gifs/rainbow.gif') repeat;
    background-size: auto;
    border: 2px inset #A0A0A0;
    border-radius: 0;
}

::-webkit-scrollbar-thumb {
    background-color: #C0C0C0;
    border: 2px inset #808080;  /* 3D inset like Windows 95 */
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    border-color: #404040;
}

::-webkit-scrollbar-button {
    background-color: #C0C0C0;
    border: 2px outset #808080;  /* raised button like Win95 */
}

/* --------------------------
   Main page scrollbar (body) — bigger with rainbow peeking
--------------------------- */
/* Main page scrollbar (body) */
body::-webkit-scrollbar {
    width: 24px;   /* bigger track */
    height: 24px;
}

body::-webkit-scrollbar-track {
    background: url('/assets/images/gifs/rainbow.gif') repeat;
    background-size: auto;
    border: 2px inset #A0A0A0;
    border-radius: 0;
}

/* Win95 3D inset thumb */
body::-webkit-scrollbar-thumb {
    background-color: #C0C0C0;        /* gray thumb */
    border: 1px solid #808080;        /* dark outer border */
    box-shadow:
        inset 2px 2px 0 #ffffff,      /* top-left highlight */
        inset -2px -2px 0 #404040;    /* bottom-right shadow */
    border-radius: 0;
    background-clip: content-box;     /* smaller than track for rainbow peek */
    box-sizing: border-box;
}

/* Hover effect */
body::-webkit-scrollbar-thumb:hover {
    box-shadow:
        inset 2px 2px 0 #ffffff,
        inset -2px -2px 0 #303030;    /* slightly darker shadow on hover */
}

/* Arrow buttons */
body::-webkit-scrollbar-button:single-button {
    background-color: #C0C0C0;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #404040;
    border-right: 2px solid #404040;
    display: block;
    height: 12px;
}


body::-webkit-scrollbar-button:single-button:vertical:decrement {
    /* up arrow */
    background: linear-gradient(135deg, #C0C0C0 0%, #A0A0A0 100%);
}

body::-webkit-scrollbar-button:single-button:vertical:increment {
    /* down arrow */
    background: linear-gradient(135deg, #C0C0C0 0%, #A0A0A0 100%);
}

body::-webkit-scrollbar-button:hover {
    border-color: #808080;
}

#home-polaroid-wrapper {
    display: flex;
    flex-direction: row;      /* row layout */
    justify-content: center;  /* center horizontally */
    align-items: flex-start;
    margin-top: 2%;
    gap: 40px;                /* space between Polaroids */
    padding: 20px;
    flex-wrap: nowrap;        /* force all 4 in one line */
}

/* Polaroid */
.polaroid {
    width: 180px; /* adjust if needed */
    text-align: center;
    font-family: 'Overpass Mono', monospace;
}

/* Container to hold everything */
.aboutme-container {
    position: absolute;
    top: 0;
    right: -5%;
    width: 30%;
    height: 150px; /* adjust based on note height */
    display: flex;
    align-items: flex-start; /* top-align the items */
    gap: 0px; /* space between note and arrow */
}

/* About Me Note */
.aboutme-note {
    width: 258px;
    height: 92px;
    background: url('/assets/images/aboutme-note.png') no-repeat center;
    background-size: contain;
}

/* Up Arrow */
.uparrow {
    width: 74px;
    height: 92px; /* same height as note to align nicely */
    background: url('/assets/images/uparrow.png') no-repeat center;
    background-size: contain;
    margin-top: -4%;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

/* Flex container for the two sections */
.home-sections-wrapper {
    display: flex;
    justify-content: flex-start; /* align sections left */
    align-items: flex-start;     /* align top edges */
    gap: 2%;                   /* space between discography and news */
    margin-top: 40px;
    padding: 3%;
    flex-wrap: nowrap;            /* prevent wrapping — always one row */
}

/* Discography on the left */
.discography-wrapper {
    flex: 0 0 45%;               /* take up 45% width exactly */
    max-width: 500px;
    display: flex;
    justify-content: flex-start; /* align content inside wrapper */
}

/* News window on the right */
.news-wrapper {
    flex: 0 0 50%;               /* take up 50% width exactly */
    display: flex;
    justify-content: flex-start; /* align news inside wrapper */
}

.nowplayingbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 37px;
  overflow: hidden;
  z-index: 10;
  padding-top: 5px; /* adds space inside the bar at the top */
  box-sizing: border-box; /* ensures padding doesn’t break height */
  background: rgba(255, 255, 255, 0);
}

/* Outline */
.baroutline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: 0.1px solid rgba(0, 0, 0, 0.2);   /* top line */
  border-bottom: 0.1px solid rgba(0, 0, 0, 0.2); /* bottom line */
  box-sizing: border-box;
}

/* Blue overlay bar */
.barblue {
  position: absolute;
  top: 16.22%;
  left: 0;
  width: 100%;
  height: 67.56%;
  background: rgba(224, 255, 250, 0.6);
}

/* Scrolling text container */
.nowplaying-text {
  position: absolute;
  top: 6px;
  left: 0;
  width: 100%;
  height: 20px;
  overflow: hidden;
  white-space: nowrap;
  font-family: 'DotGothic16', monospace;
  font-size: 14px;
  line-height: 20px;
  color: #000000cc;
  /* Add fade edges using pseudo-elements */
  position: relative;
}

.nowplaying-text::before,
.nowplaying-text::after {
  content: '';
  position: absolute;
  top: 0;
  width: 25vh; /* width of fade */
  height: 100%;
  z-index: 5;
}

.nowplaying-text::before {
  left: 0;
  background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
}

.nowplaying-text::after {
  right: 0;
  background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
}

/* Scrolling content */
.scrolling-content {
  display: inline-block;
  white-space: nowrap;
  padding-left: var(--start-offset, 100%); /* customizable starting position */
  animation: scroll 20s linear infinite;
  animation-play-state: running;
}


.scrolling-content.paused {
    animation-play-state: paused;
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Cloud header container */
.cloud-header {
    position: absolute;
    top: 3%;
    left: 0;
    width: 100%;
    height: 60px; /* default desktop height */
    z-index: 2;    /* behind main panel */
    
    background-image: url('/assets/icons/cloudsimple.gif');
    background-repeat: repeat-x;  /* tile horizontally */
    background-size: auto 100%;   /* scale height to fit container */
    background-position: top left;
}

/* ------------------ Mobile adjustments ------------------ */
@media (max-width: 768px) {
    .cloud-header {
        position: fixed;
        top: 23px;             /* move closer to top on mobile */
        height: 40px;       /* smaller height for mobile */
        background-size: auto 100%; /* maintain scale */
    }
}

.content {
    position: relative;
    min-height: calc(var(--vh) * 100);
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* Main panel */
.mainpg {
    position: relative;
    left: 0%;
    width: 75%;
    min-width: 768px;
    max-width: 1248px;
    min-height: calc(100vh - 200px);
    margin-top: 14vh;
    background: rgba(255,255,255,0.6);
    box-shadow: inset 0px 4px 4px rgba(0,0,0,0.25);
    border-radius: 12px;
    padding: 5vh;
    overflow: visible; /* allow tabs to overlap */
    z-index: 2;
}

.home-contextbox-wrapper {
    position: fixed;       /* fixed keeps it on the left even on scroll */
    top: 24%;            /* adjust distance from top */
    left: 2%;            /* distance from left edge of viewport */
    width: clamp(200px, 18vw, 320px);   /* min 250px, max 350px */
    height: clamp(400px, 80vh, 550px);  /* min 400px, max 550px */
    z-index: 5;            /* above main panel */
    display: flex;         /* for future flexibility */
    justify-content: flex-start;
    align-items: flex-start;
}


.contextbox {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-shadow:
        0 -1px 0 rgba(255,255,255,0.25),
        0 0 6px rgba(0,0,0,0.15);
    border-radius: 8px;
    background: rgba(245,245,245,0.95);
}

.contextbox::before {
    content: "";
    position: absolute;
    inset: 0;                 /* fills the box */
    pointer-events: none;     /* don’t block clicks */

    border: 2px solid rgb(0, 0, 0); /* actual border color */
    filter: blur(4px);        /* blur only affects this border */

    z-index: 4;               /* above background but below content */
}

.contextbox-glass {
    position: absolute;
    inset: 0;

    background: rgba(255, 255, 255, 0.22); /* ↓ less white */
    backdrop-filter: blur(2px);            /* ↓ much softer */
    z-index: 1;
}


.contextbox-bg {
    position: absolute;
    inset: 0;

    background-image: url("/assets/backgrounds/bluecloudbg.jpg");
    background-repeat: repeat;
    background-size: 420px 420px;
    background-position: 0 0;

    animation: cloud-drift 40s linear infinite;
    z-index: 1;
}
/* Animate exactly one tile width */
@keyframes cloud-drift {
    from { background-position: 0 0; }
    to   { background-position: 420px 0; }
}

.contextbox-content {
    position: relative;
    padding: 0px;

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

    z-index: 3;
    overflow-y: auto;
}

.contextbox-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2; /* above clouds, below content */

    background: url("/assets/images/bluestars.gif") no-repeat left bottom;
    background-size: 80% auto;

    /* visual tuning instead of blend mode */
    filter:
        hue-rotate(-20deg)      /* change color if needed */
        brightness(2.15)
        contrast(1.2)
        saturate(1.1);

    opacity: 0.7; /* ✅ 80% visibility */
}

/* About Me overrides */
.contextbox-about {
   position: relative;      /* remove absolute positioning */
    width: 65%;              /* majority of wrapper */
    height: auto;            /* adjust to content */
    min-height: 500px;       /* optional min height */
    transform: none;         /* remove previous translate */
}



.video-section-wrapper {
    z-index: 4;
    display: flex;
    flex-direction: column;   /* stack title and button vertically */
    align-items: center;      /* horizontal centering */   
}
/* Sparkle Titles */
.sparkle-title {
    display: inline-block;
    font-size: clamp(36px, 5vw, 42px);  /* scales from 24px to 42px */
    font-weight: 700;
    line-height: 1;
    margin: 10px 0;
    padding: 0;
    letter-spacing: 2px;
    text-align: center;

    background-image: 
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.55),
            rgba(238, 238, 238, 0.05)
        ),
        url("/assets/backgrounds/glitter.gif");
    background-repeat: repeat;
    background-size: auto 100%;
    background-position: top;

    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;

    filter: grayscale(100%) contrast(1.1);
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.55);
}


.sparkle-wrapper {
    height: 100%;       /* desired cropped height */
    margin-top: 15px;
    overflow: hidden;   /* crops the GIF */
    display: inline-block;
}

/* Contact section wrapper */
.contact-wrapper {
    display: flex;
    justify-content: space-between; /* left and right sides */
    align-items: flex-start;        /* top-align */
    width: 100%;
    max-width: 1248px;              /* optional max-width */
    margin: 0 auto;                 /* center horizontally */
    padding: 40px 20px;             /* some breathing room */
    position: relative;
    gap: 20px;                      /* spacing between left and right */
    box-sizing: border-box;
}

/* Right About Section */
.right-about-section {
    position: relative;
    width: 30%;  /* take up 30% of contact wrapper */
    min-width: 280px; /* prevent too small on mobile */
    display: flex;
    flex-direction: column;
    align-items: center;     /* center content horizontally */
    gap: clamp(15px, 2vw, 25px); /* responsive gap between blocks */
}

/* Each block: title + content */
.right-about-section-block {
    display: flex;
    flex-direction: column;
    align-items: center;    
    gap: clamp(5px, 1vw, 10px);
}

/* Socials row */
.socials-row {
    display: flex;
    flex-direction: row;
    gap: clamp(10px, 3vw, 20px);
    align-items: center;
}

.socials-row img {
    width: clamp(50px, 8vw, 60px);
    height: clamp(50px, 8vw, 60px);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.socials-row img:hover {
    transform: scale(1.1);
}

/* Email content text */
.right-about-content.email {
    font-size: clamp(18px, 2vw, 24px);
    font-family: 'DotGothic16', monospace;
    color: #4fb0ff;
    text-decoration: underline;
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: color 0.3s ease;
}

.right-about-content.email:hover {
    color: #2f7acc;
}


/* Tooltip that appears on click */
.email-tooltip {
    position: absolute;
    top: -25px;             /* above the email text */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.356);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    white-space: nowrap;
    z-index: 10;
}

/* "Click to copy" tooltip for hover */
.email-hover-tooltip {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 12px;
    padding: 3px 6px;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    white-space: nowrap;
    z-index: 9;
}

/* Show hover tooltip when hovering */
.right-about-content.email:hover .email-hover-tooltip {
    opacity: 1;
}

/* Discord button */
.discord-button {
    height: clamp(100px, 12vw, 150px);
    width: auto;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.discord-button:hover {
    transform: scale(1.04);
}
.video-title-wrapper {
    width: 100%;              /* takes full width of parent */
    display: flex;
    flex-direction: row;      /* horizontal layout */
    justify-content: flex-start; /* aligns items to the left */
    align-items: center;      /* vertical centering */
    box-sizing: border-box;   /* include padding/border in width */
    padding-left: 10%;         /* moves all content slightly right */
    padding-bottom: 3px;         /* moves all content slightly right */
}

.video-title-box {
    position: relative;
    background-color: white;
    font-family: 'DotGothic16', monospace;
    font-size: 14px;
    line-height: 20px;
    color: #000;
    padding-inline-start: 4px;
    padding-inline-end: 4px;
    border-radius: 4px;       /* optional */
    text-align: left;
    border: 1px solid;        /* fallback if gradient fails */
    /* Gradient border using border-image */
    border-image: linear-gradient(to right, #d9d9d9, #737373) 1;
    box-sizing: border-box;
}

.videoscreen-wrapper {
    width: 90%;         /* fills the parent context box width */
    max-width: 100%;     /* don’t overflow parent */
    display: block;      /* simple block layout */
    overflow: visible;   /* allows hover effects like shine to extend outside */
}
/* Logo wrapper */
.logo-wrapper {
    position: relative;
    margin-top: 3vw;
    top: 95%;
    transform: translate(0, -50%);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    z-index: 20;
    
}
/* Floating logo */
.logo-overlay {
    width: clamp(
        320px,                         /* iPad portrait floor */
        calc(420px + (100vw - 1020px) * 0.12),
        520px                          /* 1920+ ceiling */
    );
    pointer-events: auto; 
    z-index: 20;
}

.logo-overlay img {
    width: 100%;
    height: auto;
}

.tabs-wrapper {
    position: absolute;
    top: -6.5vh;                /* relative to main panel */
    left: calc(-2% + 0.9vw);
    display: flex;
    align-items: center;
    justify-content: space-between; /* main tabs stick to right */
    height: 60px;
    width: 100%;
    z-index: 100;
    overflow-y: visible;
}

.music-side {
      padding-left: 2vw;
}

.music-tab {
    display: flex;
    align-items: center;
}

.main-tabs {
    display: flex;
    gap: clamp(2.6px, calc(-27.44px + 2.93vw), 28.8px);
    padding-right: clamp(0px, calc(-400px + 31.25vw), 60px); /* responsive “right gap” */
}

/* Tab buttons */
.tab {
    background: none;
    border: none;
    padding: 0px;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    flex: 0 0 auto;
    margin-left: 0px;
    transition: margin 0.2s ease, height 0.2s ease;
    position: relative;
}

.win95-tab {
   display: flex;
    align-items: center;
    gap: clamp(0px, calc(-5.3px + 0.7vw), 8px);
    padding: clamp(2px, 0.8vw, 2px) clamp(2px, 1.5vw, 10px); /* vertical | horizontal */
    height: clamp(40px, 4vw, 48px);       /* responsive height */
    background: #F3F3F3;
    box-shadow:
        inset -2px -2px 0px #262626,
        inset 2px 2px 0px #F0F0F0,
        inset -4px -4px 0px #7E7E7E,
        inset 4px 4px 0px #B1B1B1;
    transition: all 0.2s ease;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.tab-active .win95-tab {
    
    padding: 4px 18px;        /* extra padding to simulate folder */
    transform: translateY(6px); 
    border-top-left-radius: 10px;
    border-top-right-radius: 8px;
    z-index: 12;
}


.tab-icon {
    width: clamp(24px, 3vw, 32px);
    height: clamp(24px, 3vw, 32px);

    flex: 0 0 32px;
    position: relative;
}

.tab-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    position: absolute;
    inset: 0;
}

.icon-static {
    filter: grayscale(100%) brightness(0.85);
    opacity: 0.9;
}

.icon-anim {
    display: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.tab-active {
    margin-right: auto;      
    height: auto;
}

.tab-active .icon-static {
    display: none;
}

.tab-active .icon-anim {
    display: block;
    opacity: 1;
}

.tab-label {
    font-family: 'vt323-regular', 'VT323', monospace;
    font-size: clamp(24px, 2vw, 26px); /* responsive font size */
    line-height: 1.2;
    color: #000;
    padding: 0 clamp(0px, 0.5vw, 4px);
    white-space: nowrap;
}

.win95-tab:hover {
    background: #FAFAFA;
}

.tab-content {
    display: none;   /* hide all by default */
    height: 100%;
}

.tab-content.active {
    display: block;  /* only active tab shows */
}


.bottomrightcorner-gif {
    position: fixed;      /* stays in place even on scroll */
    bottom: 20px;         /* distance from bottom */
    right: 0px;          /* distance from right */
    width: 250px;         /* adjust size */
    height: auto;         /* maintain aspect ratio */
    z-index: 3;         /* make sure it’s above most content */
    pointer-events: none; /* allow clicks through the GIF */
}

.upperrightcorner-gif {
    position: fixed;      /* stays in place even on scroll */
    top: 20px;         /* distance from bottom */
    right: 0px;          /* distance from right */
    width: 250px;         /* adjust size */
    height: auto;         /* maintain aspect ratio */
    z-index: 20;         /* make sure it’s above most content */
    pointer-events: none; /* allow clicks through the GIF */
}

.bottomleftcorner-gif {
    position: fixed;      /* stays in place even on scroll */
    bottom: 20px;         /* distance from bottom */
    right: 0px;          /* distance from right */
    width: 250px;         /* adjust size */
    height: auto;         /* maintain aspect ratio */
    z-index: 20;         /* make sure it’s above most content */
    pointer-events: none; /* allow clicks through the GIF */
}

body.video-open {
    position: fixed;
    width: 100%;
    overscroll-behavior: none;
}

/* ==== MOBILE STYLES ==== */
@media (max-width: 767px) {

 .homepage-svg {
    position: fixed;        /* keeps it on screen as you scroll */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;           /* fill the full viewport */
    min-height: auto;       /* remove fixed min-height */
    object-fit: none;       /* allow tiling instead of scaling */
    background-image: url('/assets/svg/homepage.svg'); /* fallback if needed */
    background-repeat: repeat;      /* repeat both vertically & horizontally */
    background-size: auto;          /* keep original SVG size */
    mask-image: none;               /* remove fading for repeat */
    -webkit-mask-image: none;
  }

 .mainpg {
        width: 90%;          /* fill most of the screen */
        min-width: 0;        /* remove fixed min-width */
        max-width: 100%;     /* never go wider than screen */
        left: 0;
        margin: 100px auto 0;
        border-radius: 8px;  /* optional, looks better on mobile */
        min-height: auto;
        height: auto;
        padding: 5px 10px;  /* reduce padding if needed */
        overflow-x: hidden;  /* prevent horizontal scrolling */
        overflow-y: auto;    /* must allow scrolling */
    }

  .content {
    min-height: auto;
    height: auto;
    display: block;
    overflow-y: auto;    /* allow scrolling */
  }

.tabs-wrapper {
        position: fixed;
        top: 40px;
        left: 0;
        width: 100%; /* safer than 100vw */
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        padding: 5px 10px; /* padding to avoid edges */
        box-sizing: border-box;
        gap: 8px;
        z-index: 999;
        -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
    }

/* Music tab on far left */
.music-side {
    order: 1;               
    flex: 0 0 auto;         
    display: flex;
    align-items: center;
    margin: 0;
    padding-left: 2%;
    margin-top: 4%;

}

/* Logo next to music tab */
   .logo-wrapper {
        position: fixed;              /* stick relative to viewport */
        top: calc(25px + env(safe-area-inset-top)); /* push below notch */
        left: 50%;                    /* center horizontally */
        transform: translateX(-50%);  /* perfect centering */
        flex: 0 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 100;
        margin-left: 0;               /* remove old margin */
    }

       .logo-overlay {
        width: min(53vw, 360px);      /* keep scaling */
        max-height: calc(100vh - env(safe-area-inset-top) - 20px); /* optional: prevent overflow */
    }
/* Main tabs stacked vertically on far right */
.main-tabs {
    order: 3;               
    flex: 0 0 auto;          /* only as wide as the tabs */
    display: flex;
    flex-direction: column;  /* stack vertically */
    margin-left: -30px;        /* push to far right */
    gap: 6px;                
    justify-content: flex-start; /* align top */
    align-items: flex-end;    /* right-align the column */
}


/* Adjust tabs size */
.win95-tab {
    padding: 2px 10px;
    height: auto;
    gap: 0px;
    font-size: clamp(14px, 3vw, 16px);
}

.tab-label {
    font-size: clamp(12px, 2.5vw, 14px);
    white-space: nowrap;
}

.tab-active .win95-tab {
    padding: 6px 12px;
    transform: translateY(4px);

    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
.main-tabs .tab-active .win95-tab {
    padding: 4px 8px;
    transform: translateX(-6px);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    margin-bottom: 0px;
}
.tab-icon {
    width: 24px;
    height: 24px;
}

  .tab-content {
    height: auto;
    min-height: unset;
  }

  .tab-content.active {
    display: block;
  }
  .aboutme-container {
    display: none;
  }
 /* Home sections wrapper: horizontal layout */
  .home-sections-wrapper {
    flex-direction: row;       /* side-by-side */
    flex-wrap: wrap;           /* wrap on very narrow screens */
    justify-content: center;   /* center horizontally */
    gap: 10px;                 /* spacing between sections */
    margin-top: 4px;
  }
    .discography-wrapper {
    flex: 0 0 90%;       /* take up most of the screen width */
    max-width: none;     /* remove the desktop max-width limit */
    margin: 0 auto;      /* center it horizontally */
    justify-content: center; /* optional: center content inside */
  }
  /* Polaroid & context box */
  #home-polaroid-wrapper {
    margin-top: 0%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

.home-contextbox-wrapper {
    position: static;
    width: 90%;           /* almost full screen */
    max-width: 400px;     /* optional cap */
    height: auto;         /* grow with content */
    max-height: 50vh;     /* optional: prevent it from getting too tall */
    margin: 20px auto;
    overflow-y: auto;     /* scroll if content exceeds max-height */
  }

    .right-about-section {
        width: 100%;             /* full width on mobile */
        display: flex;           /* enable flexbox */
        flex-direction: column;  /* stack blocks vertically */
        align-items: center;     /* center content horizontally */
        gap: 20px;               /* spacing between blocks */
        min-width: auto;
    }
    
    .socials-row {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .discord-button {
        height: 120px;
    }

  /* Hide corner GIFs */
  .email-hover-tooltip,
  .contextbox-about,
  .bottomrightcorner-gif,
  .upperrightcorner-gif,
  .bottomleftcorner-gif {
    display: none;
  }

  /* Global adjustments */
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  video,
  svg,
  canvas {
    max-width: 100%;
    height: auto;
  }
}

/* Mobile viewport units fix for iOS Safari */
@supports (-webkit-touch-callout: none) {
  :root {
    --vh: 1svh;
  }

  body {
    position: relative;
    overflow-x: hidden;
  }
}

/* Hide mobile text by default */
.scrolling-content.mobile-text {
  display: none;
}



/* ------------------ Mobile adjustments ------------------ */
@media (max-width: 767px) {
  .nowplayingbar {
    height: 25px;
    padding-top: 3px;
    margin-top: 3px;
    z-index: 1200;
  }

  .nowplaying-text {
    font-size: 11px;
    line-height: 13px;
  }

  .scrolling-content {
    --start-offset: 50%; /* start closer on mobile */
  }

  .nowplaying-text::before,
  .nowplaying-text::after {
    width: 15vw; /* narrower fade edges on mobile */
  }

    .scrolling-content.desktop-text {
    display: none;
  }

  .scrolling-content.mobile-text {
    display: inline-block;
    --start-offset: 50%; /* adjust starting position for mobile */
  }
}

@media (hover: none) and (pointer: coarse) {
  .collapse-btn:hover::after {
    opacity: 0 !important;
  }
}