@font-face {
    font-family: 'urb';
    src: url('../../@/urb-Regular.eot');
    src: url('../../@/urb-Regular.eot?#iefix') format('embedded-opentype'),
        url('../../@/urb-Regular.woff2') format('woff2'),
        url('../../@/urb-Regular.woff') format('woff'),
        url('../../@/urb-Regular.ttf') format('truetype'),
        url('../../@/urb-Regular.svg#urb-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.lx {
  font-family: 'urb-Regular';
  position: fixed;
  z-index: 1000;
  color: #181820;
  font-size: 4.5vw;
  top: 10%;
  right: 5%;
  text-align: right;
}

body {
  animation: fadeInAnimation ease 10s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0.00
  }

  25% {
    opacity: 0.25
  }

  50% {
    opacity: 0.50
  }

  75% {
    opacity: 0.75
  }

  100% {
    opacity: 1.00
  }
}

video {}

html,
body {
  color: #181820;
  margin: 0;
  padding: 0;
  max-height: 100vh;
}

svg {
  height: 0;
  width: 0;
  position: absolute;
  animation: test 1s;
}

@keyframes test {
  0% {
    height: 0;
  }

  100% {
    height: 0;
  }
}

.container {
  display: flex;
  height: 100vh;
}

.video-right {
  filter: url(#filter2);
  width: 100%;
  object-fit: cover;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.color {
  background: linear-gradient(90deg, black 10%, #FAF9F4);
  filter: url(#filter);
  color: #FAF9F4;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}