* { margin: 0; padding: 0; box-sizing: border-box; }

body { background: #090B17; color: #ffffff; font-family: 'Inconsolata', monospace; font-size: 15px; line-height: 1.65; }

a { color: #C8DBDB; text-decoration: none; }
a:hover { color: #5ecfcf; text-decoration: none; }

header { border-bottom: 1px solid #141e30; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
nav { display: flex; align-items: center; font-size: 15px; flex-wrap: wrap; }
nav .sep { color: #256969; margin: 0 8px; user-select: none; }
.sitename { font-size: 16px; font-weight: 700; color: #5ecfcf; font-style: italic; text-decoration: none; position: relative; display: inline-block; }

main { max-width: 620px; margin: 0 auto; padding: 52px 24px 80px; }
footer { margin-top: 48px; font-size: 12px; color: #1e3048; }

h1 { font-size: 28px; font-weight: 900; color: #5ecfcf; font-style: italic; margin-bottom: 20px; }
h2 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #5ecfcf; margin: 28px 0 10px; }
h3 { font-size: 12px; min-width: 64px; color: #37A1A1; }
p { color: #C8DBDB; font-size: 14px; margin-bottom: 12px; }
hr { border: none; border-top: 1px solid #0C2E2E; margin: 32px 0; }

.contactbox { display: flex; gap: 12px; margin-bottom: 6px; font-size: 14px; align-items: baseline; }
.contact { color: #7C8F8F; }
.contact a { color: #7C8F8F; }
.contact a:hover { color: #C8DBDB; }

.buttons-label { font-size: 12px; color: #516969; margin-bottom: 8px; }
.buttons-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.buttons-grid a img { transition: transform 0.3s; }
.buttons-grid a:hover img { transform: scale(1.05); }

.sitename, .glitch { position: relative; display: inline-block; }
.sitename::before, .glitch::before { content: attr(data-glitch); position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; white-space: nowrap; color: #ff2d55; animation: glitch-r 0.9s infinite, glitch-r2 1.7s infinite 0.3s; }
.sitename::after, .glitch::after { content: attr(data-glitch); position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; white-space: nowrap; color: #00ffff; animation: glitch-c 1.1s infinite 0.15s, glitch-c2 1.4s infinite 0.6s; }
@keyframes glitch-r { 0%, 75%, 100% { opacity: 0; transform: none; clip-path: none; } 76% { opacity: 0.9; transform: translate(-3px, 0) skewX(-2deg); clip-path: polygon(0 15%, 100% 15%, 100% 35%, 0 35%); } 78% { opacity: 0.9; transform: translate(2px, 0); clip-path: polygon(0 55%, 100% 55%, 100% 70%, 0 70%); } 80% { opacity: 0.9; transform: translate(-1px, 0); clip-path: polygon(0 80%, 100% 80%, 100% 95%, 0 95%); } 82% { opacity: 0; } }
@keyframes glitch-r2 { 0%, 80%, 100% { opacity: 0; transform: none; clip-path: none; } 81% { opacity: 0.7; transform: translate(3px, 1px) skewX(3deg); clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%); } 84% { opacity: 0; } }
@keyframes glitch-c { 0%, 78%, 100% { opacity: 0; transform: none; clip-path: none; } 79% { opacity: 0.9; transform: translate(3px, 0) skewX(1deg); clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%); } 81% { opacity: 0.9; transform: translate(-2px, 0); clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%); } 83% { opacity: 0; } }
@keyframes glitch-c2 { 0%, 82%, 100% { opacity: 0; transform: none; clip-path: none; } 83% { opacity: 0.8; transform: translate(-3px, -1px); clip-path: polygon(0 65%, 100% 65%, 100% 85%, 0 85%); } 85% { opacity: 0.8; transform: translate(2px, 0); clip-path: polygon(0 10%, 100% 10%, 100% 25%, 0 25%); } 87% { opacity: 0; } }