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

html {
  background: url("/assets/bg.jpg");
  background-attachment: fixed;
  background-size: cover;
  image-rendering: pixelated;
}

a:not(:has(img, div))[target="_blank"]::after {
  content: " ⎘";
}

a:not(:has(img,div))[href^="https://tv.soaos.dev/w/"]::before
{
  content: "📺 ";
}

ul {
  list-style-type: "• ";
}

pre {
  overflow: auto;
}

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

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

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

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

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

.evil-box {
  color: var(--red);
  --glow-color: red;
  animation: glow-box 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;
}

.hidden {
  display: none;
}

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

#badge-grid {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.unselectable {
  user-select: none;
}

.window {
  margin: 1rem;
}

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

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

body {
  margin: auto 0;
  max-width: 800px;
  margin-right: auto;
}

[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  border: 1px solid var(--bg-dim);
  background: var(--fg);
  color: var(--bg-dim);
  display: inline-block;
  white-space: pre-wrap;
  text-align: left;
  padding: 0.3em;
  position: absolute;
  z-index: 98;
}

.flip {
  position: relative;
}

.hidden-selectable {
  opacity: 0;
}

.flip::after {
  display: inline-block;
  position: absolute;
  content: attr(data-title);
  transform: rotateY(180deg);
  clip-path: polygon(0 0, 50.1% 0, 50.1% 100%, 0 100%);
  visibility: visible;
  left: 0;
}

.flip::before {
  display: inline-block;
  position: absolute;
  content: attr(data-title);
  clip-path: polygon(0 0, 50.1% 0, 50.1% 100%, 0 100%);
  visibility: visible;
}

#statuscafe {
padding: .5em;
background-color: var(--button-highlight);
}
#statuscafe-username {
margin-bottom: .5em;
}
#statuscafe-content {
margin: 0 1em 0.5em 1em;
}