* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: "Neue Montreal Medium";
  src: url("/assets/fonts/NeueMontrealMedium.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

::-webkit-scrollbar {
  display: none;
}

body {
  font-family: "Neue Montreal Medium";
}

.intro,
.outro,
.scrolling {
  width: 100%;
  height: 100dvh;
}

.intro,
.outro {
  display: flex;
  align-items: flex-end;
  padding-bottom: 2rem;
  justify-content: center;
  position: relative;
}

.intro h1,
.outro h1 {
  max-width: 90vw;
  font-size: clamp(1.5em, 5vw, 3em);
  text-indent: 4em;
}

.logo {
  position: absolute;
  top: 1em;
  left: 1em;
  font-size: clamp(1em, 5vw, 1.2em);
}

.scrolling {
  position: relative;
  padding-left: 1.5em;
  overflow: hidden;
}

.wrapper-text {
  height: max-content;
  width: fit-content;
  display: inline-block;
  font-size: 10vw;
  text-transform: uppercase;
  position: absolute;
  bottom: 2rem;
  white-space: nowrap;
  letter-spacing: 0.05em;
  will-change: transform, bottom, top;
}

.char-text {
  will-change: transform;
}