@import url('https://fonts.googleapis.com/css2?family=Borel&family=League+Spartan:wght@100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  /* hsl (fallback color) */
  --bg-dark: hsl(280 40% 2%);
  --bg: hsl(282 25% 5%);
  --bg-light: hsl(282 14% 9%);
  --text: hsl(282 100% 96%);
  --text-muted: hsl(282 13% 71%);
  --highlight: hsl(282 8% 40%);
  --border: hsl(282 11% 29%);
  --border-muted: hsl(283 15% 19%);
  --primary: hsl(283 47% 74%);
  --secondary: hsl(101 34% 63%);
  --danger: hsl(9 26% 64%);
  --warning: hsl(52 19% 57%);
  --success: hsl(146 17% 59%);
  --info: hsl(217 28% 65%);
  /* oklch */
  --bg-dark: oklch(0.1 0.015 316);
  --bg: oklch(0.15 0.015 316);
  --bg-light: oklch(0.2 0.015 316);
  --text: oklch(0.96 0.03 316);
  --text-muted: oklch(0.76 0.03 316);
  --highlight: oklch(0.5 0.03 316);
  --border: oklch(0.4 0.03 316);
  --border-muted: oklch(0.3 0.03 316);
  --primary: oklch(0.8 0.15 316);
  --gradient: oklch(0.8 0.29 360);
  --secondary: oklch(0.76 0.1 136);
  --danger: oklch(0.7 0.05 30);
  --warning: oklch(0.7 0.05 100);
  --success: oklch(0.7 0.05 160);
  --info: oklch(0.7 0.05 260);

  scrollbar-width:thin;
}
body.light {
  /* hsl (fallback color) */
  --bg-dark: hsl(282 20% 90%);
  --bg: hsl(282 44% 96%);
  --bg-light: hsl(282 100% 100%);
  --text: hsl(283 46% 5%);
  --text-muted: hsl(282 11% 29%);
  --highlight: hsl(282 100% 100%);
  --border: hsl(282 7% 52%);
  --border-muted: hsl(282 10% 64%);
  --primary: hsl(283 34% 31%);
  --secondary: hsl(98 58% 21%);
  --danger: hsl(9 21% 41%);
  --warning: hsl(52 23% 34%);
  --success: hsl(147 19% 36%);
  --info: hsl(217 22% 41%);
  /* oklch */
  --bg-dark: oklch(0.92 0.015 316);
  --bg: oklch(0.96 0.015 316);
  --bg-light: oklch(1 0.015 316);
  --text: oklch(0.15 0.03 316);
  --text-muted: oklch(0.4 0.03 316);
  --highlight: oklch(1 0.03 316);
  --border: oklch(0.6 0.03 316);
  --border-muted: oklch(0.7 0.03 316);
  --primary: oklch(0.8 0.15 316);
  --gradient: oklch(0.8 0.29 360);
  --secondary: oklch(0.4 0.1 136);
  --danger: oklch(0.5 0.05 30);
  --warning: oklch(0.5 0.05 100);
  --success: oklch(0.5 0.05 160);
  --info: oklch(0.5 0.05 260);
}

body {
  background-color: var(--bg-dark);
  font-family: "League Spartan", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  color: var(--text);
  margin: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding: 0;
}

.fLogo {
  font-size: 5rem;
  margin: 0;
  letter-spacing: -4px;
}

@media only screen and (max-width: 480px) {
  .fLogo {
    font-size: 3rem;
  }
}

.fLogo2 {
  font-size: 2rem;
  margin: auto;
  letter-spacing: 5px;
  font-weight: 300;
  position: relative;
  width: max-content;
}

.fLogo2::before {
  content: "";             /* Required for pseudo-element to show */
  position: absolute;      /* Position relative to .fLogo2 */
  top: -0.5rem;                  /* Align to the top */
  left: -50%;                 /* Align to the left */
  width: 200%;
  height: 2px;             /* Thickness of the line */
  background-color: var(--text);   /* Line color */
}


a {
  text-decoration: none;
  color: var(--text);
  font-size: 2rem;
  font-weight: 300;
}

.text-gradient {
  background: linear-gradient(to left, var(--primary), var(--gradient));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.text-main {
  font-weight: 600;
  font-size: 5rem;
  letter-spacing: -4px;
}

.text-secondary {
  font-weight: 100;
  font-size: 5rem;
  letter-spacing: -4px;
}

.text-tertiary {
  font-weight: 200;
  font-size: 2rem;
  letter-spacing: 0px;
}

.text-description {
  font-weight: 300;
  font-size: 1.5rem;
  letter-spacing: 0px;
}

.text-description-secondary {
  font-weight: 100;
  font-size: 1.5rem;
  letter-spacing: 0px;
}