:root {
  --margin0LR: 3rem;
  --margin1LR: 4.5rem;
  --padding1LR: 4.5rem;
  --borderRadius: 15px;
  --vSpacer0: 55px;
  --vSpacer1: 88px;
  --vSpacer2: 125px;
  --vSpacer3: 175px;
  --serifSubtitle_spaceBelow: 55px;

  --padding1LRLeft: calc(var(--padding1LR) / 1);
  --padding1LRRight: calc(var(--padding1LR) / 1);

  /* --mobileBreakpoint: 768px; */
  /* --ultraWideBreakpoint: 1920px; */

  /* FONTS */
  /* https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/ */

  --heroTitle: 96px;
  --heroDescription: 20px;
  --heroPhotoCredit: 10px;
  --mediaType: 14px;
  --serifSubtitle: 36px;
  --heroMetadata: 12px;
  --creditsSectionCopy: 16px;
  --ctaButtonTitle: 14px;
  --navTitle: 14px;
  --monoSubtitle: 14px;
  --bodyCopySmaller: 17px;
  --bodyCopyBigger: 20px;
  --longBigSerifCopy: 30px;
  --smallShortSerifCopy: 20px;
  --purposeStatement: 72px;
  --compSubtitle: 60px;
  --footerLinks: 20px;
  --mobileMenuNavLinks: 30px;
  --footerLinkTitle: 10px;
  --footerCopyright: 12px;
}

.vertGap0 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.vertGap1 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.vertGap2 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.margin0LR {
  box-sizing: border-box;
  margin-left: var(--margin0LR);
  margin-right: var(--margin0LR);
}
.margin1LR {
  box-sizing: border-box;
  margin-left: var(--margin1LR);
  margin-right: var(--margin1LR);
}
.padding1LR {
  box-sizing: border-box;
  padding-left: var(--padding1LRLeft);
  padding-right: var(--padding1LRRight);
}
.padding1LRLeft {
  box-sizing: border-box;
  padding-left: var(--padding1LRLeft);
}
.padding1LRRight {
  box-sizing: border-box;
  padding-right: var(--padding1LRRight);
}

.cheatUp {
  margin-top: -5%;
}

.fullHeightWidthPurpose {
  height: 100vh;
  width: 100%;
}

.halfHeight {
  height: 50vh;
  width: 100%;
}

.vSpacer0 {
  margin-top: var(--vSpacer0);
  margin-bottom: var(--vSpacer0);
}

.vSpacer1 {
  margin-top: var(--vSpacer1);
  margin-bottom: var(--vSpacer1);
}

.vSpacer2 {
  margin-top: var(--vSpacer2);
  margin-bottom: var(--vSpacer2);
}

.vSpacer3 {
  margin-top: var(--vSpacer3);
  margin-bottom: var(--vSpacer3);
}

.serifSubtitle_spaceBelow {
  margin-bottom: var(--serifSubtitle_spaceBelow);
}

.padLeft {
  padding-left: var(--padLeft) !important;
}

.padRight {
  padding-right: var(--padRight) !important;
}

.component {
  padding-top: 1.5rem;
}

.componentContainer {
  /* padding-top: 10rem; */
}

.reducedVerticalMargin {
  margin-top: 0rem;
  margin-bottom: 0rem;
}

html::-webkit-scrollbar {
  display: none; /* Hide the scrollbar */
}

/* Hide scrollbar for Chrome, Safari and Opera */
html::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
html {
  /* -ms-overflow-style: none;  IE and Edge */
  scrollbar-width: none; /* Firefox */
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #030b22;
}

@media (max-width: var(--ultraWideBreakpoint)) {
}

body * {
  box-sizing: inherit;
  color: white;
}

.zUp2 {
  position: absolute;
  z-index: 2;
}

#lineCheck {
  width: 100%;
  height: 10px;
  background-color: red;
  position: absolute;
  left: 0;
  z-index: 100;
  display: none;
}

#bodyGradient {
  width: 100%;
  background-color: #03091c;
  background-size: cover;
  background-position: top;
  background-size: contain;
  background-repeat: no-repeat;
}

#subBody {
  margin-left: var(--margin0);
  margin-right: var(--margin0);
}

a:hover {
  cursor: pointer;
}

#cursorCanvas {
  position: fixed;
  /* position: absolute; */
  z-index: 6;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  mix-blend-mode: screen;
  pointer-events: none;
}

hr {
  height: 0.5px; /* Adjust the height to make it thinner */
  background-color: white; /* Keep the color as red */
  border: none; /* Remove any default border */
}

.desktopOnlyBlock {
  display: block !important;
}
.desktopOnlyFlex {
  display: flex !important;
}
.mobileOnlyFlex {
  display: none !important;
}
.mobileOnlyBlock {
  display: none !important;
}

main {
  display: none;
}

.outline {
}
