/* Konami Code Retro easter egg Toggled by adding/removing the .retro-mode class on . See retro-easter-egg.js for the trigger logic. */ @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); body.retro-mode { font-family: 'Press Start 2P', monospace !important; font-size: 90% !important; line-height: 220%; background: #000 !important; color: #fff !important; animation: crt-flicker 0.15s infinite; transition: background 0.3s ease; } /* This site wraps its content in a viewport-anchored #container (position:fixed; inset:0;) with its own opaque background - see jessjon.es/main.css - which paints on top of body and fully hides body's own background regardless of retro-mode. Overriding it here too, and putting the brightness/contrast filter at this level rather than on body, keeps `filter` off body (avoiding the containing-block issue from before) while still visually affecting the actual page content. Site-specific - remove this block if reusing this file elsewhere. */ body.retro-mode #container { background: #000 !important; filter: brightness(1.1) contrast(1.3); } body.retro-mode input, body.retro-mode textarea { background: #282828 !important; color: #ccc !important; border: 1px solid #fff !important font-size: 100% !important; } body.retro-mode textarea.contact { width: 525pt; } body.retro-mode form label { width: 220pt !important; } body.retro-mode * { /*text-shadow: 0 0 1px rgba(204, 204, 204, 0.8), 0 0 6px rgba(204, 204, 204, 0.6);*/ text-shadow: 0 0 6px rgba(204, 204, 204, 0.7); } body.retro-mode span.err { color: #f66; text-shadow: 0 0 6px rgba(204, 0, 0, 0.7); } body.retro-mode a { } body.retro-mode img, body.retro-mode video { filter: grayscale(1) sepia(1) hue-rotate(60deg) saturate(3); opacity: 0.85; } body.retro-mode code { display: inline-block; font-size: 110%; background-color: #333; } /* Scanlines */ body.retro-mode::before { content: ""; position: fixed; inset: 0; background: repeating-linear-gradient( 0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15) 1px, transparent 1px, transparent 2px ); pointer-events: none; z-index: 99998; } /* Vignette */ body.retro-mode::after { content: ""; position: fixed; inset: 0; background: radial-gradient(ellipse at center, transparent 80%, rgba(0, 0, 0, 0.75) 100%); pointer-events: none; z-index: 99999; } @keyframes crt-flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.985; } }