:root {
  --dark-color: #191f1d;
  --mid-dark: #555a57;
  --noise-texture: url(/assets/main/media/vhsnoise.png);
  --gif-texture: url(/assets/main/media/vhsvideo.gif);
  --main-transition:all 0.2s ease-in-out;
}

html,
body {
  margin: 0;
  height: 100vh;
}

body {
  display: grid;
  place-items: center;
  background: var(--dark-color);
  background-blend-mode: overlay;
}

.vhs-container {
  display: grid;
  height: 100vh;
  width: 100vw;
}

.vhs-container:before {
  content: "";
  display: flex;
  position: absolute;
  background-image:var(--noise-texture);
  height: 100vh;
  width: 100vw;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 3;
}

.vhs-container:after {
  content: "";
  display: flex;
  position: absolute;
  background-image:var(--gif-texture);
  height: 100vh;
  width: 100vw;
  translate:0px 0px;
  background-repeat: no-repeat;
  background-position-y:-20px;
  background-size: cover;
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 64%;
  z-index: 3;
}