body {
  background: black;
  overflow: hidden;
}

h1 {
  position: absolute;
  bottom: 10vh;
  z-index: -99;
  font-size: 4vw;
  color: #fff;
  font-family: monospace;
  text-align: center;
  text-transform: uppercase;
}

#frames {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
}

.vid {
  height: 80vh;
  width: 33.33vw;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  position: relative;
}

video {
  height: 100vh;
  width: 33.33vw;
  filter: grayscale(1) brightness(1.5) contrast(2);
  margin: 0;
  object-fit: cover;
}

#frames:hover .vid:not(:hover) {
  opacity: 0.3;
}

#one {
  clip-path: path("M0 0H55C234.493 0 380 145.507 380 325V460C380 564.934 294.934 650 190 650V650C85.0659 650 0 564.934 0 460V0Z");
}

#two {
  clip-path: path("M0 0H55C234.493 0 380 145.507 380 325V325C380 504.493 234.493 650 55 650H0V0Z");
}

#three {
  clip-path: path("M0 380C0 170.132 170.132 0 380 0V0V270C380 479.868 209.868 650 0 650V650V380Z");
}

/*# sourceMappingURL=styling.css.map */