$base: #1e1e2e;
$text: #cdd6f4;

$mantle: #181825;
$crust: #11111b;

$overlay0: #6c7086;
$overlay1: #7f849c;
$overlay2: #9399b2;

$surface0: #313244;
$surface1: #45475a;
$surface2: #585b70;

$subtext0: #a6adc8;
$subtext1: #bac2de;

$blue: #89b4fa;


body {
  background-color: $base;
  font-family: Pixeloid;
  color: $text;
  width: fit-content;
}

h1 {
  text-align: center;
}

a {
  color: unset;
  text-decoration: underline;
  text-decoration-color: $blue;
  text-underline-offset: 1px;
  transition: text-underline-offset 0.3s ease;

  &:hover {
    text-underline-offset: 3px;
  }

  &:active {
    display: inline-block;
    transform: scale(.98);
  }
}

.mono {
  font-family: PixeloidMono, monospace;
  background-color: $mantle;
  border-radius: 2px;
  padding: 0 4px;
  color: $subtext0;

  &:hover {
    transition: .3s ease;
    background-color: $crust;
  }
}

.services-block {
  display: flex;
  flex-direction: column;
  width: fit-content;
}

.services {
  background-color: $surface0;
  border-radius: 8px;
  padding: 8px;

  & + & {
    margin-top: 8px;
  }
}

@font-face {
  font-family: Monocraft;
  src: url("/static/font/Monocraft.ttc");
}

@font-face {
  font-family: Pixeloid;
  src:
    url("/static/font/Pixeloid/woff/Sans.woff2") format("woff2"),
    url("/static/font/Pixeloid/otf/Sans.otf") format("opentype");
}
@font-face {
  font-family: Pixeloid;
  src:
    url("/static/font/Pixeloid/woff/Sans-Bold.woff2") format("woff2"),
    url("/static/font/Pixeloid/otf/Sans-Bold.otf") format("opentype");
  font-weight: bold;
}
@font-face {
  font-family: PixeloidMono;
  src:
    url("/static/font/Pixeloid/woff/Mono.woff2") format("woff2"),
    url("/static/font/Pixeloid/otf/Mono.otf") format("opentype");
  font-style: mono;
}