body {
    background-color: #000000;
    color: #fdfaf1;
    font-family: 'Space Mono', monospace;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.pixel-font {
    font-family: 'DotGothic16', sans-serif;
}

.inter-font {
    font-family: 'Inter', sans-serif;
}

.halftone-bg {
    background-image: radial-gradient(circle, #fdfaf1 1px, transparent 1px);
    background-size: 6px 6px;
    mask-image: radial-gradient(circle, black 40%, transparent 100%);
}

.halftone-star {
    position: absolute;
    width: 400px;
    height: 400px;
    background-image: radial-gradient(circle, #fdfaf1 1.5px, transparent 1.5px);
    background-size: 5px 5px;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    opacity: 0.4;
    z-index: 0;
}

.halftone-star-alt {
    position: absolute;
    width: 300px;
    height: 300px;
    background-image: radial-gradient(circle, #fdfaf1 1px, transparent 1px);
    background-size: 4px 4px;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    opacity: 0.3;
    z-index: 0;
}

.ascii-container {
    font-family: 'Courier New', Courier, monospace;
    line-height: 1;
    letter-spacing: 0;
    white-space: pre;
    text-align: center;
    font-size: 10px;
}

.brutalist-border {
    border: 1px solid #fdfaf1;
}

.scanline {
    width: 100%;
    height: 2px;
    background: rgba(253, 250, 241, 0.05);
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 100;
    animation: scanline 10s linear infinite;
}

@keyframes scanline {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100vh); }
}

.dither-overlay {
    position: fixed;
    inset: 0;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpi2r9//38gYGAEESAAEGAAas8E96j9pMAAAAAASUVORK5CYII=');
    background-repeat: repeat;
    opacity: 0.1;
    pointer-events: none;
    z-index: 50;
}

.marquee {
    white-space: nowrap;
    overflow: hidden;
    display: flex;
}

.marquee-content {
    display: flex;
    animation: marquee 20s linear infinite;
}

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

.hover-invert:hover {
    background-color: #fdfaf1;
    color: #000000;
}

::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #000;
}
::-webkit-scrollbar-thumb {
    background: #fdfaf1;
}