@font-face {
  font-family: "title-font";
  src: url(../assets/fonts/ABCDiatype-Bold.f2bf1e1c.otf);
}

@font-face {
  font-family: "h2-font";
  src: url(../assets/fonts/ABCDiatype-Regular.2505c0cb.otf);
}

@font-face {
  font-family: "btn-font";
  src: url(../assets/fonts/ABCDiatypeSemi-Mono-Regular.39db908c.otf);
}

@font-face {
  font-family: "text-font";
  src: url(../assets/fonts/ABCDiatypeSemi-Mono-Regular.39db908c.otf);
}

// FONTS
$title-font: "title-font", sans-serif;
$h2-font: "h2-font", sans-serif;
$btn-font: "btn-font", sans-serif;
$text-font: "text-font", sans-serif;

// COLORS
$background-color: #000000;
$text-color: #ffffff;
$text-color-invert: #000000;
$menu-burger-color: #ffffff;
$nav-separation-color: #80808089;
$color-hover-nav: #42ba96;
$color-btn: #14f195;
$background-color-btn-Explorer: #9945ff;
$color-text-highlight-select: #00ffbd;
$color-text-highlight: #232323;
$color-border-btn: #ffffff;
$color-hover-btn: #ffffff;
$color-counter-text: #000000;
$color-border-counter: #000000;
$color-counter-separator: #000000;
$color-background-card : #232325;
$color-colored-card-text : #000000;
$color-solo-card-background: #80ecff;
$solo-card-separation : #bababa;
$color-footer-ul-title: #bababa;
$color-background-footer: #ffffff;
$color-text-language-menu: #409088;
$color-text-language-hover: #00ffbd;


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: $text-font;
  color: $text-color;
}

body {
  background-color: black;
  height: 100vh;
  width: 100%;
}

h1::selection,
h2::selection,
h3::selection,
h4::selection,
li::selection {
  background-color: $color-text-highlight-select;
  color: $color-text-highlight;
}

