:root {
  --highlight-color: #2B00FF;
  --text-color: #11111b;
  --bg-color: #f7f9f4;

  /* dark mode */
  @media (prefers-color-scheme: dark) {
    --bg-color: #000014;
    --text-color: #f7f9f4;
    --highlight-color: #f7f9f4;
  }
}

@font-face {
  font-family: Pochaevsk;
  src: url(/assets/Pochaevsk/Pochaevsk-Regular.ttf);
}

html {
  margin: 0% 25% 0% 25%;
}

html {
  font-family: Pochaevsk;
  font-size: 150%;
  color: var(--text-color);
  background: var(--bg-color);
  word-wrap: break-word;
}

a {
  text-decoration: none;
  color: var(--highlight-color);
}

a:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
  background: var(--highlight-color);
  color: var(--bg-color);
}

code {
	font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  font-size: 80%;
	background: hsl(220, 13%, 18%);
	color: hsl(220, 14%, 71%);
	border-radius: 0.2em;
}

/* tablet/mobile view */
@media only screen and (max-width: 800px) {
  html {
    margin: 0% 0% 0% 0%;
  }
}

/* dark mode */
@media (prefers-color-scheme: dark) {
  a {
    text-decoration: underline;
    text-decoration-style: dotted;
    color: var(--highlight-color);
  }

  a:hover {
    background: var(--highlight-color);
    color: var(--bg-color);
  }
}