html { font-size: 135%; }

body {
    max-width: 72ch;
    margin: auto;
    padding: 1rem;
    background-color: #0d0d0d;
    color: #f0c0cb;
    font-family: monospace;
}

a {
    color: #cc2233;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1 {
    font-size: 2rem;
    letter-spacing: 0.05em;
}

h2 { font-size: 1.6rem; }
h3 { font-size: 1.2rem; }

code {
    background-color: #1a1a1a;
    padding: 0.1rem 0.3rem;
}

.aside {
    font-style: italic;
}

pre {
    background-color: #1a1a1a;
    border-left: 3px solid #cc2233;
    line-height: 1.45;
    padding: 0.5rem;
    overflow-x: auto;
}

.glitch {
    position: relative;
}

.glitch::before,
.glitch::after {
    position: absolute;
    top: 0;
    left: 0;
    content: attr(data-text);
    z-index: 1;
    opacity: 0.7;
}

.glitch::before {
    color: #CC2233;
    animation: glitch-before 1s steps(1) infinite;
}

.glitch::after {
    color: #00CCCC;
    animation: glitch-after 1s steps(1) infinite;
}

@keyframes glitch-before {
    0%  { clip-path: inset(20% 0 60% 0); transform: translate(-1px, 2px); }
    10% { clip-path: inset(5% 0 85% 0);  transform: translate(2px, -1px); }
    20% { clip-path: inset(60% 0 10% 0); transform: translate(-3px, 1px); }
    30% { clip-path: inset(45% 0 30% 0); transform: translate(1px, 2px); }
    45% { clip-path: inset(2% 0 75% 0);  transform: translate(-2px, -2px); }
    55% { clip-path: inset(70% 0 5% 0);  transform: translate(3px, 1px); }
    70% { clip-path: inset(15% 0 50% 0); transform: translate(-1px, -1px); }
    80% { clip-path: inset(88% 0 2% 0);  transform: translate(2px, 2px); }
    90% { clip-path: inset(35% 0 40% 0); transform: translate(-3px, -1px); }
    100%{ clip-path: inset(50% 0 25% 0); transform: translate(1px, -2px); }
}

@keyframes glitch-after {
    0%  { clip-path: inset(82% 0 4% 0);  transform: translate(-3px, 1px); }
    10% { clip-path: inset(32% 0 29% 0); transform: translate(-2px, -2px); }
    20% { clip-path: inset(87% 0 12% 0); transform: translate(2px, -2px); }
    30% { clip-path: inset(76% 0 14% 0); transform: translate(-3px, -2px); }
    45% { clip-path: inset(12% 0 28% 0); transform: translate(-2px, -2px); }
    55% { clip-path: inset(72% 0 7% 0);  transform: translate(3px, 2px); }
    70% { clip-path: inset(29% 0 58% 0); transform: translate(2px, 1px); }
    80% { clip-path: inset(1% 0 98% 0);  transform: translate(-2px, 2px); }
    90% { clip-path: inset(44% 0 18% 0); transform: translate(-2px, -1px); }
    100%{ clip-path: inset(44% 0 7% 0);  transform: translate(-3px, 2px); }
}

@media (prefers-reduced-motion: reduce) {
    .glitch::before,
    .glitch::after {
	animation: none;
    }
}