.tv-zone {
  display: flex;
  justify-content: flex-start; /* aligns it left */
  align-items: center;
  padding: 5vh 0;
  width: 120%;
  background: transparent; /* fix: removes black bg */
  position: relative;
  padding-left: 25vw;
}

.tv-frame {
  position: relative;
  width: 70vw; /* was 80vw */
  max-width: 700px;
  aspect-ratio: 4 / 3;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tv-screen {
  position: absolute;
  width: 115%; /* expand width */
  height: 115%; /* expand height */
  object-fit: contain;
  z-index: 3;
  pointer-events: none;
  top: -7.5%;
  left: -7.5%;
}

.tv-inner {
  position: absolute;
  width: 91%;
  height: 104%;
  left: -3%;
  top: -6%;
  z-index: 2;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;

  clip-path: inset(10% 0 0 0); /* top right bottom left */
}

.tv-inner iframe,
.tv-inner canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.tv-inner canvas {
  z-index: 1;
  mix-blend-mode: screen;
}

.glitch,
.scan-lines,
.snow-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
}

.glitch {
  background: url("../../../upload.wikimedia.org/wikipedia/commons/0/02/Television_static.gif");
  mix-blend-mode: multiply;
  opacity: 0.3;
  animation: glitchMove 0.2s infinite linear;
}

.scan-lines {
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0.2) 1px,
    rgba(0, 0, 0, 0) 2px
  );
}

.snow-effect {
  background: url("../../../upload.wikimedia.org/wikipedia/commons/0/02/Television_static.gif");
  background-size: cover;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

@keyframes glitchMove {
  0% {
    transform: translateX(0);
  }
  33% {
    transform: translateX(-5px);
  }
  66% {
    transform: translateX(5px);
  }
  100% {
    transform: translateX(0);
  }
}