/* * A mix of modern (Tailwind, CSS variables) and retro (pixel fonts, noisy backgrounds)
 * to capture the classic web spirit with modern sensibilities.
 */
:root {
    --font-pixel: 'VT323', monospace;
    --font-comic: 'Comic Neue', cursive;
    --font-special: 'Manufacturing Consent', static;
    --color-primary: #00aaff; /* Bright Blue */
    --color-secondary: #FF00FF; /* Magenta */
    --color-accent: #00ff62; /* Bright Green */
    --color-bg: #000000;
    --color-text: #FFFFFF;
}

body {
    background-color: var(--color-bg);
    background-image: url("https://blob.gifcities.org/gifcities/JYWHBJYQNUPWPB2W2IK4HMZERX6TKI6O.gif");
    font-family: var(--font-pixel);
    color: var(--color-text);
    font-size: 18px;
}

.font-comic {
    font-family: var(--font-comic);
}
.font-special {
    font-family: var(--font-special);
}

/* 3D border effect for that classic "button" look */
.panel {
    border: 3px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    background-color: #833d7265;
    color: #000;
}

.panel-inset {
    border: 3px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    background-color: #ffffff8e;
    color: #000;
}

.panel-title {
    background-color: var(--color-primary);
    color: var(--color-text);
    padding: 2px 4px;
    font-weight: bold;
    display: inline-block;
}

/* Blinking text effect */
@keyframes blink {
    50% { opacity: 0; }
}
.blink {
    animation: blink 1s step-start 0s infinite;
}

/* Ensure GIFs don't break layout */
img {
    max-width: 100%;
    height: auto;
}

/* Horizontal Navigation Bar */
.top-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 5px;
    background-color: #c0c0c0;
    border: 3px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
}
.top-nav a {
    text-decoration: none;
    color: #000;
    font-weight: bold;
    padding: 1px 60px;
    border: 1px outset #c0c0c0;
    background-color: #c0c0c0;
    box-shadow: 2px 2px 2px #808080;
}
.top-nav a:active {
    border-style: inset;
    box-shadow: none;
}


/* Status.Cafe styling */
#statuscafe {
    padding: .5em;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}


/* Seamless Scrolling Banner */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.scrolling-banner {
    width: 100%;
    overflow: hidden;
    padding: 8px 0;
}

/* ID selector (#) used to correctly target the element */
#scrolling-banner-inner {
    display: flex;
    /* Explicitly set width to prevent wrapping and ensure correct calculation */
    width: fit-content;
    gap: 10px;
    /* Add padding to the right to match the gap, ensuring seamless loop */
    padding-right: 15px;
    /* The animation duration is set dynamically in JS based on content width */
    animation: scroll 60s linear infinite;
}

.scrolling-banner:hover #scrolling-banner-inner {
    animation-play-state: paused;
}

.scrolling-banner img {
    height: 31px; /* Standard 88x31 button height */
    width: auto;
    max-width: none; /* Override default responsive image behavior */
}


.scrollings {
  animation: marquee var(--marquee-speed) linear infinite;
  display: flex;
}

        .scrollings img {
            width: 88px;
            height: 31px;
            margin-right: 20px;
        }

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to { 
    transform: translateX(-100%);
  }
}

.scrolling-banner:hover .scrollings {
  animation-play-state: paused;
}


/* Blog Post Content Area - NEW */
.blog-post-content {
    max-height: 300px; /* Adjust as needed */
    overflow-y: auto;
    padding-right: 10px; /* To prevent scrollbar from overlapping content */
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: var(--color-primary) #ffffff8e; /* For Firefox */
}

/* Custom scrollbar for Webkit browsers (Chrome, Safari) */
.blog-post-content::-webkit-scrollbar {
    width: 8px;
}

.blog-post-content::-webkit-scrollbar-track {
    background: #ffffff8e;
    border-radius: 4px;
}

.blog-post-content::-webkit-scrollbar-thumb {
    background-color: var(--color-primary);
    border-radius: 4px;
    border: 2px solid #ffffff8e;
}