html {
  scroll-behavior: smooth;
  overflow-y: overlay;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

html::-webkit-scrollbar {
  width: 6px;
}

html::-webkit-scrollbar-thumb {
  background-color: rgb(150, 150, 150);
  border-radius: 3px;
}

html::-webkit-scrollbar-track {
  background: transparent;
}

.scroll-container {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.link {
  text-decoration: none;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: black;
  max-width: 100dvw;
}

h1 {
  font-family: "Roboto", sans-serif, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  margin: 0px;
  color: white;
  font-size: 1.3rem;
}

h2 {
  font-family: "Roboto", sans-serif, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  margin: 0px;
  color: black;
  font-size: 1.3rem;
}

p {
  font-family: "Roboto", sans-serif, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  margin: 0px;
  color: black;
  font-size: 1rem;
}

.hero-container {
  position: relative;
  width: 100%;
  height: calc(var(--vh) * 300);
}

.hero-video-container {
  position: sticky;
  top: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#vid {
  width: 100%;
  height: calc(var(--vh) * 100);
  object-fit: cover;
}

.hero-title-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: absolute;
  width: 25.5%;
  min-width: 304px;
  height: fit-content;
  container-type: inline-size;
  will-change: transform, opacity;
}

.hero-title-container h1 {
  font-size: 6.5cqw;
}

.hero-title-container img {
  width: 100%;
  height: auto;
  display: block;
  transform: translateX(4%);
}

.scroll-symbol {
  position: absolute;
  bottom: 48px;
  right: 48px;
  height: 56px;
  width: 32px;
  transition: opacity 150ms linear;
}

.black-fade {
  position: absolute;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
}

.black-background {
  position: relative;
  width: 100%;
  height: 55svh;
  background: black;
  z-index: 0;
}

.orange-padding {
  width: 100%;
  height: 400svh;
  background: rgb(196, 138, 30);
}

.white-padding {
  width: 100%;
  height: 3.75rem;
  margin-bottom: -1px;
  background: white;
}

.coming-soon {
  height: 100svh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.coming-soon .photography-text {
  color: white;
}

.white-background {
  position: relative;
  width: 100%;
  height: calc(100lvh + 3.75rem);
  background: white;
  z-index: 0;
}

.id {
  position: absolute;
  margin-top: 50svh;
}