@font-face {
  font-family: ScienceGothic;
  src: url(../fonts/ScienceGothic%5BCTRS%2Cslnt%2Cwdth%2Cwght%5D.ttf);
}

.SG_smallcaps {
  font-family: ScienceGothic;
  font-size: 0.8em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:300,400,700&display=swap');

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

:root {
  --margin: 1rem;
  --font_ratio: calc((100vh - 2 * var(--margin)) / 9);
  --green: #01D64B;
  --gray: #616E6B;
}

html {
  background: var(--green);
  height: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  font-family: ScienceGothic;
  background-image: url(../../images/background_gradient.png);
  -webkit-background-size: cover;
  background-size: 100vw 100%;
}

.static {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: url(../../images/green_static.gif);
  background-repeat: repeat;
  background-size: 400px;
  -webkit-mix-blend-mode: multiply;
  mix-blend-mode: multiply;
}

nav {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  position: fixed;
  z-index: 1;
  top: calc(var(--margin) + 5px);
  right: calc(var(--margin) + 5px);
  background-image: linear-gradient(to bottom right, var(--green), #012D49);
  text-align: center;
}

nav a {
  cursor: alias;
}

nav a #download {
  position: relative;
  top: 11px;
  height: 26px;
  width: auto;
  fill: black;
  stroke: black;
  transition: all 0.5s;
}

nav a:hover #download {
  fill: white;
  stroke: white;
  transition: all 0.5s;
}

.section {
  isolation: isolate;
  font-size: 0;
  margin-bottom: var(--margin);
  padding: var(--margin);
}

.grid_container {
  width: 100%;
  min-height: calc(100vh - var(--margin) * 2);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(9, 1fr);
  grid-gap: var(--margin);
}

.grid_container div {
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: var(--margin);
}

p {
  font-size: 16px;
  isolation: isolate;
}


/* INTRO */
@keyframes scale_in {
  0% { transform: scale(0); }
  100% { transform: scale(1); opacity: 1;}
}

@keyframes fade_in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.intro_item {
  background: rgba(0, 0, 0, 0.8);
  color: var(--green);
  padding: var(--margin);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s;
}

.intro_item:hover {
  background: rgba(0, 0, 0, 1);
  transition: all 0.5s;
}

.intro_item p {
  width: 100%;
  text-align: center;
  color: var(--green);
  transition: color 0.5s;
  line-height: 0.8;
}

.intro_item:hover p {
  color: white;
  transition: color 0.5s;
}

@keyframes title_cycle {
  0% { font-variation-settings: 'wdth' 100, 'wght' 400, 'CTRS' 0, 'slnt' 0; }
  10% { font-variation-settings: 'wdth' 50, 'wght' 400, 'CTRS' 0, 'slnt' 0; }
  12% { font-variation-settings: 'wdth' 50, 'wght' 400, 'CTRS' 0, 'slnt' 0; }
  20% { font-variation-settings: 'wdth' 60, 'wght' 100, 'CTRS' 0, 'slnt' 0; }
  22% { font-variation-settings: 'wdth' 60, 'wght' 100, 'CTRS' 0, 'slnt' 0; }
  30% { font-variation-settings: 'wdth' 60, 'wght' 100, 'CTRS' 0, 'slnt' -10; }
  32% { font-variation-settings: 'wdth' 60, 'wght' 100, 'CTRS' 0, 'slnt' -10; }
  40% { font-variation-settings: 'wdth' 60, 'wght' 600, 'CTRS' 0, 'slnt' -10; }
  42% { font-variation-settings: 'wdth' 60, 'wght' 600, 'CTRS' 0, 'slnt' -10; }
  50% { font-variation-settings: 'wdth' 60, 'wght' 600, 'CTRS' 75, 'slnt' 0; }
  52% { font-variation-settings: 'wdth' 60, 'wght' 600, 'CTRS' 75, 'slnt' 0; }
  60% { font-variation-settings: 'wdth' 100, 'wght' 600, 'CTRS' 75, 'slnt' 0; }
  62% { font-variation-settings: 'wdth' 100, 'wght' 600, 'CTRS' 75, 'slnt' 0; }
  70% { font-variation-settings: 'wdth' 100, 'wght' 600, 'CTRS' 0, 'slnt' -10; }
  72% { font-variation-settings: 'wdth' 100, 'wght' 600, 'CTRS' 0, 'slnt' -10; }
  80% { font-variation-settings: 'wdth' 100, 'wght' 100, 'CTRS' 0, 'slnt' -10; }
  82% { font-variation-settings: 'wdth' 100, 'wght' 100, 'CTRS' 0, 'slnt' -10; }
  90% { font-variation-settings: 'wdth' 90, 'wght' 800, 'CTRS' 0, 'slnt' 0; }
  92% { font-variation-settings: 'wdth' 90, 'wght' 800, 'CTRS' 0, 'slnt' 0; }
  100% { font-variation-settings: 'wdth' 100, 'wght' 400, 'CTRS' 0, 'slnt' 0; }
}

#title {
  grid-column: 4 / 10;
  grid-row: 3 / 7;
  padding: calc(var(--margin) * 2);
  background: none;
  background-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.1), rgba(1, 45, 73, 0.5));
  /*animation: scale_in 3s;*/
}

#title p {
  position: relative;
  top: 2.5%;
  line-height: 1.1;
  color: white;
  font-size: 8.25vw;
}

#title:hover p {
  animation: title_cycle 10s ease-out infinite;
}

#numerals {
  grid-column: 1 / 3;
  grid-row: 1 / 4;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

#numerals p {
  font-size: calc(var(--font_ratio) - 2 * var(--margin));
  color: var(--green);
  transition: color 0.5s;
}

#numerals:hover p {
  color: white;
  transition: color 0.5s;
}

@keyframes one {
  0% { font-variation-settings: 'wght' 900 }
  50% { font-variation-settings: 'wght' 100 }
  100% { font-variation-settings: 'wght' 900 }
}

#numerals #one {
  grid-column: 1;
  grid-row: 1;
  font-variation-settings: 'wght' 900;
}

#numerals:hover #one {
  animation: one 6s linear infinite;
}

@keyframes two {
  0% { font-variation-settings: 'wght' 800 }
  43.75% { font-variation-settings: 'wght' 100 }
  93.75% { font-variation-settings: 'wght' 900 }
  100% { font-variation-settings: 'wght' 800 }
}

#numerals #two {
  grid-column: 2;
  grid-row: 1;
  font-variation-settings: 'wght' 800;
}

#numerals:hover #two {
  animation: two 6s linear infinite;
}

@keyframes three {
  0% { font-variation-settings: 'wght' 700 }
  37.5% { font-variation-settings: 'wght' 100 }
  87.5% { font-variation-settings: 'wght' 900 }
  100% { font-variation-settings: 'wght' 700 }
}

#numerals #three {
  grid-column: 3;
  grid-row: 1;
  font-variation-settings: 'wght' 700;
}

#numerals:hover #three {
  animation: three 6s linear infinite;
}

@keyframes four {
  0% { font-variation-settings: 'wght' 600 }
  31.25% { font-variation-settings: 'wght' 100 }
  81.25% { font-variation-settings: 'wght' 900 }
  100% { font-variation-settings: 'wght' 600 }
}

#numerals #four {
  grid-column: 1;
  grid-row: 2;
  font-variation-settings: 'wght' 600;
}

#numerals:hover #four {
  animation: four 6s linear infinite;
}

@keyframes five {
  0% { font-variation-settings: 'wght' 500 }
  25% { font-variation-settings: 'wght' 100 }
  75% { font-variation-settings: 'wght' 900 }
  100% { font-variation-settings: 'wght' 500 }
}

#numerals #five {
  grid-column: 2;
  grid-row: 2;
  font-variation-settings: 'wght' 500;
}

#numerals:hover #five {
  animation: five 6s linear infinite;
}

@keyframes six {
  0% { font-variation-settings: 'wght' 400 }
  18.75% { font-variation-settings: 'wght' 100 }
  68.75% { font-variation-settings: 'wght' 900 }
  100% { font-variation-settings: 'wght' 400 }
}

#numerals #six {
  grid-column: 3;
  grid-row: 2;
  font-variation-settings: 'wght' 400;
}

#numerals:hover #six {
  animation: six 6s linear infinite;
}

@keyframes seven {
  0% { font-variation-settings: 'wght' 300 }
  12.5% { font-variation-settings: 'wght' 100 }
  62.5% { font-variation-settings: 'wght' 900 }
  100% { font-variation-settings: 'wght' 300 }
}

#numerals #seven {
  grid-column: 1;
  grid-row: 3;
  font-variation-settings: 'wght' 300;
}

#numerals:hover #seven {
  animation: seven 6s linear infinite;
}

@keyframes eight {
  0% { font-variation-settings: 'wght' 200 }
  6.25% { font-variation-settings: 'wght' 100 }
  56.25% { font-variation-settings: 'wght' 900 }
  100% { font-variation-settings: 'wght' 200 }
}

#numerals #eight {
  grid-column: 2;
  grid-row: 3;
  font-variation-settings: 'wght' 200;
}

#numerals:hover #eight {
  animation: eight 6s linear infinite;
}

@keyframes nine {
  0% { font-variation-settings: 'wght' 100 }
  50% { font-variation-settings: 'wght' 900 }
  100% { font-variation-settings: 'wght' 100 }
}

#numerals #nine {
  grid-column: 3;
  grid-row: 3;
  font-variation-settings: 'wght' 100;
}

#numerals:hover #nine {
  animation: nine 6s linear infinite;
}

#fraction {
  grid-column: 10;
  grid-row: 5;
  /*animation: scale_in 10s;*/
}

#fraction p {
  font-size: calc(var(--font_ratio) * 0.5);
  font-variation-settings: 'wdth' 150, 'wght' 200;
  position: relative;
  top: 5%;
}

#currency {
  grid-column: 10;
  grid-row: 6 / 10;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(5, 1fr);
  /*animation: scale_in 7s;*/
}

#currency p {
  display: block;
  font-size: calc(var(--font_ratio) * 0.5);
  font-variation-settings: 'wdth' 175, 'wght' 300;
  transition: font-variation-settings 0.5s;
}

#currency:hover #dollar {
  font-variation-settings: 'wdth' 40, 'wght' 200;
  transition: font-variation-settings 0.5s;
}

#currency:hover #pound {
  font-variation-settings: 'wdth' 70, 'wght' 300;
  transition: font-variation-settings 0.5s 0.3s;
}

#currency:hover #euro {
  font-variation-settings: 'wdth' 100, 'wght' 400;
  transition: font-variation-settings 0.5s 0.6s;
}

#currency:hover #ruble {
  font-variation-settings: 'wdth' 130, 'wght' 500;
  transition: font-variation-settings 0.5s 0.9s;
}

#currency:hover #yen {
  font-variation-settings: 'wdth' 175, 'wght' 700;
  transition: font-variation-settings 0.5s 1.2s;
}

#no {
  grid-column: 11 / 13;
  grid-row: 5 / 9;
  /*animation: scale_in 3s;*/
}

#no p {
  position: relative;
  top: 10%;
  left: 0;
  transform: scale(1) translateX(0%) translateY(0%);
  font-variation-settings: 'wdth' 50, 'wght' 100;
  transition: transform 1s 0.5s, left 0.5s, font-variation-settings 0.5s;
}

#no:hover p {
  left: calc(var(--margin) * -1.5);
  transform: scale(0.25) translateX(-100%) translateY(-50%);
  font-variation-settings: 'wdth' 200, 'wght' 400;
  transition: transform 0.5s, left 1s, font-variation-settings 1s 0.5s;
}

#ampersand {
  grid-column: 1 / 4;
  grid-row: 6 / 9;
  /*animation: scale_in 3s;*/
}

#ampersand p {
  position: relative;
  top: 10%;
  font-variation-settings: 'wdth' 200, 'wght' 200;
  transition: font-variation-settings 0.5s;
}

#ampersand:hover p {
  font-variation-settings: 'wdth' 50, 'wght' 400;
  transition: font-variation-settings 1s;
}

#at_sign {
  grid-column: 10 / 13;
  grid-row: 2 / 5;
  padding: calc(var(--margin) * 1.5);
  /*animation: scale_in 3s;*/
}

#at_sign p {
  font-variation-settings: 'wght' 900, 'CTRS' 75, 'slnt' -10;
  transition: font-variation-settings 0.5s;
}

#at_sign:hover p {
  font-variation-settings: 'wght' 400, 'CTRS' 0, 'slnt' 0;
  transition: font-variation-settings 0.75s;
}

#exclamation {
  grid-column:  3;
  grid-row: 3 / 6;
  /*animation: scale_in 5s;*/
}

#exclamation p {
  position: relative;
  top: 7.5%;
  font-size: calc(var(--font_ratio) * 3 - var(--margin) * 4);
  font-variation-settings: 'wght' 100, 'wdth' 100;
  transition: font-variation-settings 0.5s;
}

#exclamation:hover p {
  font-variation-settings: 'wght' 280, 'wdth' 100;
  transition: font-variation-settings 0.75s;
}

#arrow {
  grid-column:  12;
  grid-row: 9;
  /*animation: scale_in 10s;*/
}

#arrow a {
  position: relative;
  top: 5%;
  color: var(--green);
  font-size: calc(var(--font_ratio) - var(--margin) * 3);
  font-variation-settings: 'wght' 900, 'wdth' 200;
  transition: all 0.8s;
}

#arrow:hover a {
  cursor: pointer;
  color: white;
  font-variation-settings: 'wght' 50, 'wdth' 200;
  transition: all 0.75s;
}

#ae {
  grid-column: 11;
  grid-row: 9;
  /*animation: scale_in 8.5s;*/
}

#ae p {
  position: relative;
  top: 5%;
  font-variation-settings: 'wght' 400, 'wdth' 100, 'slnt' -10;
  transition: font-variation-settings 0.6s;
}

#ae:hover p {
  font-variation-settings: 'wght' 100, 'wdth' 50, 'slnt' 0;
  transition: font-variation-settings 0.5s;
}

#belarusian {
  grid-column: 1 / 4;
  grid-row: 9;
  /*animation: scale_in 6s;*/
}

#belarusian p {
  position: relative;
  top: 2.5%;
  font-variation-settings: 'wdth' 200, 'wght' 800, 'CTRS' 66, 'slnt' -10;
  transition: font-variation-settings 0.5s;
}

#belarusian:hover p {
  font-variation-settings: 'wdth' 200, 'wght' 500, 'CTRS' 0, 'slnt' 0;
  transition: font-variation-settings 0.75s;
}

#russian {
  grid-column: 9 / 12;
  grid-row: 1;
  /*animation: scale_in 6s;*/
}

#russian p {
  font-variation-settings: 'CTRS' 0, 'slnt' -10;
  transition: font-variation-settings 0.6s;
}

#russian:hover p {
  font-variation-settings: 'CTRS' 75, 'slnt' 0;
  transition: font-variation-settings 1s;
}

#cyrillic_zhe {
  grid-column: 1 / 3;
  grid-row: 4 / 6;
  /*animation: scale_in 8s;*/
}

#cyrillic_zhe p {
  position: relative;
  top: 16%;
  font-variation-settings: 'wght' 850, 'wdth' 80, 'slnt' 0;
  transition: font-variation-settings 0.6s;
}

#cyrillic_zhe:hover p {
  font-variation-settings: 'wght' 100, 'wdth' 125, 'slnt' -10;
  transition: font-variation-settings 1s;
}

#danish {
  grid-column: 6 / 10;
  grid-row: 8 / 10;
  /*animation: scale_in 6s;*/
}

#danish p {
  position: relative;
  top: 5%;
  font-variation-settings: 'wdth' 60, 'wght' 250, 'CTRS' 75, 'slnt' 0;
  transition: font-variation-settings 0.5s;
}

#danish:hover p {
  font-variation-settings: 'wdth' 60, 'wght' 100, 'CTRS' 0, 'slnt' -10;
  transition: font-variation-settings 1s;
}

#german {
  grid-column: 4 / 8;
  grid-row: 7;
  /*animation: scale_in 7s;*/
}

#german p {
  position: relative;
  top: 5%;
  font-variation-settings: 'wdth' 110, 'wght' 600, 'CTRS' 30;
  transition: font-variation-settings 0.5s;
}

#german:hover p {
  font-variation-settings: 'wdth' 130, 'wght' 175, 'CTRS' 0;
  transition: font-variation-settings 1s;
}

#icelandic {
  grid-column: 3 / 6;
  grid-row: 1 / 3;
  /*animation: scale_in 5s;*/
}

#icelandic p {
  position: relative;
  top: 5%;
  font-variation-settings: 'wdth' 60, 'wght' 100, 'slnt' 0;
  transition: font-variation-settings 0.5s;
}

#icelandic:hover p {
  font-variation-settings: 'wdth' 60, 'wght' 100, 'slnt' -10;
  transition: font-variation-settings 1s;
}

#spanish {
  grid-column: 6 / 9;
  grid-row: 1;
  /*animation: scale_in 10s;*/
}

#spanish p {
  position: relative;
  top: 5%;
  font-variation-settings: 'wdth' 150, 'wght' 250, 'slnt' 0;
  transition: font-variation-settings 1s;
}

#spanish:hover p {
  font-variation-settings: 'wdth' 60, 'wght' 800, 'slnt' -10;
  transition: font-variation-settings 1s;
}

#turkish {
  grid-column: 8 / 10;
  grid-row: 7;
  /*animation: scale_in 4s;*/
}

#turkish p {
  font-variation-settings: 'wdth' 200, 'wght' 120;
  transition: font-variation-settings 0.5s;
}

#turkish:hover p {
  font-variation-settings: 'wdth' 72, 'wght' 600;
  transition: font-variation-settings 0.75s;
}

#vietnamese {
  grid-column: 6 / 10;
  grid-row: 2;
  /*animation: scale_in 4s;*/
}

#vietnamese p {
  position: relative;
  top: 2.5%;
  font-variation-settings: 'wdth' 60, 'wght' 700, 'CTRS' 66;
  transition: font-variation-settings 0.5s;
}

#vietnamese:hover p {
  font-variation-settings: 'wdth' 72, 'wght' 600, 'CTRS' 0;
  transition: font-variation-settings 0.75s;
}

#elements {
  grid-column: 4 / 6;
  grid-row: 8 / 10;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, 1fr);
}

#elements p {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

#elements #elements_1 {
  font-variation-settings: 'wght' 800, 'wdth' 100, 'slnt' -10;
  transition: font-variation-settings 0.5s;
}

#elements:hover #elements_1 {
  font-variation-settings: 'wght' 200, 'wdth' 120, 'slnt' 0;
  transition: font-variation-settings 0.8s;
}

#elements #elements_2 {
  font-variation-settings: 'wght' 550, 'slnt' -10;
  transition: font-variation-settings 0.5s;
}

#elements:hover #elements_2 {
  font-variation-settings: 'wght' 300, 'slnt' 0;
  transition: font-variation-settings 0.8s 0.25s;
}

#elements #elements_3 {
  font-variation-settings: 'wght' 300, 'wdth' 100, 'slnt' -10;
  transition: font-variation-settings 0.5s;
}

#elements:hover #elements_3 {
  font-variation-settings: 'wght' 550, 'wdth' 90, 'slnt' 0;
  transition: font-variation-settings 0.8s 0.5s;
}

#elements #elements_4 {
  font-variation-settings: 'wght' 200, 'wdth' 100, 'slnt' -10;
  transition: font-variation-settings 0.5s;
}

#elements:hover #elements_4 {
  font-variation-settings: 'wght' 800, 'wdth' 75, 'slnt' 0;
  transition: font-variation-settings 0.8s 0.75s;
}

#intro_about {
  margin-top: calc(var(--margin) * 3);
  text-align: left;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: var(--margin);
  height: 70vh;
}

#intro_about #intro_about_text {
  grid-column: 1 / 7;
  grid-row: 1 / 3;
  background-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.8), rgba(1, 214, 75, 0.1), rgba(1, 45, 73, 0.75));
  padding: calc(var(--margin) * 2);
}

#intro_about #intro_about_text p {
  max-width: 100%;
  font-size: 2rem;
  color: white;
  line-height: 1.1;
  margin: 1rem auto;
  font-variation-settings: 'wght' 350, 'wdth' 95;
}

#intro_about .demo {
  border: 1px solid var(--green);
}

#intro_about .demo p {
  color: var(--green);
  font-size: calc(var(--font_ratio) * 2.5);
  text-align: center;
  position: relative;
  top: 7.5%;
}

#intro_about #demo_weight, #intro_about #demo_weight_overlay_01, #intro_about #demo_weight_overlay_02 {
  grid-column: 7 / 10;
  grid-row: 1;
}

#intro_about #demo_weight p {
  font-variation-settings: 'wght' 100;
  color: white;
}

#intro_about #demo_weight_overlay_01 p {
  font-variation-settings: 'wght' 900;
  opacity: 0.2;
}

#intro_about #demo_weight_overlay_02 p {
  font-variation-settings: 'wght' 400;
  opacity: 0.4;
}

#intro_about #demo_width, #intro_about #demo_width_overlay_01, #intro_about #demo_width_overlay_02 {
  grid-column: 10 / 13;
  grid-row: 1;
}

#intro_about #demo_width p {
  font-variation-settings: 'wght' 300, 'wdth' 50;
  color: white;
}

#intro_about #demo_width_overlay_01 p {
  font-variation-settings: 'wght' 300, 'wdth' 200;
  opacity: 0.2;
}

#intro_about #demo_width_overlay_02 p {
  font-variation-settings: 'wght' 300, 'wdth' 100;
  opacity: 0.4;
}

#intro_about #demo_contrast, #intro_about #demo_contrast_overlay_01, #intro_about #demo_contrast_overlay_02 {
  grid-column: 7 / 10;
  grid-row: 2;
}

#intro_about #demo_contrast p {
  font-variation-settings: 'wght' 500, 'CTRS' 75;
  color: white;
}

#intro_about #demo_contrast_overlay_01 p {
  font-variation-settings: 'wght' 500, 'CTRS' 0;
  opacity: 0.2;
}

#intro_about #demo_contrast_overlay_02 p {
  font-variation-settings: 'wght' 500, 'CTRS' 37;
  opacity: 0.4;
}

#intro_about #demo_slant, #intro_about #demo_slant_overlay_01, #intro_about #demo_slant_overlay_02 {
  grid-column: 10 / 13;
  grid-row: 2;
}

#intro_about #demo_slant p {
  font-variation-settings: 'wght' 150, 'slnt' -10;
  color: white;
}

#intro_about #demo_slant_overlay_01 p {
  font-variation-settings: 'wght' 150, 'slnt' 0;
  opacity: 0.2;
}

#intro_about #demo_slant_overlay_02 p {
  font-variation-settings: 'wght' 150, 'slnt' -5;
  opacity: 0.4;
}

/* TYPE TESTER */

#type_tester {
  font-family: 'Roboto Mono', monospace;
  font-size: 1rem;
}

#sliders {
  grid-column: 1 / 4;
  grid-row: 1 / 7;
}

#sliders ul {
  text-align: justify;
}

#sliders ul li {
  display: inline-block;
  margin-bottom: var(--margin);
}

#sliders ul span {
  float: right;
}

#sliders input {
  display: block;
  width: 100%;
  margin-bottom: calc(2 * var(--margin));
  -webkit-appearance: none;
  height: 1px;
  background: white;
  outline: none;
}

#sliders input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--green);
  cursor: pointer;
  transition: background 0.3s;
}

#sliders input::-webkit-slider-thumb:hover {
  background: white;
  transition: background 0.3s;
}

#sliders input::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--green);
  cursor: pointer;
}

#css {
  grid-column: 1 / 4;
  grid-row: 7 / 10;
}

#css .css_code {
  padding: 0;
  margin-top: var(--margin);
  background: none;
}

#css .css_code p {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.9rem;
  letter-spacing: 0;
  line-height: 1.5;
}

#css .css_comment {
  color: var(--gray);
}

#text_input {
  grid-column: 4 / 13;
  grid-row: 1 / 10;
  background: none;
  background-image: linear-gradient(to bottom right, rgba(1, 45, 73, 0.75), rgba(1, 214, 75, 0.1), rgba(0, 0, 0, 0.6));
}

#text_input .align {
  stroke: var(--green);
  transition: stroke 0.3s;
  margin-right: 0.5em;
  height: 16px;
  width: auto;
  cursor: pointer;
}

#text_input #align_left {
  stroke: white;
  transition: stroke 0.3s;
}

#text_input .align:hover {
  stroke: white !important;
  transition: stroke 0.3s;
}

#text_input textarea {
  padding-top: calc(2 * var(--margin));
  width: 100%;
  height: calc(100% - var(--margin));
  font-family: ScienceGothic;
  color: white;
  background: none;
  border: none;
  font-size: 40px;
  line-height: 1.15;
  white-space: normal;
}


/* GLYPHS & LANGUAGES */
#featured_glyph {
  grid-column: 1 / 5;
  grid-row: 1 / 6;
  text-align: center;
  background: none;
  background-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.75));
  position: relative;
  z-index: -1;
}

#featured_glyph p {
  position: relative;
  top: 7.5%;
}

#glyphs {
  grid-column: 5 / 13;
  grid-row: 1 / 6;
  padding: 0;
  background: none;
}

#glyphs div {
  background: none;
  padding: 0;
  vertical-align: top;
}

#glyphs #glyph_tab_bar {
  width: 100%;
  height: calc(var(--margin) * 2);
  border-bottom: 0.5px solid var(--green);
}

#glyphs .glyph_tab {
  display: inline-block;
  width: calc(100% / 30 * 5);
  height: calc(var(--margin) * 2);
  padding: calc((var(--margin) * 2 - 0.8rem) / 2);
  cursor: pointer;
  border: 0.5px solid var(--green);
}

#glyphs .glyph_tab#etc_chars {
  width: calc(100% / 30 * 20);
}

#glyphs .glyph_tab p {
  position: relative;
  top: 7.5%;
  background-color: none;
  color: var(--green);
  font-size: 0.8rem;
}

.glyph_tab#latin p {
  color: white;
}

#glyphs .glyph_table div {
  display: inline-block;
  min-width: 1.5rem;
  width: calc(100% / 30);
  font-size: 1rem;
  text-align: center;
  border: 0.5px solid var(--green);
  font-variation-settings: 'wght' 350;
}

#glyphs #cyrillic_table, #glyphs #etc_table {
  display: none;
}

#languages {
  grid-column: 1 / 13;
  grid-row: 6 / 11;
  height: auto;
  overflow: hidden;
  padding: var(--margin);
}

#languages p {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.75rem;
  word-spacing: 0.3em;
  line-height: 1.5;
  color: var(--gray);
}

#languages p span {
  word-spacing: -0.25em;
}

#languages p .SG_smallcaps {
  font-size: 0.8rem;
  word-spacing: normal;
  margin-right: 0.3rem;
  color: white;
}

#languages p .green {
  color: var(--green);
  opacity: 0.7;
}

/* DOWNLOAD */
#download_section .grid_container {
  min-height: 0;
  height: 50vh;
}

#github_download, #google_download {
  background: none;
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--margin);
  transition: background 0.5s;
}

#github_download p, #google_download p {
  font-size: 4vw;
  font-variation-settings: 'wght' 400, 'wdth' 122, 'slnt' 0;
  transition: all 0.5s;
  line-height: 1.15;
}

#github_download:hover p/*, #google_download:hover p*/ {
  color: white;
  font-variation-settings: 'wght' 700, 'wdth' 100, 'slnt' -4;
  transition: all 0.5s;
}

#github_download {
  grid-column: 1 / 7;
  grid-row: 1 / 10;
  background-image: linear-gradient(to top left, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1), rgba(1, 45, 73, 0.5));
}

#google_download {
  grid-column: 7 / 13;
  grid-row: 1 / 10;
  background-image: linear-gradient(to bottom right, rgba(0, 255, 0, 0.15), rgba(0, 0, 0, 0.1), rgba(1, 100, 73, 0.5));
  opacity: 0.25;
}

/* FOOTER */
#footer {
  margin: 0 auto;
  display: grid;
}

#footer p {
  color: white;
  margin: 0.5rem 0;
  font-size: 0.8rem;
  font-variation-settings: 'wdth' 90, 'wght' 350;
}

#footer a {
  color: white;
  transition: color 0.3s;
}

#footer a:hover {
  color: var(--green);
  transition: color 0.3s;
}

#footer #google {
  width: 150px;
  margin-top: 2rem;
}

@media only screen and (max-width: 1000px) {
  .section {
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .grid_container {
    width: 100%;
    min-height: 0;
    display: block;
  }

  nav {
    display: none;
  }

  .intro_item, #numerals, #currency {
    display: none;
    margin-bottom: var(--margin);
  }

  #title, #elements, #spanish, #belarusian, #danish, #russian, #turkish {
    display: block;
  }

  #title p {
    font-size: calc(100vw / 7);
  }

  #elements p {
    line-height: 1.2;
  }

  #spanish p {
    padding-top: 0.5rem;
  }

  #danish p {
    padding-top: 0.5rem;
  }

  #intro_about {
    text-align: left;
    display: block;
    height: auto;
    margin-top: var(--margin);
  }

  #intro_about #intro_about_text {
    padding: 0.5rem var(--margin);
  }

  #intro_about #intro_about_text p {
    font-size: 1rem;
    line-height: 1.25;
    margin: 0.5rem auto;
  }

  #intro_about .demo {
    display: none;
  }

  #text_input {
    display: block;
    margin-bottom: var(--margin);
  }

  #text_input textarea {
    padding-top: var(--margin);
    height: 50vh;
    font-size: 40px;
  }

  #sliders {
    display: block;
    margin-bottom: var(--margin);
  }

  #featured_glyph {
    display: block;
    margin-bottom: var(--margin);
  }

  #glyphs {
    display: block;
  }

  #glyphs div {
    background: none;
    padding: 0;
    vertical-align: top;
  }

  #glyphs #glyph_tab_bar {
    width: 100%;
    height: auto;
    border-bottom: 0.5px solid var(--green);
  }

  #glyphs .glyph_tab {
    display: block;
    width: 100%;
    height: auto;
    padding: calc((var(--margin) * 2 - 0.8rem) / 2);
  }

  #glyphs .glyph_tab#etc_chars {
    width: auto;
  }

  #glyphs .glyph_table {
    display: block;
    position: relative;
    top: -1px;
    width: 100%;
    margin-bottom: var(--margin);
  }

  #glyphs .glyph_table div {
    display: inline-block;
    min-width: 1.5rem;
    width: calc(100% / 10);
    font-size: 1rem;
    text-align: center;
    border: 0.5px solid var(--green);
    font-variation-settings: 'wght' 350;
    cursor: pointer;
  }

  #download_section .grid_container {
    min-height: 0;
    height: auto;
  }

  #github_download, #google_download {
    display: block;
    margin-bottom: var(--margin);
  }

  #github_download p, #google_download p {
    font-size: 8vw;
  }

  #footer {
    margin-bottom: var(--margin);
  }

  #footer p {
    color: white;
    margin: 0.5rem 0;
    font-size: 0.8rem;
    line-height: 1.4;
  }

}