/* I'm using import because for some unkown to me reason, I kept getting issues where fonts were loading back and forth before finally settling on Bebas. */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue');

html {
  --mainGap: 3ex;
  --smGap: 1.5ex;
  --fallbackFonts: Avenir, "Avenir Next LT Pro", Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif;
  --body: var(--fallbackFonts);
  --caps: "Bebas Neue", var(--fallbackFonts);
  --black: #0a0a0a;
  --white: #f5f5f5;
  --blue: #7fcacd;
  --yellow: #e2b33c;
  --grey: #7a7a7a;
  --overlay: rgba(0, 0, 0, 0.3);
  --step--2: clamp(0.9113rem, 0.8922rem + 0.0951vw, 0.96rem);
  --step--1: clamp(1.0938rem, 1.0523rem + 0.2073vw, 1.2rem);
  --step-0: clamp(1.3125rem, 1.2393rem + 0.3659vw, 1.5rem);
  --step-1: clamp(1.575rem, 1.4579rem + 0.5854vw, 1.875rem);
  --step-2: clamp(1.89rem, 1.7129rem + 0.8854vw, 2.3438rem);
  --step-3: clamp(2.2681rem, 2.0098rem + 1.2915vw, 2.93rem);
  --step-4: clamp(2.7219rem, 2.355rem + 1.8341vw, 3.6619rem);
  --step-5: clamp(3.2656rem, 2.7537rem + 2.5598vw, 4.5775rem);

  scroll-behavior: smooth;
}

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--body);
  font-size: var(--step-0);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--caps);
}

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

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

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

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

a {
  color: var(--blue);
}

a:hover {
  color: var(--yellow);
}

*:not(:defined) {
  display: block;
}

.u-font-lg-5 {
  font-size: var(--step-5);
}

.u-font-lg-4 {
  font-size: var(--step-4);
}

.u-font-lg-3 {
  font-size: var(--step-3);
}

.u-font-lg-2 {
  font-size: var(--step-2);
}

.u-font-lg-1 {
  font-size: var(--step-1);
}

.u-font-base {
  font-size: var(--step-0);
}

.u-font-sm-1 {
  font-size: var(--step--1);
}

.u-font-sm-2 {
  font-size: var(--step--2);
}

.u-font-caps {
  font-family: var(--caps);
}

.wrapper {
  inline-size: 95%;
  margin: auto;
  max-inline-size: var(--wrapper-size, 1600px);
}

.wrapper[data-constrain="some"] {
  --wrapper-size: 1300px;
}

.wrapper[data-constrain="more"] {
  --wrapper-size: 1100px;
}

.wrapper[data-constrain="most"] {
  --wrapper-size: 600px;
}

.u-grid {
  display: grid;
  gap: var(--grid-gap, 3ex);
}

[data-grid-columns="2"] {
  grid-template-columns: repeat(2, 1fr);
}

[data-grid-columns="3"] {
  grid-template-columns: repeat(3, 1fr);
}

[data-grid-columns="fluid"] {
  grid-template-columns: repeat(var(--fluid-type, auto-fit), minmax(var(--fluid-col-size, 20rem), 1fr));
}

.u-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.u-text-center {
  text-align: center;
}

.u-text-italic {
  font-style: italic;
}

.u-text-bold {
  font-weight: bold;
}

.u-margin-inline {
  margin-inline: auto;
}

/* Create equal spacing between elements in a flow context without setting display */
.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}