:root {
  --font-body: "loew-variable", sans-serif;
  --font-cond: "loew-variable", sans-serif;
  --font-disp: "loew-variable", sans-serif;
  --color-scheme: dark;
  --border-radius: 2px;
  --clr-base-100: rgb(37, 40, 58);
  --clr-base-200: rgb(22, 20, 28);
  --clr-base-300: rgb(10, 9, 12);
  --clr-green-100: rgb(140, 198, 63);
  --clr-green-200: rgb(121, 182, 61);
  --clr-green-300: rgb(102, 167, 59);
  --clr-green-400: rgb(88, 154, 57);
  --clr-red-100: rgb(235, 39, 39);
  --clr-red-200: rgb(203, 36, 37);
  --clr-red-300: rgb(171, 33, 55);
  --clr-red-400: rgb(148, 30, 53);
  --clr-accent-100: rgb(186, 215, 238);
  --clr-accent-200: rgb(208, 234, 255);
  --clr-accent-300: rgb(235, 245, 253);
  --clr-accent-400: rgb(255, 255, 255);
  --fs-300: clamp(0.94rem, calc(0.92rem + 0.08vw), 0.98rem);
  --fs-400: clamp(1.13rem, calc(1.06rem + 0.33vw), 1.31rem);
  --fs-500: clamp(1.35rem, calc(1.21rem + 0.69vw), 1.75rem);
  --fs-600: clamp(1.62rem, calc(1.37rem + 1.24vw), 2.33rem);
  --fs-700: clamp(1.94rem, calc(1.54rem + 2.03vw), 3.11rem);
  --fs-800: clamp(2.33rem, calc(1.7rem + 3.15vw), 4.14rem);
  --fs-900: clamp(2.8rem, calc(1.85rem + 4.74vw), 5.52rem);
  --fs-1000: clamp(3.6rem, calc(2.46rem + 6.5vw), 7rem);
}

::selection {
  color: white;
  background: var(--clr-red-100);
}

html {
  color-scheme: var(--color-scheme);
  scroll-behavior: smooth;
}
html::-webkit-scrollbar {
  width: 10px;
}
html::-webkit-scrollbar-track {
  background: var(--clr-base-200);
}
html::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: var(--clr-red-200);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-400);
  font-variation-settings:
    "ital" 0,
    "wght" 300,
    "wdth" 70;
  line-height: 1.6;
  background-color: var(--clr-base-200);

  border-top-width: 10px;
  border-top-style: solid;
  border-image: linear-gradient(
      to right,
      rgba(235, 39, 39, 0),
      rgba(235, 39, 39, 1)
    )
    1;
}

.section__splash {
  display: grid;
  min-height: calc(100dvh - 20px);
  align-content: center;
  z-index: 5;

  border-bottom-width: 10px;
  border-bottom-style: solid;
  border-image: linear-gradient(
      to right,
      rgba(140, 198, 63, 1),
      rgba(140, 198, 63, 0)
    )
    1;
}

#mainLogo {
  width: 20%;
  min-width: 200px;

  box-shadow: 0px 0px 40px rgba(10, 9, 12, 0.5);
}

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
}

/* FLoaty Pixels */
.pixel {
  position: fixed;
  top: var(--px-top, 20%);
  left: var(--px-left, 20%);
  width: 48px;
  aspect-ratio: 1;
  pointer-events: none;
  color: var(--clr-green-100);
  background-color: currentColor;
  animation: var(--px-dur, 10s) linear infinite alternate pixel-track;
}
.pixel__lrg {
  opacity: 0.25;
  width: 256px;
  filter: blur(20px);
}
.pixel__med {
  opacity: 0.45;
  width: 128px;
  filter: blur(15px);
}
.pixel__sml {
  opacity: 0.65;
  width: 64px;
  filter: blur(8px);
}
.pixel__xsm {
  opacity: 0.65;
  width: 32px;
  filter: blur(2px);
  background-color: transparent;
  border: 10px solid currentColor;
}
.pixel__xsm-b {
  opacity: 0.65;
  width: 32px;
  filter: blur(2px);
  background-color: transparent;
  border: 10px solid currentColor;
}
.pixel__w {
  color: var(--clr-accent-300);
}
.pixel__r {
  color: var(--clr-red-100);
}

@keyframes pixel-track {
  from {
    /* pushes the sun down past the viewport */
    transform: translateX(0);
  }
  to {
    /* returns the sun to its default position */
    transform: translateX(var(--px-track));
  }
}

/* Media Queries */
@media only screen and (max-width: 1024px) {
  /*------- 1024 & Under ------- */
}
@media only screen and (max-width: 768px) {
  /*------- 768 & Under ------- */
}
@media only screen and (max-width: 480px) {
  /*------- 480 & Under ------- */
}