/* 90's troll theme. Activated by adding class "nineties" to . */ @keyframes blink-90s { 0%, 49% { visibility: visible; } 50%, 100% { visibility: hidden; } } @keyframes rainbow-90s { 0% { color: #ff0000; } 20% { color: #ff8800; } 40% { color: #ffee00; } 60% { color: #00cc00; } 80% { color: #0066ff; } 100% { color: #cc00ff; } } body.nineties { font-family: "Comic Sans MS", "Comic Sans", cursive, sans-serif; color: #00ff00; background: #000080 url("data:image/svg+xml;utf8,") repeat; cursor: crosshair; } /* Nuke the modern gradient grid overlay. */ body.nineties::before { display: none; } body.nineties .page-shell { width: min(900px, calc(100% - 20px)); border: 6px ridge #c0c0c0; background: #008080; padding: 12px; } /* Kill the smooth fade-in animations; instant 90's snap. */ body.nineties .site-header, body.nineties .hero, body.nineties .section, body.nineties .stats-band { animation: none; } /* Disable glassmorphism. */ body.nineties .hero-copy, body.nineties .feature-card, body.nineties .contact-form, body.nineties .contact-copy, body.nineties .stat-card { -webkit-backdrop-filter: none; backdrop-filter: none; } body.nineties h1, body.nineties h2, body.nineties h3, body.nineties .brand-mark, body.nineties .button { font-family: "Comic Sans MS", "Comic Sans", cursive, sans-serif; letter-spacing: normal; } body.nineties h1 { animation: rainbow-90s 2s linear infinite; text-shadow: 3px 3px 0 #ff00ff; letter-spacing: 0; } body.nineties h2 { color: #ffff00; text-decoration: underline; } body.nineties h3 { color: #00ffff; } body.nineties .eyebrow { color: #ff00ff; animation: blink-90s 1s steps(1) infinite; } body.nineties .lead, body.nineties .section p, body.nineties .contact-copy p, body.nineties label { color: #ffffff; } body.nineties a { color: #ffff00; text-decoration: underline; } body.nineties a:visited { color: #ff80ff; } body.nineties .site-nav a { color: #00ffff; } body.nineties .feature-card, body.nineties .contact-form, body.nineties .contact-copy, body.nineties .stat-card, body.nineties .story-copy, body.nineties .story-panel-box { border: 3px outset #c0c0c0; border-radius: 0; background: #000080; box-shadow: none; } body.nineties .button, body.nineties .button-primary { border: 3px outset #c0c0c0; border-radius: 0; background: #c0c0c0; color: #000000; box-shadow: none; font-weight: bold; } body.nineties .button:active { border-style: inset; } body.nineties input, body.nineties textarea { border: 2px inset #808080; border-radius: 0; background: #ffffff; color: #000000; } body.nineties .stat-value { color: #ffff00; } /* Injected period furniture. */ .nineties-marquee { display: block; margin: 0 0 12px; padding: 6px; border: 3px ridge #ffff00; background: #000000; color: #00ff00; font-family: "Comic Sans MS", cursive, sans-serif; font-weight: bold; white-space: nowrap; overflow: hidden; } .nineties-construction { display: block; margin: 0 auto 12px; text-align: center; color: #ff8800; font-weight: bold; animation: blink-90s 1.2s steps(1) infinite; } .nineties-counter { display: block; margin: 16px auto 0; width: fit-content; padding: 4px 8px; border: 2px inset #808080; background: #000000; color: #00ff00; font-family: "Courier New", monospace; font-weight: bold; letter-spacing: 4px; }