@font-face {
  font-family: 'Silkscreen';
  src: url('../fonts/slkscr.ttf');
}
@font-face {
  font-family: b612_mono;
  src: url(stuff/fonts/B612_Mono/B612Mono-Regular.ttf);
}
@font-face {
  font-family: b612_mono;
  src: url(stuff/fonts/B612_Mono/B612Mono-Bold.ttf);
  font-weight: bold;
}
@font-face {
  font-family: b612_mono;
  src: url(stuff/fonts/B612_Mono/B612Mono-Italic.ttf);
  font-style: italic;
}
@font-face {
  font-family: b612_mono;
  src: url(stuff/fonts/B612_Mono/B612Mono-BoldItalic.ttf);
  font-weight: bold;
  font-style: italic;
}

:root {
  color-scheme: dark light;

  /* Trying to define as few specific colours as possible as generically as possible */
  --background: light-dark(#fff5eb, #1a1a1d);
  --foreground: light-dark(#222, #ddd);
  --accent1: light-dark(#64790a, #ff1159);
  --accent2: light-dark(#007a70, #00ffd5);
  --shadow: #000a;
  --message-red: light-dark(#c00, red);
  --message-green: light-dark(#007500, lime);
  --message-yellow: light-dark(#d3b200, yellow);
  --message-blue: light-dark(#005fbb, dodgerblue);

  --linkcolor: var(--accent1);
  --linkhover: var(--accent2);

  --fg0: var(--foreground);
  --fg1: color-mix(in srgb, var(--foreground) 85%, var(--background) 15%);
  --fg2: color-mix(in srgb, var(--foreground) 75%, var(--background) 25%);
  --fg3: color-mix(in srgb, var(--foreground) 65%, var(--background) 35%);

  --bg0: var(--background);
  --bg1: color-mix(in srgb, var(--background) 93%, var(--foreground) 7%);
  --bg2: color-mix(in srgb, var(--background) 87%, var(--foreground) 13%);
  --bg3: color-mix(in srgb, var(--background) 80%, var(--foreground) 20%);
  --bg00: light-dark(white, black);

  --accentbordercolor: light-dark(var(--accent1), var(--fg0));
}

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
body {
  font-family: b612_mono, monospace;
  color: var(--fg0);
  background-color: var(--bg0);
}
#plant {
  height: 250px;
  width: 250px;
}
a {
  color: var(--linkcolor);
}
a:hover {
  color: var(--linkhover);
}
a#forward, a#back, #hoverme {
  font-family: 'Silkscreen';
  color: white;
  text-decoration: none;
}
#hoverme, #statuscafe ~ #back {
  color: var(--fg0);
}
#hoverme {
  position: absolute;
  top: 4px;
  left: 219px; 
  width: fit-content;
  text-align: right;
}

@media screen and (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .bubblecolumn {
    display: none;
  }
}