:root {
  --black: #000;
  --white: #fff;
  --red: #ee2625;
  --bezzy: cubic-bezier(0.8, 0, 0, 1);
  --bezzy2: cubic-bezier(0.43, 0.195, 0.02, 1);
  --bezzy3: cubic-bezier(0.5, 0, 0, 1);
  --color-link: #ffffffbc;
  --color-link-hover: #fff;
}

/* Hide scrollbars for all elements */
* {
  margin: 0;
  padding: 0;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  box-sizing: border-box;
  -webkit-font-smoothing: subpixel-antialiased; /* Enable subpixel antialiasing for better text rendering */
  -moz-osx-font-smoothing: grayscale; /* Enable grayscale antialiasing for better text rendering */
  text-rendering: geometricPrecision; /* Improve text rendering quality */
}
*::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera and Edge Chromium */
}

html,
body {
  /* Easy rems, 1rem - 10px */
  font-size: 62.5%;
  background: var(--black);
  color: var(--white);
}
a {
  text-decoration: none;
  color: var(--color-link);
  outline: none;
  cursor: pointer;

  &:hover {
    text-decoration: underline;
    color: var(--color-link-hover);
  }

  &:focus {
    outline: none;
    background: lightgrey;

    &:not(:focus-visible) {
      background: transparent;
    }

    &:focus-visible {
      outline: 2px solid red;
      background: transparent;
    }
  }
}

.wrapper {
  position: relative;
  height: 100svh;
  overflow: hidden;
}

.content {
  position: relative;
}

.hero {
  position: relative;
  z-index: 1;

  display: grid;
  place-items: center;

  width: 100%;
  height: 100svh;
  overflow: clip;

  & picture,
  & img {
    display: block;
  }

  & picture {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--black);

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 30%;
    }
  }
}

/* Everything below here is not needed to create the infinite scroll effect */

/* Header Styling */
.frame {
  padding: 1.5rem;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Open Sans',
    'Helvetica Neue',
    sans-serif;
  display: grid;
  z-index: 1000;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  font-size: 13px;
  grid-row-gap: 1rem;
  grid-column-gap: 2rem;
  pointer-events: none;
  justify-items: start;
  align-content: start;
  grid-template-columns: auto auto auto 1fr;
  grid-template-areas:
    'title title title title'
    'back archive github ...'
    'demos demos demos demos'
    'tags tags tags tags'
    'sponsor sponsor sponsor sponsor';

  #cdawrap {
    justify-self: start;
    grid-area: sponsor;
  }

  a,
  button {
    pointer-events: auto;
  }

  .frame__title {
    grid-area: title;
    font-size: inherit;
    margin: 0;
  }

  .frame__back {
    grid-area: back;
    justify-self: start;
  }

  .frame__archive {
    grid-area: archive;
    justify-self: start;
  }

  .frame__github {
    grid-area: github;
  }

  .frame__tags {
    grid-area: tags;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .frame__demos {
    grid-area: demos;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

  @media screen and (min-width: 53em) {
    grid-template-columns: auto auto auto auto 1fr;
    grid-template-rows: auto auto;
    align-content: space-between;
    grid-template-areas:
      'title back github archive demos'
      'tags tags tags sponsor sponsor';

    .frame__tags {
      align-self: end;
    }

    .frame__demos,
    #cdawrap {
      justify-self: end;
      text-align: right;
      max-width: 300px;
    }
  }
}

/* OSMO Curved Marquee Styling*/
.marquees {
  position: relative;
  width: 100%;
}

.radial-text-marquee {
  width: 100%;
  transform: translateY(-60%);

  &.script {
    position: absolute;
    inset: 10% 0 0 0;
  }
}

h2,
h3 {
  text-align: center;
  white-space: nowrap;
  user-select: none;
  color: var(--white);

  &.red {
    color: var(--red);
  }
}

h2 {
  font-size: clamp(12rem, 20vw, 32rem);
  font-family: 'League Gothic', sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 80;
}

h3 {
  font-size: clamp(8rem, 12vw, 24rem);
  font-family: 'Ms Madi', cursive;
  font-weight: 400;
  font-style: normal;
}