@font-face {
    font-family: "JetBrains Mono";
    src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "JetBrains Mono";
    src: url("fonts/JetBrainsMono-Bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

:root {
    color-scheme: light dark;
    --bg: #d7ebfe;
    --text: #10202e;
    --link: #0a4a8a;
    --stroke: #10202e;
    --glow:   rgba(16,32,46,0.35);
    --glow2:  rgba(16,32,46,0.10);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0a0a1a;
        --text: #d7ebfe;
        --link: #7fc3ff;
        --stroke: #b8b0d8;
        --glow:   rgba(184,176,216,0.55);
        --glow2:  rgba(184,176,216,0.15);
    }
}

body {
    max-width: 40rem;
    margin: 3rem auto;
    padding: 0 1.25rem;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    line-height: 1.6;
    background-color: var(--bg);
    color: var(--text);
}

h2 {
    margin-top: 2.5rem;
    margin-bottom: 0.5rem;
}

ul {
    list-style: none;
    padding: 0;
}

li {
    margin: 0.5rem 0;
}

a {
    color: var(--link);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 3px;
}

/* Animation stuff below */

header {
    text-align: center;
    margin-bottom: 3rem;
}

.logo {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto 1rem;
    filter: drop-shadow(0 0 12px var(--glow)) drop-shadow(0 0 36px var(--glow2));
}

.logo::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 240px; height: 240px;
    margin: -120px 0 0 -120px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--glow2) 0%, transparent 70%);
    pointer-events: none;
    animation: glowPulse 6s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.12); }
}

.logo-svg { width: 100%; height: 100%; overflow: visible; }
.logo-svg .el-ring    { fill: none; stroke: var(--stroke); stroke-width: 17.6; }
.logo-svg .el-diamond { fill: none; stroke: var(--stroke); stroke-width: 17.8; }
.logo-svg .el-vline   { fill: none; stroke: var(--stroke); stroke-width: 10; }
.logo-svg .el-dline   { fill: none; stroke: var(--stroke); stroke-width: 13; }

@keyframes neonFlicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
    20%, 24%, 55%                     { opacity: 0.08; }
    21%                               { opacity: 0.38; }
    56%                               { opacity: 0.22; }
}
@keyframes neonFlickerFast {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
    20%, 22%, 24%, 55%                     { opacity: 0.05; }
}

.el-ring    { animation: neonFlicker     5.2s infinite 0.10s; }
.el-diamond { animation: neonFlicker     5.2s infinite 0.40s; }
.el-vline   { animation: neonFlickerFast 3.7s infinite 0.65s; }
.el-dline   { animation: neonFlicker     4.5s infinite 0.25s; }

@media (prefers-reduced-motion: reduce) {
    .logo::before, .el-ring, .el-diamond, .el-vline, .el-dline { animation: none; }
}