body {
  background-color: #F3F3F3;
    font-family: "Host Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}

@keyframes infiniteScroll {
  from {transform: translateX(0)}
  to {transform: translateX(-50%)}
}
.horizontal-scrolling-items {
  font-family: "Outfit", sans-serif;
  color: black;
  font-weight: 700;
  display: flex;
  font-size: 8vw;
  width: 1920px;
  display: flex;
  animation-name: infiniteScroll;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  padding-bottom: 0.5em;
  padding-top: 0.5em;
}
.horizontal-scrolling-items__item {
  white-space: nowrap;
}
html { overflow-y: scroll; }

.horizontal-scrolling-items {
  font-size: 4vw;

}

.display-1 {
  font-weight: 700 !important;
  font-size: 4.5rem !important;
  line-height: 1;
}

#top {
  padding-top: 100px;
  padding-bottom: 20px;
}

#intro {
  margin-top: 50px;
 padding-bottom : 80px;

}

#work {
  margin-bottom : 100px;
}

#hover-img {
  position: fixed;
  top: 0;
  left: 0;
  width: 15em;
  display: none;
  pointer-events: none;
  z-index: 9999;
  border-radius: 10px;
}

.carousel video{
  display: block;
  height: 300px;
  margin-right: 10px;
}

@media screen and ( min-width: 768px ) {
  .carousel video{
  display: block;
  height: 500px;
  margin-right: 20px;
}
.display-1 {
  font-weight: 700 !important;
  font-size: 6rem !important;
  line-height: 1;
}

}
@media screen and ( min-width: 992px ) {
.display-1 {
  font-weight: 700 !important;
  font-size: 8rem !important;
  line-height: 1;
}

}