:root {
  --font-family-sriracha: 'Sriracha', cursive;
  --font-family-lobster: 'Lobster', cursive;
  --font-family-faugaz: 'Fugaz One', cursive;
  --font-family-majormono: 'Major Mono Display', monospace;
  --color-font-1: #FFC300;
  --color-font-2: #FFD60A;
  --color-bck-1: #000814;
  --color-bck-2: #001D3D;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-font-1: #FFC300;
    --color-font-2: #FFD60A;
    --color-bck-1: #000814;
    --color-bck-2: #001D3D;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --color-font-1: #000814;
    --color-font-2: #001D3D;
    --color-bck-1: #FFC300;
    --color-bck-2: #FFD60A;
  }
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}


body {
  background-color: var(--color-bck-1);
  color: var(--color-font-1);
  font-family: var(--font-family-lobster);
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  line-height: 1.4;
  /*overflow: hidden;*/
}

p, h1, h2, h3, h4, h5, h6, li, ul, ol, a, button, section, main {
  margin: 0;
  padding: 0;
  border: none;
  text-decoration: none;
  box-shadow: none;
  font-family: var(--font-family-sriracha);
  color: var(--color-font-1);
  list-style: none;
}

h1 {
  font-size: 3rem;
}

h6 {}

.flx {
  display: flex;
}
.flx-1 {
  flex: 1;
}

.flx-dir-col {
  flex-direction: column;
}

.flx-aln-cen {
  align-items: center;
}

.flx-jus-cen {
  justify-content: center;
}

.flx-jus-spb {
  justify-content: space-between;
}

.font-faugaz {
  font-family: var(--font-family-faugaz);
}

.font-majormono {
  font-family: var(--font-family-majormono);
}


.hide {
  display: none;
  visibility: hidden;
  opacity: 0;
}


@keyframes flash {
  0%,50%,to {
    opacity: 1
  }

  25%,75% {
    opacity: 0
  }
}