@font-face {
  font-family: 'Jost';
  src: url('fonts/Jost-500-Medium.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bangers';
  src: url('fonts/Bangers-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bebas Neue';
  src: url('fonts/BebasNeue-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Comic Neue';
  src: url('fonts/ComicNeue-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Courier Prime';
  src: url('fonts/CourierPrime-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Crepster';
  src: url('fonts/Creepster-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fredoka One';
  src: url('fonts/FredokaOne-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Henny Penny';
  src: url('fonts/HennyPenny-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inconsolata';
  src: url('fonts/Inconsolata-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Merriweather';
  src: url('fonts/Merriweather-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Pirata One';
  src: url('fonts/PirataOne-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Press Start 2P';
  src: url('fonts/PressStart2P-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans Pro';
  src: url('fonts/SourceSansPro-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'VT323';
  src: url('fonts/VT323-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Acme-Regular';
  src: url('fonts/Acme-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Audiowide-Regular';
  src: url('fonts/Audiowide-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Barrio-Regular';
  src: url('fonts/Barrio-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bungee-Regular';
  src: url('fonts/Bungee-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BungeeOutline-Regular';
  src: url('fonts/BungeeOutline-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CabinSketch-Regular';
  src: url('fonts/CabinSketch-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CaesarDressing-Regular';
  src: url('fonts/CaesarDressing-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ChakraPetch-Regular';
  src: url('fonts/ChakraPetch-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CinzelDecorative-Regular';
  src: url('fonts/CinzelDecorative-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gorditas-Regular';
  src: url('fonts/Gorditas-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GrapeNuts-Regular';
  src: url('fonts/GrapeNuts-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IMFellEnglish-Regular';
  src: url('fonts/IMFellEnglish-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JuliusSansOne-Regular';
  src: url('fonts/JuliusSansOne-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Limelight-Regular';
  src: url('fonts/Limelight-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'LondrinaOutline-Regular';
  src: url('fonts/LondrinaOutline-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MajorMonoDisplay-Regular';
  src: url('fonts/MajorMonoDisplay-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Michroma-Regular';
  src: url('fonts/Michroma-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MochiyPopOne-Regular';
  src: url('fonts/MochiyPopOne-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Monoton-Regular';
  src: url('fonts/Monoton-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MontserratAlternates-Regular';
  src: url('fonts/MontserratAlternates-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MuseoModerno-Regular';
  src: url('fonts/MuseoModerno-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Orbitron-Regular';
  src: url('fonts/Orbitron-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PoiretOne-Regular';
  src: url('fonts/PoiretOne-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'RubikGlitch-Regular';
  src: url('fonts/RubikGlitch-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'RubikMoonrocks-Regular';
  src: url('fonts/RubikMoonrocks-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sancreek-Regular copy';
  src: url('fonts/Sancreek-Regular copy.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sancreek-Regular';
  src: url('fonts/Sancreek-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SigmarOne-Regular';
  src: url('fonts/SigmarOne-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SpecialElite-Regular';
  src: url('fonts/SpecialElite-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'UnifrakturMaguntia-Regular';
  src: url('fonts/UnifrakturMaguntia-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

html {
  /* from milligram */
  font-size: 62.5%;
}

body {
  margin: 0;
  padding: 0;

  /* from milligram */

  color: #394046;
  font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-size: 1.6em;
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.6;
  font-size: 1.6em;
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.6;
}

* {
  box-sizing: border-box;
}

:root {
  --bg-color: #9b4dca;
  --fg-color: #ffffff;
  --hover-bg-color: #606c76;
  --hover-fg-color: #ffffff;
  --border-radius: 0.4rem;
}