/* styles.css */
@charset "UTF-8";
/* Google Fonts import (optional if already linked in HTML) */
/* You can remove this if you’re loading fonts via tags in your HTML */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');
/* Theme variables */
:root{
--pink:#ff68d8;
--pink-light:#ffa3f2;
--purple:#6f2dbd;
--purple-deep:#3b0d7a;
--ink:#f7e8ff;
}
html,body{
height:100%;
margin:0;
color:var(--ink);
background:
radial-gradient(100vmax 80vmax at 15% 15%, rgba(255,104,216,0.25), transparent 60%),
radial-gradient(80vmax 80vmax at 85% 20%, rgba(111,45,189,0.35), transparent 60%),
linear-gradient(180deg, #1a052f, #24083f 40%, #140428);
font-family:"VT323", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
letter-spacing:0.2px;
overflow-x:hidden;
cursor: url('data:image/svg+xml;utf8,\
') 1 1, crosshair;
}
/* CRT scanlines overlay for old-school vibe */
.scanlines::after{
content:"";
position:fixed; inset:0;
background: repeating-linear-gradient(
0deg,
rgba(255, 255, 255, 0.06),
rgba(255, 255, 255, 0.06) 1px,
rgba(0,0,0,0.06) 2px,
rgba(0,0,0,0.06) 3px
);
mix-blend-mode: overlay;
pointer-events:none;
}
.stars{
position:fixed; inset:0; pointer-events:none; overflow:hidden;
background-image: radial-gradient(circle at 10% 20%, rgba(255,255,255,.6) 0 1px, transparent 2px),
radial-gradient(circle at 80% 30%, rgba(255,255,255,.5) 0 1px, transparent 2px),
radial-gradient(circle at 60% 70%, rgba(255,255,255,.7) 0 1px, transparent 2px),
radial-gradient(circle at 30% 80%, rgba(255,255,255,.45) 0 1px, transparent 2px);
background-size: 200px 200px, 260px 260px, 180px 180px, 220px 220px;
animation: twinkle 6s linear infinite;
opacity:.55;
}
@keyframes twinkle { to { background-position: 200px -200px, -260px 260px, 180px -180px, -220px 220px; } }
.wrap{
min-height:100%;
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:2rem; padding:3rem 1rem 6rem;
text-align:center;
position:relative;
}
header h1{
font-family:"Press Start 2P", monospace;
font-size: clamp(1.8rem, 3vw + 1rem, 3rem);
line-height:1.2;
text-shadow: 0 0 6px var(--pink), 0 0 18px var(--purple);
letter-spacing:1.5px;
margin:0.2rem 0 0.6rem;
}
header .tag{
display:inline-block;
padding:0.35rem 0.6rem; border:1px dashed var(--pink-light);
background: linear-gradient(90deg, rgba(255,104,216,.15), rgba(111,45,189,.15));
border-radius:10px;
font-size:1.05rem;
text-shadow:0 0 4px rgba(255,104,216,.45);
}
.marquee {
width:min(900px, 92vw);
overflow:hidden; white-space:nowrap;
border:2px ridge var(--pink-light);
padding:0.35rem 0.5rem; border-radius:12px;
background: linear-gradient(90deg, rgba(255,104,216,.12), rgba(111,45,189,.12));
box-shadow: 0 0 20px rgba(255,104,216,.25), inset 0 0 15px rgba(111,45,189,.25);
font-family:"Press Start 2P", monospace; font-size:0.8rem;
}
.marquee span { display:inline-block; padding-left:100%; animation: scroll 16s linear infinite; }
@keyframes scroll { to { transform: translateX(-100%); } }
.cta{
display:flex; flex-direction:column; gap:1.1rem; align-items:center; justify-content:center;
margin-top:0.2rem;
}
.btn{
--glow: drop-shadow(0 0 6px var(--pink)) drop-shadow(0 0 20px var(--purple));
text-decoration:none; color:var(--ink);
font-family:"Press Start 2P", monospace;
font-size: clamp(0.9rem, 1.2vw + .6rem, 1.1rem);
border:3px double var(--pink-light);
padding:1.1rem 1.4rem; border-radius:16px;
background: linear-gradient(180deg, rgba(255,104,216,.25), rgba(111,45,189,.35));
box-shadow: 0 6px 0 var(--purple-deep), inset 0 0 18px rgba(255,163,242,.25);
filter: var(--glow);
transition: transform .08s ease, box-shadow .08s ease;
position:relative;
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 0 var(--purple-deep), inset 0 0 28px rgba(255,163,242,.35); }
.btn:active{ transform: translateY(2px); box-shadow: 0 3px 0 var(--purple-deep), inset 0 0 18px rgba(255,163,242,.35); }
.tiny-gifs{ display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; opacity:.9; }
.tiny-gifs img{ height:31px; image-rendering: pixelated; }
footer{
position:fixed; left:0; right:0; bottom:0; padding:0.6rem 0.8rem 1rem;
display:flex; align-items:center; justify-content:center; gap:1rem; pointer-events:none;
font-family:"Press Start 2P", monospace; font-size:0.75rem;
}
.pager{
display:flex; align-items:center; gap:.6rem; pointer-events:auto; user-select:none;
background: rgba(20,4,40,.55);
border:2px solid rgba(255,163,242,.35);
padding:.4rem .7rem; border-radius:12px;
box-shadow: 0 0 16px rgba(111,45,189,.35);
}
.arrow{ width:42px; height:42px; display:grid; place-items:center; border-radius:10px; border:2px solid var(--pink-light);
background: linear-gradient(180deg, rgba(255,163,242,.2), rgba(111,45,189,.3)); cursor:pointer;
transition: transform .08s ease; }
.arrow:hover{ transform: translateY(-2px); }
.arrow svg{ width:20px; height:20px; fill:var(--ink); filter: drop-shadow(0 0 6px var(--pink)); }
.pager .hint{ opacity:.9 }
/* Mobile tweaks */
@media (max-width: 520px) {
.tiny-gifs{ display:none; }
footer{ font-size:0.7rem; }
.arrow{ width:38px; height:38px; }
}
/* Accessibility: focus ring */
.btn:focus, .arrow:focus{ outline: 3px dashed var(--pink-light); outline-offset: 3px; }