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

html {
    --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);
}

.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 evilGlow {
  0% {
    text-shadow: 0 0 5px #f00, /* Red glow */
                 0 0 10px #f00,
                 0 0 20px #f00,
                 0 0 40px #8b0000, /* Darker red for depth */
                 0 0 80px #8b0000;
  }
  50% {
    text-shadow: 0 0 10px #f00,
                 0 0 20px #f00,
                 0 0 40px #f00,
                 0 0 80px #8b0000,
                 0 0 120px #8b0000;
  }
  100% {
    text-shadow: 0 0 5px #f00,
                 0 0 10px #f00,
                 0 0 20px #f00,
                 0 0 40px #8b0000,
                 0 0 80px #8b0000;
  }
}

.evil {
    color: var(--red);
    animation: evilGlow 2s infinite alternate;
}

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;
}