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

@font-face
{
  font-family: JostItalic;
  src: url(/assets/fonts/Jost-Italic.ttf);
}

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Jost", sans-serif;
  font-weight: 300;
}

:root
{
  --theme-fg-high: 220 220 220;
  --theme-fg-mid: 80 80 80;
  --theme-fg-low: 50 50 50;

  --theme-bg-high: 20 20 20;
  --theme-bg-mid: 40 40 40;
  --theme-bg-low: 80 80 80;

  --theme-color: 0 100 255;
  --theme-color-light: 59 136 255;

  background: rgb(var(--theme-bg-high));
  color: rgb(var(--theme-fg-high));
  font-size: 125%;
  accent-color: rgb(var(--theme-color));
}

body
{
  position: relative;
  height: 100vh;
  width: 100vw;
}

.block
{
  position: absolute;
  display: block;
  text-align: center;
  width: 100vw;
  height: 100vh;
}

h1
{
  font-size: 2rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

p
{
  margin-bottom: 0.5rem;
  font-weight: 400;
}

button
{
  font-size: 100%;
  border: none;
  cursor: pointer;
}

.big-button
{
  min-width: 20rem;
  padding: 0.75rem 1.5rem;
  font-size: 1.5rem;
  background: rgb(var(--theme-color));
  font-weight: 600;
  color: rgb(var(--theme-fg-high));
  border-radius: 10rem;
}

.big-button:hover,
.big-button:focus
{
  background: rgb(var(--theme-color-light));
}

input[type="checkbox"]
{
  background: rgb(var(--theme-color));
  vertical-align: middle;
}

.small
{
  font-size: 0.8rem;
}

.faint
{
  color: rgb(var(--theme-fg-low));
}

.corner
{
  position: absolute;
  left: 1rem;
  bottom: 1rem;
}

.center
{
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.push-down-1
{
  margin-top: 1rem;
}

.push-down-2
{
  margin-top: 2rem;
}

.text-left
{
  text-align: left;
}

.space-small
{
  height: 0.5rem;
}

.space-mid
{
  height: 1.5rem;
}

.space-large
{
  height: 3rem;
}

.cursor-link
{
  cursor: pointer;
}

.fake-textbox
{
  border-radius: 0.15rem;
  width: 100%;
  height: 2em;
  background: rgb(var(--theme-bg-mid));
  color: rgb(var(--theme-fg-high));
  text-align: center;
  font-weight: 300;
}

.fake-textbox:focus
{
  outline: 0.15rem solid rgb(var(--theme-color));
}

@keyframes contentCaret
{
  0%
  {
    content: "|";
  }

  100%
  {
    content: "";
  }
}

.fake-textbox.set:focus::after
{
  content: "";
  animation: 1.5s linear infinite contentCaret;
  position: absolute;
}

.fake-textbox.placeholder
{
  color: rgb(var(--theme-bg-low));
  font-style: italic;
}

.middle
{
  margin: auto;
}

.width-main
{
  width: 35rem;
}