@font-face {
  font-family: "Share Tech Mono";
  src: url("/fonts/sharetechmono-regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Symbols Nerd Font Mono";
  src: url("/fonts/symbolsnerdfontmono-regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Cascadia Mono";
  src: url("/fonts/cascadiamono-regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

:root {
  --text-color: light-dark(rgb(0 0 0), rgb(255 255 255));
  --back-color: light-dark(rgb(255 255 228), rgb(0 0 0));
  --nav-back-color: light-dark(rgb(0 0 0 / 9%), rgb(255 255 228 / 9%));
  --nav-text-color: light-dark(rgb(40 76 114), rgb(122 203 22));
  --dots-mask-start: light-dark(rgb(40 114 104), rgb(122 203 22));
  --dots-mask-end: light-dark(rgb(40 76 114), rgb(249 32 201));
  --dots-mask: linear-gradient(135deg,
      var(--dots-mask-start) 25%,
      var(--dots-mask-end) 75%);
  --dots-font: "Cascadia Mono", monospace;
  --dots-size: calc(100vh / 63);

  color-scheme: light dark;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow: hidden;

  width: 100vw;
  height: 100vh;

  display: flex;
  flex-direction: column;

  margin: 0;

  font-family: "Share Tech Mono", Arial, system-ui;
  color: var(--text-color);
  background-color: var(--back-color);
}

main {
  flex: 1;
  min-height: 0;

  display: flex;
  flex-direction: column;
}

header,
main,
footer {
  margin-left: 10vw;
  z-index: 10;
}

header {
  margin-top: calc(var(--dots-size) * 8);
}

footer {
  margin-bottom: calc(var(--dots-size) * 8);
}

pre {
  font-size: 1em;
  line-height: 0.85em;
}

#background {
  position: absolute;
  overflow: hidden;
  z-index: 1;

  width: fit-content;
  height: fit-content;

  background: var(--dots-mask);
  background-clip: text;
  -webkit-background-clip: text;

  color: transparent;
  -webkit-text-fill-color: transparent;

  font-family: var(--dots-font);
  font-size: var(--dots-size);
  font-style: normal;
  font-weight: 400;

  margin: 0;
}

.icon {
  font-family: "Symbols Nerd Font Mono", system-ui;
  font-weight: 700;
}

#terminal {
  flex: 1;
  width: 50%;
  min-height: 0;

  display: flex;
  flex-direction: column;
}

#stdout {
  width: auto;
  min-height: 0;
  overflow-y: auto;

  display: flex;
  flex-direction: column;

  line-height: 1.5;
  padding-left: 1rem;

  scrollbar-width: thin;
  scrollbar-color: var(--dots-mask-start) rgb(0 0 0 / 0);
  /* bizarrely, this is the way to change the scrollbar position. */
  direction: rtl;
}

#stdout * {
  /* change the direction back for all the content. */
  direction: initial;
}

#stdout p {
  text-align: justify;
}

#stdout table,
#stdout ul,
#stdout p {
  margin: 1em 0px;
}

#stdout li::marker {
  content: "- ";
}

#stdout table {
  border-spacing: 1rem 0;
}

#stdout td {
  vertical-align: top;
  text-align: left;
}

#stdout a {
  text-decoration: none;
}

#stdout a.cmd {
  font-weight: 700;
  color: var(--dots-mask-start);
  text-decoration: none;
}

#stdout a.cmd::after {
  font-family: "Symbols Nerd Font Mono", system-ui;
  color: var(--dots-mask-start);
  content: " \f120";
  font-size: 0.5em;
  vertical-align: super;
}

nav {
  width: 100%;

  display: flex;
  flex-direction: row;
  gap: 1rem;
  justify-content: space-evenly;
}

nav a {
  flex: 1;
  text-align: center;

  color: var(--nav-text-color);
  font-weight: 700;
  text-decoration: none;
}

footer a {
  color: var(--text-color);
  font-weight: 700;
  text-decoration: none;
}

footer a::after,
#stdout a::after {
  font-family: "Symbols Nerd Font Mono", system-ui;
  content: " \f44c";
  font-size: 0.5em;
  vertical-align: super;
}