@font-face {
            font-family: "MC";
            src: url("https://404-city.github.io/neocities-assets/Minecraftia_regular.woff2") format("woff2");
            font-display: swap;
            font-weight: bold;
        }
        @font-face {
            font-family: "MC";
            src: url("https://404-city.github.io/neocities-assets/Minecraftia_bold.woff2") format("woff2");
            font-display: swap;
            font-weight: bold;
        }
        @font-face {
            font-family: "PS2P";
            src: url("https://404-city.github.io/neocities-assets/PressStart2P.ttf") format("truetype");
            font-display: swap;
        }
        /*====================GENERAL STYLING====================*/
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
.no-break {
  white-space: nowrap;
}

       .crop-container img {
      rotate: y 180deg;
           transform: scale(1.2);
    position: relative;
    left: 75px;
         top: -25px;
          z-index: 2;
}

        html, body {
            width: 100%;
            min-height: 100%;
            min-width: 320px;
            font-family: 'MC', monospace;
            line-height: 1.25;
            cursor: default;
            -webkit-text-size-adjust: none;
            color: #000000;
        }
        body {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            align-items: center;
            padding: 0.75rem;
            padding-bottom: 6rem;
            min-height: 100vh;
        }
        html::before {
            content: "";
            position: fixed;
            inset: 0;
            z-index: -9999;
  background: url(https://files.catbox.moe/9ioqrw.gif) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;;
          filter: blur(15px);
           box-shadow: inset 0 0 70px 5px #860b93;
     
  
        }
.status {
    font-size: 1.2em;
    max-height: none; /* Removed the 200px limit that was squishing content */
}
        /*====================LAYOUT====================*/
        header, .contentRow {
            width: 100%;
            max-width: 1200px;
        }

        /* Content row: Left sidebar | (Navigation + Main stacked) | Right sidebar.
            Sidebars stretch (default align-items) to match the combined height
            of the middle column. */
.imageGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.375rem;
    width: 100%;
    padding: 0.25rem;
}

.imageGrid img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #e6d;
    box-shadow: 0.125rem 0.125rem #00f5;
}

.imageGrid a {
    display: block;
    line-height: 0; /* removes the inline-image whitespace gap under each thumbnail */
}

.imageGrid a:hover img {
    filter: brightness(1.1);
}
        .contentRow {
            display: flex;
            gap: 0.75rem;
        }

        /* Middle column: Navigation on top, Main/About below, stacked. */
        .middleCol {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            flex: 2;
        }

        main {
            display: flex;
            gap: 0.75rem;
        }

        aside {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }
        aside.left, aside.right {flex: 1;}
        aside.mid {flex: 1;}


        section, footer, nav, .glass {
            padding: 0.1875rem;
            border: 3px double #90289b;
            display: flex;
            flex-direction: column;
            gap: 0.1875rem;
            background: linear-gradient(#ecb8f2, #fdf);
            box-shadow: 0.25rem 0.25rem #e6d;
        }

        article {
            border: 1px solid #e6d;
            background: linear-gradient(160deg, #f9d3fff9d3ff, #2);
            padding: 0.25rem;
            flex: 1;
            display: flex;
            flex-direction: column;
            box-shadow: inset 0.125rem 0.125rem #e6d;
        }
        .nav {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            width: 100%;
            gap: 0.125rem;
            .button {font-style: normal;}
        }
        header {
            padding: 1rem 0 0;
            user-select: none;
            line-height: 1.25;
            font-family: "PS2P", monospace;
            gap: 1rem;
            font-size: 5.2rem;
            text-align: center;
            color: #fff;
            font-weight: bold;
            text-shadow: 1px 1px #e6d, -1px -1px #e6d, -1px 1px #e6d, 1px -1px #e6d, 0.05em 0.05em #e6d, 0 0 0.05em #e6d
        }
        footer {
            background: linear-gradient(90deg, #cd21e0, #cd21e0, #fdf);
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            border: 3px solid white;
            display: flex;
            justify-content: space-between;
            flex-direction: row;
            flex-wrap: wrap;
            padding: 0.25rem;
            margin: 0;
            z-index: 100;
        }
        .footerButtons {
            gap: 0.125rem;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
.footerNote {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.scroll-track {
    display: inline-flex;
    width: max-content;
    animation: scroll-seamless 15s linear infinite;
}

.scroll-track:hover {
    animation-play-state: paused;
}

.scroll-item {
    display: inline-block;
    white-space: nowrap;
    padding-right: 4rem; /* gap between repeats — increase/decrease to taste */
    flex-shrink: 0;
}

@keyframes scroll-seamless {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0%); }
}
.status-container {
    position: relative;
    width: 100%;
    min-height: 340px;
}
.status{
  max-height: 200px;
}
        ul {list-style: none;}
        li::before {content: "- ";}
        a {
            color: #e7d;
            text-decoration: underline;
            cursor: pointer;
            font-style: italic;
        }
        a:hover {color: #70f;}
        hr {
            border-top: 1.5px dashed #e7d;
            margin: 0.25rem 0.25rem 0.5rem;
        }
        h1 {
            text-align: center;
            font-size: 1.2rem;
            padding: 0.5rem 0.25rem 0.25rem;
            font-family: "PS2P", monospace;
            font-weight: normal;
            word-spacing: -0.5em;
            color: white;
            text-shadow: 1px 1px #a6d, -1px -1px #a6d, -1px 1px #a6d, 1px -1px #a6d, 0.1875rem 0.1875rem #a6d;
            margin-bottom: 0.5rem;
        }
        h2 {
            font-size: 1rem;
            font-weight: normal;
            background: linear-gradient(90deg, #e7d, #ecb8f2);
            border: 1px solid #007;
            color: #a6d;
            padding: 0.25rem 0.375rem;
            position: relative;
            user-select: none;
        }
        h2::after {
            content: "";
            position: absolute;
            width: 4.75rem;
            height: 1.5rem;
            top: 0.125rem;
            right: 0.125rem;
            background: url("https://404city.neocities.org/layouts/assets/ddnl2-layout/windowButton.png");
            background-size: cover;
        }
        h3 {
            font-size: 1rem;
            font-weight: normal;
            padding: 0.25rem 0.375rem 0.125rem;
            background: linear-gradient(90deg, #ecb8f2, #fff);
            color: #fff;
            border: 1px solid;
            border-image: linear-gradient(90deg, #007, #ecb8f2) 1;
            margin: 0.25rem;
            box-shadow: 0.125rem 0.125rem #00f5;
        }
        h4 {
            font-size: 1rem;
            font-weight: bold;
            padding: 0.25rem 0.375rem 0.125rem;
            background: #ecb8f2;
            font-style: italic;
            border: 1px dashed #00f;
            margin: 0.25rem;
            box-shadow: 0.125rem 0.125rem #00f5;
        }
        textarea {
            resize: none;
            padding: 0.625rem;
            font-family: 'MC', monospace;
            font-size: 1rem;
            background: #ecb8f2;
            border: 1px solid #007;
            box-shadow: inset 0.125rem 0.125rem #00f5;
            margin: 0.0625rem;
            color: #060035;
        }
        /*====================BUTTONS====================*/
        button {all: unset;}
        .button, button {
            font-size: 1rem;
            padding: 0.5rem;
            text-align: center;
            text-decoration: none;
            user-select: none;
            cursor: pointer;
            border: 1px solid #e5b6ea;
            background: linear-gradient(135deg, #fff, #ccf);
            margin: 0.125rem;
            box-shadow: 0.125rem 0.125rem #00f5;
        }
        .button:hover, button:hover {
            background: #ccf;
            text-decoration: underline;
            color: #00f;
        }
        .button:active, button:active {
            background: #bbf;
            box-shadow: inset 0.125rem 0.125rem #00f5;
        }
        /*====================CHAT BUBBLE STATUS TEXT====================*/
        /* Forcing the box to a fixed rectangle (flex: 1 1 80% + 100%x100%
            image) was leaving empty transparent space around the bubble
            art whenever its aspect ratio didn't match that rectangle —
            making it look "small" and leaving the centered text sitting
            over blank space above the actual drawn bubble instead of on
            top of it. Fix: let the wrapper shrink-wrap to the image's own
            natural aspect ratio at a fixed height (matches dolchar's
            170px box), so the box IS the bubble with no dead space, and
            center the text with flex so it always lands in the middle of
            that same box/art. */
.top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}
        .chatBubbleWrap {
          left: 46px;
    transform: scale(1.8); /* Reduced scale slightly so it fits inside the container */
    transform-origin: top left;
          white-space: nowrap;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    overflow: visible;
          z-index: 3;
}

.clockheader{
    position:absolute;

    left:19%;
    bottom:175px;

    transform:translateX(-50%);

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

    z-index:2;
}

.clockheader p{
    margin:0 0 0px;
    font-size:16px;
    text-align:center;
}

.clock{
    transform:scale(1.2);
    transform-origin:top center;
    margin:0;
}
.musicplayer{
  z-index: 1;
    position:absolute;

    left:48%;
    bottom:10px;

    transform:translateX(-50%) scale(1.3);
    transform-origin:center bottom;

    width:274px;
    height:136px;

    border:0;
    overflow:hidden;
    z-index:1;
}
.bubbleContent {
    position: absolute;
    top: 15%;
    left: -20%;
    right: 38%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    z-index: 2;
    /* no overflow:hidden, no bottom bound — let content size naturally */
}

        .chatBubbleImg {
       transform: scale(2); 
            display: block;
          overflow: visible;
            height: 100%;
            width: auto;
            max-width: 100%;
            object-fit: contain;
        }
        .chatBubbleText {
    margin: 0;
    padding: 0 0.5rem;
    text-align: center;
    font-size: 0.6rem;
    line-height: 1.15;
    color: #000;
}
.imoodtext {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

#statuscafe {
    padding: 0.15em;
    max-width: 100%;
    text-align: center;
}

#statuscafe-username {
    margin-bottom: 0.2em;
    font-size: 0.57rem;   /* sized directly instead of via scale() */
}

#statuscafe-content {
    margin: 0 0.5em;
    font-size: 0.67rem;    /* small because it'll get visually enlarged
                              ~3.6x by the parent transforms */
    line-height: 1.1;
    word-break: break-word;
    overflow-wrap: anywhere;
}

        /*====================RESPONSIVE====================*/
        @media (min-width: calc(1201px + 3rem)) {aside.mid p {text-align: justify;}}
        @media (max-width: 1000px) {h1 {font-size: 1.75rem;}}
        @media (max-width: 768px) {
            html {font-size: clamp(14px, 4vw, 18px);}
            main {flex-direction: column;}
            .contentRow {flex-direction: column;}
            .nav {grid-template-columns: 1fr 1fr;}
            header {font-size: calc(max(100vw, 320px) * 0.13);}
            h1 {font-size: 2rem;}
        }
        /*====================SCROLLBARS====================*/
        ::-webkit-scrollbar {width: 1rem;}
        ::-webkit-scrollbar-track {
            background: #ecb8f2;
            cursor: default;
            border-left: 1px solid #00f;
            box-shadow: inset 0.125rem 0.125rem #e5b6ea;
        }
        ::-webkit-scrollbar-thumb {
            border-left: 1px solid #00f;
            box-shadow: 0 1px #00f, 0 -1px #00f, 0 0.1875rem #00f3;
            background: #e5b6ea;
            cursor: default;
        }
        ::-webkit-scrollbar-thumb:hover {background: #aaf;}
        ::-webkit-scrollbar-thumb:active {box-shadow: 0 1px #00f, 0 -1px #00f, inset 0.125rem 0.125rem #00f3;}