@font-face {
    font-family: unifont;
    src: url("/assets/UnifontExMono.woff2");
}

:root {
    --red: #e67e80;
    --orange: #e69875;
    --yellow: #dbbc7f;
    --green: #a7c080;
    --blue: #7fbbb3;
    --aqua: #83c092;
    --purple: #d699b6;
    --fg: #d3c6aa;
    --statusline1: #a7c080;
    --statusline2: #d3c6aa;
    --statusline3: #e67e80;
    --gray0: #7a8478;
    --gray1: #859289;
    --gray2: #9da9a0;

    --bg-dim: #232a2e;
    --bg0: #2d353b;
    --bg1: #343f44;
    --bg2: #3d484d;
    --bg3: #475258;
    --bg4: #4f585e;
    --bg5: #56635f;
    --bg-red: #4c3743;
    --bg-visual: #493b40;
    --bg-yellow: #45443c;
    --bg-green: #3c4841;
    --bg-blue: #384b55;
}

body {
    font-family: unifont;
    font-size: 16px;
    color: var(--fg);
    perspective-origin: top left
}

pre, code, samp {
    font-family: unifont;
}

samp {
    color: var(--gray2)
}

.section {
    margin: 1rem;
    padding: 1rem;
}

.horizontal-container {
    display: flex;
    justify-content: space-between;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    text-decoration: underline;
}

h1 {
    font-size: 48px;
}

h2 {
    font-size: 32px;
}

h3 {
    font-size: 16px;
}

.centered {
    text-align: center;
}

.center-content {
    display: flex;
    justify-content: center;
}

.half {
    clip-path: polygon(0 0, 50.1% 0, 50.1% 100%, 0 100%);
}

.flip-x {
    transform: scaleX(-1);
}

.unselectable {
    user-select: none;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.under-construction {
    color: var(--yellow);
    animation: blinker 1s linear infinite;    
}

@keyframes glow {
  50% {
    text-shadow: 0 0 10px var(--glow-color),
                 0 0 20px var(--glow-color),
                 0 0 40px var(--glow-color),
                 0 0 80px hsl(from var(--glow-color) h s calc(l - 10)),
                 0 0 120px hsl(from var(--glow-color) h s calc(l - 10));
  }
}

.evil {
    color: var(--red);
    --glow-color: red;
    animation: glow 4s linear infinite;
}

.holy {
    color: var(--yellow);
    --glow-color: white;
    animation: glow 4s linear infinite;
}

a.evil:visited {
    color: var(--red);
}

a.evil:hover {
    color: red;
}

.inline-block {
    display: inline-block;
}

.no-bullets {
    list-style-type: none;
    padding-left: 0;
}

.red-on-white {
    color: red;
    background-color: white;
}

.hidden {
    display: none;
}

.huge {
    font-size: 128px;
}

.struck {
    opacity: 0.5;
    position: absolute;
    z-index: -999;
    user-select: none;
}

@keyframes pan {
  from {
    background-position: 0 0;
  }
  to {
    background-position: var(--pan);
  }
}

.bold {
    font-weight: bold;
}

.column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Links */
a {
    color: var(--blue);
}

a:visited {
    color: var(--purple);
}