@font-face {
  font-family: JetBrainsMono;
  src: url(/fonts/JetBrainsMono-Regular.ttf);
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: JetBrainsMono;
  src: url(/fonts/JetBrainsMono-Italic.ttf);
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: JetBrainsMono;
  src: url(/fonts/JetBrainsMono-ExtraBold.ttf);
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: JetBrainsMono;
  src: url(/fonts/JetBrainsMono-ExtraBoldItalic.ttf);
  font-weight: bold;
  font-style: italic;
}

:root {
  --text: #eff3ec;
  --background: #0a0d08;
  --primary: #bccdae;
  --secondary: #4d3f66;
  --accent: #a16793;
  --disabled-link: #654f60;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: JetBrainsMono, monospace;
  background: url(https://files.catbox.moe/e9tjnu.png),
        linear-gradient(90deg,
            var(--background) 0%,
            var(--background) 100%);
  background-size: 30%, auto;
  background-repeat: no-repeat;
  background-position: left bottom;
  color: var(--text);
  min-height: 90vh;
}

html {
  background-color: var(--background);
}

input, button {
    font-family: inherit;
}

a {
  color: var(--accent);
  transition: linear 0.1s;
  text-transform: uppercase;
  font-family: arial;
  font-size: 0.9em;
}

a:hover, a:active {
  color: var(--primary);
  transition: linear 0.1s;
}

header {
  color: var(--primary);
  background-color: var(--secondary);
  padding-left: 1em;
}

b, em, strong {
  color: var(--primary);
}

.wrapper {
  width: 90%;
  max-width: 600px;
  margin: 0 3em 0 auto;
}

.disabled {
  color: var(--disabled-link);
  text-transform: uppercase;
  font-family: arial;
  font-size: 0.9em;
  cursor: not-allowed;
  text-decoration: none;
}

@media (max-width: 680px) {
  .wrapper {
    width: 100%;
    margin: 0;
    padding: 1.5em 1em 0;
  }
  
  body {
    min-height: 0;
    background: var(--background);
  }
}