@import "./base/ui-base-button.css";
@import "./base/ui-base-close.css";
@import "./base/ui-base-component.css";
@import "./base/ui-base-icons.css";
@import "./base/ui-base-input.css";
@import "./base/ui-base-keyframes.css";
@import "./base/ui-base-spacing.css";
@import "./base/ui-base-text.css";

/*
   Space Mono found on Google Fonts
   ty, Colophon Foundry! <3

   https://fonts.google.com/specimen/Space+Mono?selection.family=Space+Mono
   github: https://github.com/googlefonts/spacemono
*/
@font-face {
  font-family: "Space Mono";
  src: url('/fonts/SpaceMono-Regular.ttf');
  /* src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/545665/SpaceMono-Regular.ttf"); */
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: "Space Mono";
  src: url('/fonts/SpaceMono-Bold.ttf');
  /* src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/545665/SpaceMono-Bold.ttf"); */
  font-style: normal;
  font-weight: bold;
  font-display: swap;
  text-rendering: optimizeLegibility;
}


:root {
   --color-primary: hsla(230, 43%, 47%, 1);
   --color-primary-hover: hsla(230, 43%, 57%, 1);
   --color-secondary: hsla(0, 0%, 47%, 1);
   --color-secondary-hover: hsla(0, 0%, 57%, 1);
   --color-error: #F34;
   --color-text: #FFF;
   --color-text-lighten: #CCC;
   --color-overlay: rgba(75, 68, 81, 0.5);
   --color-button-lift: rgba(0, 0, 0, 0.75);
   --color-card: hsla(0, 0%, 27%, 0.9);
   --color-card-selected: hsla(230, 43%, 37%, 0.9);
   --color-card-selected-text: #a4addb;

   --transition-time: 0.1s;
   --height-button-big: calc(var(--height-button) * 4);
   --width-button-big: calc(var(--height-button) * 6);
   --whitespace-1x: 1rem;
   --max-width: 30rem;
   --font-normal: 1rem;
   --fontsize-title: 1.5rem;
   --border-radius: 5px;
   --border: 3px solid #000;

   --height-button: 3.5rem;
   --height-button-sm: 2.85rem;
   --height-button-xs: 2.4rem;

   /* for reference. media queries !support media query */
   --break-large: 1200px;
   --break-medium: 800px;
   --break-small: 400px;
   --break-ti89: 300px;
   --text-shadow:
      0.07em 0.07em 0 rgba(15,18,23,.9),
      -0.07em 0.07em 0 rgba(15,18,23,.9),
      0.07em -0.07em 0 rgba(15,18,23,.9),
      -0.07em -0.07em 0 rgba(15,18,23,.9),
      0 0.0798em 0 rgba(15,18,23,.9),
      0 -0.0798em 0 rgba(15,18,23,.9),
      0.0798em 0 0 rgba(15,18,23,.9),
      -0.0798em 0 0 rgba(15,18,23,.9),
      0 0.0998em 0 rgba(15,18,23,.9),
      0.0798em 0.0998em 0 rgba(15,18,23,.9),
      -0.0798em 0.0998em 0 rgba(15,18,23,.9),
      0 0.1398em 0 rgba(15,18,23,.9),
      0.0798em 0.1398em 0 rgba(15,18,23,.9),
      -0.0798em 0.1398em 0 rgba(15,18,23,.9),
      -0.2em 0.13em 0 rgba(17,17,17,.25);
}

html, body {
   height: 100%;
}

html,
body,
* {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
  border-radius: 0;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  font-family: "Space Mono", monospace;
}

/* dangerous :] */
*:not(input) {
   user-select: none;
   -webkit-user-select: none;
}

html {
  font-size: 20px;
}

@media (max-width: 1200px) {
  html {
    font-size: 18px;
  }
}

@media (max-width: 800px) {
  html {
    font-size: 16px;
  }
}

@media (max-width: 400px) {
  html {
    font-size: 14px;
  }
}

@media (max-width: 300px) {
  html {
    font-size: 4vw;
  }
}