:root {
  --max-width: 1100px;
  --border-radius: 12px;
  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
    "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
    "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
  --primary-glow: conic-gradient(
    from 180deg at 50% 50%,
    #16abff33 0deg,
    #0885ff33 55deg,
    #54d6ff33 120deg,
    #0071ff33 160deg,
    transparent 360deg
  );
  --secondary-glow: radial-gradient(#fff, hsla(0, 0%, 100%, 0));
  --tile-start-rgb: 239, 245, 249;
  --tile-end-rgb: 228, 232, 233;
  --tile-border: conic-gradient(
    #00000080,
    #00000040,
    #00000030,
    #00000020,
    #00000010,
    #00000010,
    #00000080
  );
  --callout-rgb: 238, 240, 241;
  --callout-border-rgb: 172, 175, 176;
  --card-rgb: 180, 185, 188;
  --card-border-rgb: 131, 134, 135;
  --color-one: #394aff;
  --color-two: #ff8f28;
  --book-scale: 0.9;
}
@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
    --secondary-glow: linear-gradient(
      to bottom right,
      rgba(1, 65, 255, 0),
      rgba(1, 65, 255, 0),
      rgba(1, 65, 255, 0.3)
    );
    --tile-start-rgb: 2, 13, 46;
    --tile-end-rgb: 2, 5, 19;
    --tile-border: conic-gradient(
      #ffffff80,
      #ffffff40,
      #ffffff30,
      #ffffff20,
      #ffffff10,
      #ffffff10,
      #ffffff80
    );
    --callout-rgb: 20, 20, 20;
    --callout-border-rgb: 108, 108, 108;
    --card-rgb: 100, 100, 100;
    --card-border-rgb: 200, 200, 200;
  }
}
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body,
html {
  scroll-behavior: smooth;
  max-width: 100%;
  overflow-x: hidden !important;
  overflow-y: auto;
  background: hsla(0, 0%, 4%, 0.5);
  position: relative;
  min-height: 100vh;
}
body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
  color: #fff;
}
a {
  color: inherit;
  text-decoration: none;
}
@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
}
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}
.blink {
  animation: blink 3s ease-in-out infinite normal;
}
@keyframes move-bg {
  to {
    background-position: calc(var(--bg-size) * -1) 0;
  }
}
.rotating-gradient {
  --bg-size: 400%;
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
      90deg,
      var(--color-one),
      var(--color-two),
      var(--color-one)
    )
    0 0 / var(--bg-size) 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  animation: move-bg 8s linear infinite;
}
.gradient-border {
  --borderWidth: 3px;
  position: relative;
  border-radius: 10px;
  background: #1c204d;
  border: 3px solid #445bcb;
}
.gradient-border:before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--borderWidth));
  left: calc(-1 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 2);
  width: calc(100% + var(--borderWidth) * 2);
  background: linear-gradient(
    90deg,
    var(--color-one),
    var(--color-two),
    var(--color-one)
  );
  border-radius: 10px;
  z-index: -1;
  animation: animatedgradient 3s ease infinite;
  background-size: 300% 300%;
  height: 46px;
}
.gradient-border:hover {
  border-radius: 10px;
  border: none;
}
@keyframes animatedgradient {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  to {
    background-position: 0 50%;
  }
}
.mySwiper {
  .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    text-align: center;
    background: transparent;
    opacity: 1;
    border: 1px solid #a5a5a5;
  }
  .swiper-pagination-bullet-active {
    background: #a5a5a5;
  }
}
.fullHeight {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}
progress[value] {
  --color: #eee;
  --background: #0a0a0a;
  --big-br: 14px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  width: 100%;
  height: 100%;
  border-radius: var(--big-br);
  padding: 3px;
  background: var(--background);
}
progress[value]::-webkit-progress-bar {
  border-radius: var(--big-br);
  background: var(--background);
}
progress[value]::-webkit-progress-value {
  border-radius: 12px;
  background: var(--color);
}
progress[value]::-moz-progress-bar {
  border-radius: var(--big-br);
  background: var(--color);
}
label {
  font-size: 20px;
  font-weight: 700;
  display: block;
  margin: 20px 0;
}
#__next {
  min-height: 100vh;
  overflow-x: hidden;
}
@font-face {
  font-family: Klein;
  src: url(/fonts/KleinHeadline-BoldOblique.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Aux;
  src: url(/fonts/AuxMono.otf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: SFPro;
  src: url(/fonts/SF-Pro-Display-Bold.otf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Nostromo;
  src: url(/fonts/NostromoRegular-Bold.otf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Cutive Mono;
  src: url(/fonts/CutiveMono-Regular.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: SomeType;
  src: url(/fonts/SometypeMono-VariableFont_wght.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Proto Mono;
  src: url(/fonts/ProtoMono-Regular.otf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Nostromo Oblique;
  src: url(/fonts/NostromoOblique-Bold.otf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}