@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto+Serif:opsz@8..144&family=Roboto:wght@400;500;700&display=swap");

:root {
  --root-size: 56.25%; /* equal to 9px = 1em = 1rem */
  font-size: var(--root-size);

  /* spacing units */
  --spacing-scale-ratio: 2; /* 2:1 ratio | multiply to scale up (2 * --spacing-scale-ratio) | divide to scale down (n / --spacing-scale-ratio)*/
  --space-0: 0.5rem; /* equal to --root-size / --spacing-scale-ratio */
  --space-1: calc(var(--space-0) * var(--spacing-scale-ratio)); /* 9px */
  --space-2: calc(var(--space-1) * var(--spacing-scale-ratio)); /* 18px */
  --space-3: calc(var(--space-2) * var(--spacing-scale-ratio)); /* 36px */
  --space-4: calc(var(--space-3) * var(--spacing-scale-ratio)); /* 72px */
  --space-5: calc(var(--space-4) * var(--spacing-scale-ratio)); /* 144px */
  --space-6: calc(var(--space-5) * var(--spacing-scale-ratio)); /* 288px */
  --space-7: calc(var(--space-6) * var(--spacing-scale-ratio)); /* 576px */
  --space-8: calc(var(--space-7) * var(--spacing-scale-ratio)); /* 1152px */
  --space-9: calc(var(--space-8) * var(--spacing-scale-ratio)); /* 2304px */

  /*typography*/

  /* font families */
  --font-family-default: "Roboto", sans-serif;
  --font-family-data: "Roboto Mono", monospace;
  --font-family-italic: "Roboto Serif", serif;
  --font-primary: var(--font-family-default);
  --font-family-label: var(--font-family-default);

  /* font scaling */
  --font-scale-ratio: calc(4 / 3); /* 4:3 perfect fourth ratio */

  /* scaling */
  --font-size-h6: calc(
    var(--space-1) * var(--font-scale-ratio)
  ); /* 12px | 1.3333rem */
  --font-size-h5: calc(
    var(--font-size-h6) * var(--font-scale-ratio)
  ); /* 16px  |  1.7778rem */
  --font-size-h4: calc(
    var(--font-size-h5) * var(--font-scale-ratio)
  ); /* 21.3333px 2.3704rem */
  --font-size-h3: calc(
    var(--font-size-h4) * var(--font-scale-ratio)
  ); /* 28.4444px | 3.1605rem */
  --font-size-h2: calc(
    var(--font-size-h3) * var(--font-scale-ratio)
  ); /* 37.9259px | 4.214rem */
  --font-size-h1: calc(
    var(--font-size-h2) * var(--font-scale-ratio)
  ); /* 50.5679px 5.6187rem */

  --font-size-small: var(--font-size-h6);
  --font-size-p: var(--font-size-h5);
  --font-size-label: var(--font-size-h6);
  --font-size-button: var(--font-size-default);

  /* set default font size*/
  --font-size-default: var(--font-size-p);

  /* lineheight || "letting" */
  --line-height-default: calc(1 * 5 / 3);
  --line-height-header: 1;
  --line-height-p: var(--line-height-default);
  --line-height-small: var(--line-height-default);
  --line-height-label: var(--font-size-h5);

  font-family: var(--font-family-default);
  line-height: var(--line-height-default);

  --royal-950: #00061a;
  --royal-900: #041341;
  --royal-800: #0c2369;
  --royal-700: #193791;
  --royal-600: #2b4eb9;
  --royal-500: #4169e1;
  --royal-400: #6183e9;
  --royal-300: #839ef0;
  --royal-200: #a6bbf8;
  --royal-100: #ccd9ff;

  --electric-950: #001d1f;
  --electric-900: #0a5f65;
  --electric-800: #209aa2;
  --electric-700: #3fc9d3;
  --electric-600: #60e8f1;
  --electric-500: #80f9ff;
  --electric-400: #99f9ff;
  --electric-300: #b3fbff;
  --electric-200: #ccfcff;
  --electric-100: #e6feff;

  --black: #000;
  --neutral-950: #1b1d21;
  --neutral-900: #222429;
  --neutral-800: #2e3035;
  --neutral-700: #3b3e44;
  --neutral-600: #4c4f55;
  --neutral-500: #5e6167;
  --neutral-400: #74777d;
  --neutral-300: #8d9095;
  --neutral-200: #b2b4b9;
  --neutral-100: #e0e2e4;
  --neutral-050: #f0f1f2;
  --white: #ffffff;

  --danger-950: #1a0000;
  --danger-900: #330000;
  --danger-800: #600505;
  --danger-700: #8c0e0e;
  --danger-600: #b91c1c;
  --danger-500: #e62e2e;
  --danger-400: #ff5a5a;
  --danger-300: #ff8080;
  --danger-200: #ffa6a6;
  --danger-100: #ffcccc;

  --success-950: #03140a;
  --success-900: #062814;
  --success-800: #0c5129;
  --success-700: #12793d;
  --success-600: #18a251;
  --success-500: #1eca6b;
  --success-400: #43d585;
  --success-300: #6ddfa0;
  --success-200: #9aeabe;
  --success-100: #cbf4dd;

  --warning-950: #1a170a;
  --warning-900: #332e14;
  --warning-800: #665c29;
  --warning-700: #99893d;
  --warning-600: #ccb751;
  --warning-500: #ffe565;
  --warning-400: #fff184;
  --warning-300: #fffaa3;
  --warning-200: #ffffc1;
  --warning-100: #fdffe0;

  --info-950: #090217;
  --info-900: #14072e;
  --info-800: #2c145b;
  --info-700: #472689;
  --info-600: #663eb7;
  --info-500: #895be4;
  --info-400: #9f79ea;
  --info-300: #b699ef;
  --info-200: #cdbaf4;
  --info-100: #e6dcfa;

  /*  semantic ui colors  */
  --danger: var(--danger-500);
  --warning: var(--warning-500);
  --success: var(--success-500);
  --info: var(--info-500);
  --primary: var(--royal-500);
  --secondary: var(--neutral-500);
  --light: var(--neutral-200);
  --dark: var(--neutral-900);

  --primary: var(--royal-500);
  --secondary: var(--neutral-500);
  --light: var(--gneutral-200);
  --dark: var(--neutral-900);
  --background-color: var(--neutral-950);
  --font-color: var(--neutral-100);

}

html {
  overflow-x: hidden;
  overflow-y: auto;
  overflow-y: overlay;
}

@media screen and (min-width: 576px) {
  html {
    overflow-x: unset;
  }
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
}

i,
.italic {
  font-family: var(--font-family-italic);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
  font-variation-settings: "wdth" 100, "GRAD" 0;
}

data,
.data {
  font-family: var(--font-family-data);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.text-bold {
  font-family: var(--font-family-default);
  font-weight: 500;
  font-style: normal;
}

.p-bold {
  font-family: var(--font-family-default);
  font-weight: 700;
  font-style: normal;
}

*,
[class*="auto-grid"] > * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

.text-regular,
body {
  font-size: var(--font-size-default);
  font-family: var(--font-family-default); /* Duplicate declaration */
  background: var(--background-color);
  color: var(--white);
  max-width: var(--space-8);
  margin: 0 auto;
  padding: var(--space-3);
  transition: all 0.3s;
  font-weight: 400;
  font-style: normal;
  text-transform: math-auto;
  display: grid;
  overflow-x: hidden;
}

@media screen and (min-width: 1198px) {
  body {
    padding: var(--space-3) 0;
    overflow-x: visible;
  }
}

/* scrollbar width */

::-webkit-scrollbar {
  --scrollbar-thickness: var(--space-1);
  width: var(--scrollbar-thickness);
  height: var(--space-1);
  background: var(----neutral-950);
}

/* Scrollbar Track */
::-webkit-scrollbar-track {
  border-radius: var(--space-0);
  background: var(--dark);
}

/* Scrollbar Handle */
::-webkit-scrollbar-thumb {
  background: var(--neutral-800);
  border-radius: var(--space-0);
  cursor: grab;
}

/* Scrollbar Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--grey-70);
}

/* ------------- typography ------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: var(--line-height-header);
  font-family: var(--font-family-default);
}

h1 {
  font-size: var(--font-size-h1);
}

h2 {
  font-size: var(--font-size-h2);
}

h3 {
  font-size: var(--font-size-h3);
}

h4 {
  font-size: var(--font-size-h4);
}

h5 {
  font-size: var(--font-size-h5);
}

h6 {
  font-size: var(--font-size-h6);
}

a,
.link {
  cursor: pointer;
  color: var(--royal-400);
}

a:hover,
.link:hover {
  filter: brightness(1.3);
}

p,
a {
  font-size: var(--font-size-p);
  line-height: var(--line-height-default);
  text-decoration: none;
}

small {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

small + small,
p + small,
h1 + small,
h2 + small,
h3 + small,
h4 + small,
h5 + small,
h6 + small {
  margin-block-start: var(--font-scale-ratio);
}

label {
  font-size: var(--font-size-label);
  display: block;
  line-height: var(--line-height-label);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--secondary);
}

small {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  display: block;
}

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

strong {
  font-weight: 700;
}

/* ------------ UI elements -----------*/

button,
input[type="submit"] {
  background: var(--primary);
  padding: 1em 2em;
  border-radius: 1em;
  font-size: var(--font-size-default);
  color: var(--white);
  font-family: var(--font-family-default);
  border: none;
  -webkit-transition: 0.2s ease-out;
  -o-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  gap: var(--space-1);
  position: relative;
}

button.small,
input[type="submit"].small {
  padding: 0.5em 1em;
  border-radius: 0.5em;
  font-size: var(--font-size-h6);
}

button:hover,
input[type="submit"]:hover {
  -webkit-filter: brightness(1.1);
  background: var(--royal-400);
  -webkit-transform: scale(1.025);
  -ms-transform: scale(1.025);
  transform: scale(1.025);
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
}

button:active {
  transform: scale(1);
  filter: brightness(0.9);
}

button.secondary,
input[type="submit"].secondary {
  background: var(--secondary);
}

button.secondary:hover,
input[type="submit"].secondary:hover {
  filter: brightness(1.2);
}

button.dark,
input[type="submit"].dark,
button.hollow,
input[type="submit"].hollow {
  background: inherit;
}

button.dark:hover,
input[type="submit"].dark:hover,
button.hollow,
input[type="submit"].hollow {
  background: var(--dark);
}

button.hollow,
input[type="submit"].hollow {
  outline: 1px solid var(--primary);
  outline-offset: -1px;
}

/* normal inputs */

input {
  padding: 1em;
  outline: none;
  border: none;
  border-bottom: 2px solid var(--secondary);
  background: var(--dark);
  color: inherit;
  font-size: var(--font-size-default);
  width: 100%;
  transition: 0.3s ease;
}

input:focus {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  transform: scale(1.025);
  transition: none;
  background: var(--neutral-800);
  border-color: var(--neutral-300);
}

hr {
  border: none;
  border-bottom: 1px solid var(--secondary);
  width: 100%;
}

/* Checkbox */

/* Customize the label (the container) */
label.checkbox,
label.radio {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: var(--font-size-default);
  text-transform: unset;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: inherit;
}

/* Hide the browser's default checkbox */
label.checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
label.checkbox .checkmark,
label.radio .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: calc(var(--space-3) - var(--space-0));
  width: calc(var(--space-3) - var(--space-0));
  border: 1px solid var(--secondary);
  background: var(--dark);
}

/* When the checkbox is checked, add a blue background */
label.checkbox input:checked ~ .checkmark,
label.radio input:checked ~ .checkmark {
  background: var(--neutral-900);
  transition: 0.3s ease-out;
}

/* Create the checkmark/indicator (hidden when not checked) */
label.checkbox .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
label.checkbox input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
label.checkbox .checkmark:after {
  left: 11px;
  top: 6px;
  width: var(--space-0);
  height: var(--space-1);
  border: solid var(--primary);
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

label.checkbox .text,
label.radio .text {
  padding: 0 0 0 calc(var(--space-3) + var(--space-2));
}

/* ---------radio button --------*/
/* The container */
label.radio {
  display: block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
label.radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
label.radio .checkmark {
  position: absolute;
  height: calc(var(--space-3) - var(--space-0));
  width: calc(var(--space-3) - var(--space-0));
  border-radius: 50%;
}

/* When the radio button is checked, add a blue background */
label.radio input:checked ~ .checkmark,
label.checkbox input:checked ~ .checkmark {
  background-color: var(--dark);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
label.radio .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
label.radio input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
label.radio .checkmark:after {
  top: 10px;
  left: 10px;
  width: var(--space-1);
  height: var(--space-1);
  border-radius: 50%;
  background: var(--primary);
}

/* On mouse-over, add a grey background color */
label.checkbox:hover input ~ .checkmark,
label.radio:hover input ~ .checkmark,
input:hover {
  background: var(--neutral-700);
  transition: none;
}

/* auto grid */
.auto-grid-5,
.auto-grid-small,
.auto-grid,
.auto-grid-medium,
.auto-grid-6,
.auto-grid-large,
.auto-grid-7 {
  display: -ms-grid;
  display: grid;
  grid-gap: var(--space-3);
}

.auto-grid-5,
.auto-grid-small {
  grid-template-columns: repeat(auto-fill, minmax(var(--space-5), 1fr));
  grid-gap: var(--space-2);
}

.auto-grid,
.auto-grid-6,
.auto-grid-medium {
  grid-template-columns: repeat(auto-fill, minmax(var(--space-6), 1fr));
}

.auto-grid-7,
.auto-grid-large {
  grid-template-columns: 1fr;
}

@media screen and (min-width: 786px) {
  .auto-grid-7,
  .auto-grid-large {
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--space-3);
  }
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.disabled {
  opacity: 50%;
  pointer-events: none;
}

.fa-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  aspect-ratio: 1/1;
}

.blink {
  animation: blinker 0.66s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

/*  */

.tooltip {
  position: relative;
}

.tooltip:hover {
  z-index: 1;
}

/* appears bottom center by default */
/* if used on buttons it will always try to appear center */
/* any "flex-centered" element will center the tooltip */
.tooltip::after {
  content: attr(tooltip);
  position: absolute;
  font-size: var(--font-size-small);
  background: var(--background-color);
  padding: var(--space-0) var(--space-1);
  border-radius: var(--space-0);
  visibility: hidden;
  color: var(--font-color);
  opacity: 0;
  pointer-events: none;
  top: calc(100% + var(--space-0));
  transition: opacity 0.3s ease-in-out;
  font-family: var(--font-family-data);
  width:fit-content;
  max-width: var(--space-7);
  text-align: left;
  white-space: nowrap;
  z-index: 1;
}

.tooltip:hover::after {
  visibility: visible;
  opacity: 1;
  filter: brightness(0.5) grayscale(0.75);
}

.tooltip.bottom::after {
  top: calc(100% + var(--space-0));
  right: unset;
  left: unset;
  bottom: unset;
}

.tooltip.bottom-left::after {
  top: calc(100% + var(--space-0));
  right: 0;
  left: unset;
  bottom: unset;
}

.tooltip.bottom-right::after {
  top: calc(100% + var(--space-0));
  right: unset;
  left: 0;
  bottom: unset;
}

.tooltip.top::after {
  top: unset;
  right: unset;
  left: unset;
  bottom: calc(100% + var(--space-0));
}

.tooltip.top-left::after {
  top: unset;
  right: 0;
  left: unset;
  bottom: calc(100% + var(--space-0));
}

.tooltip.top-right::after {
  top: unset;
  right: unset;
  left: 0;
  bottom: calc(100% + var(--space-0));
}

.tooltip.left::after {
  top: unset;
  left: unset;
  right: calc(100% + var(--space-0));
  bottom: unset;
  text-align: right;
}

.tooltip.right::after {
  top: unset;
  left: calc(100% + var(--space-0));
  right: unset;
  bottom: unset;
}

.tooltip.center::after {
  top: unset;
  left: unset;
  right: unset;
  bottom: unset;
  right: 50%;
  transform: translateX(50%);
}



/* light theme */

:root.light {
  --neutral-800: var(--neutral-100);
  --white: var(--neutral-600);
  --neutral-700: var(--neutral-200);
  --primary: var(--royal-300);
  --secondary: var(--neutral-700);
  --light: var(--neutral-100);
  --dark: var(--neutral-050);
  --background-color: #fff;
  --font-color: var(--neutral-950);
  --warning: var(--warning-600);
}

html.light body {
  background-color: var(--background-color);
  transition: all 0.3s;
}

html.light button:not(.secondary):not(.dark):not(.hollow) {
  color: white;
}

html.light label {
  color: var(--neutral-200);
}

html.light button.hollow,
html.light input[type="submit"].hollow {
  outline: 1px solid var(--neutral-100);
}

html.light button.hollow:hover,
html.light input[type="submit"].hollow:hover {
  outline: 1px solid var(--neutral-200);
}

html.light .tooltip:hover::after {
  filter: grayscale(0.25) invert(.25);
}

.spin {
  animation: spin 1s linear infinite;
  transform-origin: center;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.system-message {
  font-family: var(--font-family-data);
  gap: var(--space-1);
  display: flex;
  background: transparent;
}

.system-message.warning {
  color: var(--warning);
}

.system-message.danger {
  color: var(--danger-400);
}

.system-message.info {
  color: var(--info-500);
}

.system-message.success {
  color: var(--success-400);
}

.system-message .icon {
  background: var(--warning);
  color: var(--background-color);
  aspect-ratio: 1/1;
  height: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--space-0);
}

.sentence-case {
  text-transform: math-auto;
}

select {
  -webkit-appearance: none;
  padding: 1em;
  border-radius: 1em;
  font-size: var(--font-size-default);
  background: inherit;
  outline: 1px solid var(--secondary);
  color: var(--white);
  border: none;
}

