/* videos_stack.css - Styles for VHS Video Stack */
:root {
  --offwhite: #fdf3ed;
  --outer-ar: 1.25;
  --container-ar: 4 / 3;
}

@font-face {
  font-family: 'VCR OSD Mono';
  font-style: normal;
  font-weight: normal;
  src: url('/fontsfolder/vcr_osd_mono.woff2') format('woff2'),
    url('/fontsfolder/vcr_osd_mono.woff') format('woff');
}

html {
  height: 100%;
}

  html, body { overscroll-behavior-y: none; }
  
#telly_bg {
  z-index: 1;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(/fontsfolder/studio_bg_blur.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#telly_mode {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1001;
  transform: scale(1);
}

#mute_dial {
  position: absolute;
  left: 112%;
  top: 77%;
  width: 14vw;
  height: 14vw;
  border-radius: 7vw;
  z-index: 10000000000;
  pointer-events: auto;
  cursor: pointer;
}

#telly_holder,
#telly_holder_mobile {
  position: absolute;
  z-index: 2;
  width: 100%;
  left: 50%;
  top: 50%;
  aspect-ratio: 1/1;
  overflow: hidden;
  transform: translate(-50%, -50%) scale(1.3);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  opacity: 1;
}

#telly_holder {
  display: block;
}


#telly_holder_mobile {
  display: none;
}

#telly_holder_mobile {
  aspect-ratio: 1204/1245;
}








#wallHolder {
  position: absolute;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  overflow: hidden;
  opacity: 1;
}

#mimeartist_telly_movieHolder,
#mimeartist_telly_movieHolder_tracer {
  position: absolute;
  width: 93.3%;
  left: 49%;
  top: 50.5%;
  aspect-ratio: 1.25;
  z-index: 1;
  overflow: hidden;
  transform: translate(-50%, -50%) scale(0.5);
  background-size: 100% 100%;
  background-color: #0500df;
  overflow: hidden;
}

#youTubePlayerHolder {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
}

#mimeartist_telly_movieHolder_tracer {
  pointer-events: none;
  z-index: 1000000;
  background-color: transparent;
  overflow: visible;
}

.noPointer {
  pointer-events: none;
}

.vignette {
  position: absolute;
  left: -1px;
  top: -1px;
  right: -1px;
  bottom: -1px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 100;
  background: radial-gradient(circle, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.2) 100%);
}

.vhs {
  font-family: 'VCR OSD Mono';
  color: var(--offwhite);
  font-size: 3vw;
  line-height: 3vw;
  letter-spacing: 5px;
  position: absolute;
  will-change: text-shadow;
  animation: rgbText 2s steps(9) 0s infinite alternate;
  z-index: 89;
  opacity: 1.0;
  opacity: 1;
  text-transform: uppercase;
  text-shadow: 5px 5px 0px #000000;
}

.vhs {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.vhs.visible {
  opacity: 1;
}

#mimeartist_telly_top_left {
  position: absolute;
  z-index: 1000;
  top: 11%;
  left: 7%;
  transform: perspective(321px) rotateX(3deg) rotateY(-6deg) rotateZ(-1deg);
  width: 60%;
}

#mimeartist_telly_bottom_left {
  bottom: 11%;
  left: 7%;
  transform: perspective(321px) rotateX(3deg) rotateY(-11deg) rotateZ(3deg);
}

#telly_un_mute {
  bottom: 12%;
  right: 8%;
  text-align: right;
  transform: perspective(321px) rotateX(-18deg) rotateY(7deg) rotateZ(-2deg);
  z-index: 89;
  cursor: pointer;
}

.channel_changer {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 92;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0;
}

#telly_invisible_panel_left {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 50%;
  height: 100%;
  z-index: 88;

}

#telly_invisible_panel_right {
  position: absolute;
  left: 50%;
  top: 0px;
  width: 50%;
  height: 100%;
  z-index: 88;

}

#telly_scan_lines_old {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 90;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  background-size: 100% 4px, 3px 100%;
  pointer-events: none;
}

#telly_scan_lines {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 90;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  background-size: 100% 8px, 6px 100%;
  pointer-events: none;
}

@keyframes rgbText {
  0% {
    text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
  }

  25% {
    text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
  }

  45% {
    text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
  }

  50% {
    text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
  }

  55% {
    text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 3px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
  }

  90% {
    text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
  }

  100% {
    text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
  }
}

@keyframes type {

  0%,
  19% {
    opacity: 0;
  }

  20%,
  100% {
    opacity: 1;
  }
}

#static_1 {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 91;
  mix-blend-mode: screen;
  opacity: 0;
}

.static_image {
  width: 100%;
  height: 100%;
}

#next_video, #previous_video, #youtube_link, #mute_dial_b {
  position: absolute;
  z-index: 10000000000;
  pointer-events: auto;
  text-align:center;
}

#next_video {
left: 106.5%;
top: 26%;
  transform: rotate(5.0deg);
}

#previous_video {
left: 106%;
top: 42%;
transform: rotate(-5.0deg);
}


#youtube_link {
left: 106%;
top: 57%;
transform: rotate(3.0deg);
}

#mute_dial_b {
left: 112.5%;
top: 84%;
transform: rotate(-30.0deg);
}

@font-face {
  font-family: 'impact_label_regular';
  src: url('https://assets.codepen.io/122556/Impact_Label-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'impact_label_reversed_regular';
  src: url('https://assets.codepen.io/122556/Impact_Label_Reversed-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

a.tv_label, button.tv_label {
  font-family: 'impact_label_reversed_regular';
  font-size: 2.8vw;
  line-height: 2.0vw;
  color: var(--offwhite);
  padding: 3px;
  display: inline-block;
  text-decoration: none;
  padding-left: 10px;
  padding-right: 10px;
  border-top-left-radius: 3px;
  transition-duration: 0.3s;
  vertical-align: baseline;
  transition-property: transform, color, background-image, background-position, box-shadow, text-shadow;
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
  transition-timing-function: ease-out;
  margin-bottom: 6.9vw;
  cursor: pointer;
  border:0;
  white-space: nowrap;
}

a.tv_label:hover, button.tv_label:hover {
  transform: rotate(0deg);
}

.red_label {
  background-size: 300% 100%;
  background-image: linear-gradient(to right, #660000, #990000, #AA0000, #990000);
}

.blue_label {
  background-size: 300% 100%;
  background-image: linear-gradient(to right, #000066, #000099, #0000AA, #000099);
}

.green_label {
  background-size: 300% 100%;
  background-image: linear-gradient(to right, #006600, #009900, #00AA00, #009900);
}

.black_label {
  background-size: 300% 100%;
  background-image: linear-gradient(to right, #111111, #222222, #333333, #222222);
}

.tv_label:hover {
  background-position: 100% 0;
}

.rotate_-1_deg {
  transform: rotate(-1deg);
}

.rotate_1_deg {
  transform: rotate(1deg);
}

.rotate_2_deg {
  transform: rotate(2deg);
}

.on_channel:hover {
  background-color: #000099;
}

.off_shadow {
  box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);
}

.on_shadow,
.on_shadow:hover,
.off_shadow:hover {
  box-shadow: 2px 5px 2px rgba(0, 0, 0, 0.3);
  text-shadow: 2px 0px 0px rgba(0, 0, 0, 0.5);
}

.shifter {
  vertical-align: top;
  line-height: 16px;
}

/* Base VHS container */
#vhs_stack {
  position: absolute;
  left: 0;
  bottom: 85.5vw;
  width: 100%;
  z-index: 10000000000;
}

.vhs_sleeve {
  width: 80%;
  aspect-ratio: 819 / 123;
  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
  pointer-events: auto;
  position: relative;
  cursor: pointer;
  transition: margin-left 0.3s;
}

.vhs_sleeve_on {
  background-color: #999;
  border: 3px solid #ddd;
  border-radius: 0.3vw;
  box-sizing: content-box;
}

.vhs_sleeve_off {
  border-top: 3px solid rgba(255, 255, 255, 0.2);
}

/* Offset positions */
.vhs_sleeve_1_offset {
  margin-left: 2vw;
  z-index: 100;
}

.vhs_sleeve_2_offset {
  margin-left: 3vw;
  z-index: 99;
}

.vhs_sleeve_3_offset {
  margin-left: 1vw;
  z-index: 98;
}

.vhs_sleeve_4_offset {
  margin-left: 5vw;
  z-index: 97;
}

.vhs_sleeve_5_offset {
  margin-left: 7vw;
  z-index: 96;
}

.vhs_sleeve_6_offset {
  margin-left: 1.5vw;
  z-index: 95;
}

.vhs_sleeve_1_offset:hover {
  margin-left: 5vw;
}

.vhs_sleeve_2_offset:hover {
  margin-left: 6vw;
}

.vhs_sleeve_3_offset:hover {
  margin-left: 4vw;
}

.vhs_sleeve_4_offset:hover {
  margin-left: 8vw;
}

.vhs_sleeve_5_offset:hover {
  margin-left: 10vw;
}

.vhs_sleeve_6_offset:hover {
  margin-left: 4.5vw;
}

/* Colour Variants */
.vhs_sleeve_1_color {
  background-color: #f00;
  border-color: #f00;
}

.vhs_sleeve_2_color {
  background-color: #aaa;
  border-color: #ccc;
}

.vhs_sleeve_3_color {
  background-color: #333;
  border-color: #999;
}

.vhs_sleeve_4_color {
  background-color: #033;
  border-color: #033;
}

.vhs_sleeve_5_color {
  background-color: #999;
  border-color: #999;
}

.vhs_sleeve_6_color {
  background-color: #ccc;
  border-color: #ccc;
}

.vhs_tape_1_color {
  background-color: #222;
}

.vhs_tape_2_color {
  background-color: #232323;
}

.vhs_tape_3_color {
  background-color: #202020;
}

.vhs_tape_4_color {
  background-color: #242424;
}

.vhs_tape_5_color {
  background-color: #262626;
}

.vhs_tape_6_color {
  background-color: #323232;
}

/* Tape Structure */
.vhs_tape {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 0.6vw;
  background-color: #222;
}

.vhs_join {
  background-color: #000;
  height: 1%;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 0;
}

.vhs_tab_hole_open {
  position: absolute;
  top: 50%;
  left: 13%;
  width: 3vw;
  height: 4vw;
  background-color: #000;
  z-index: 100;
}

.vhs_tab_hole_closed {
  position: absolute;
  top: 50%;
  left: 13%;
  width: 3vw;
  height: 4vw;
  border-top: 1vw solid #000;
  border-left: 0.5vw solid #000;
  border-right: 0.5vw solid #000;
  z-index: 100;
}

/* Label Holder and Label */
.vhs_label_holder {
  position: absolute;
  left: 18%;
  top: 1.8vw;
  width: 75%;
  border-radius: 0.5vw;
  background-color: rgba(0, 0, 0, 0.2);
  aspect-ratio: 619 / 90;
}

.vhs_tape_label {
  position: absolute;
  left: 1%;
  top: 0%;
  right: 1%;
  bottom: 1%;
  border-radius: 0.45vw;
  background-color: #fefdfa;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-origin: center;
}

.vhs_tape_1_label {
  transform: rotate(1deg);
  background-color: #f4efdc;
}

.vhs_tape_2_label {
  transform: rotate(-1deg);
  background-color: #ffffdd;
}

.vhs_tape_3_label {
  transform: rotate(1deg);
  background-color: #fffffa;
}

.vhs_tape_4_label {
  transform: rotate(-1deg);
  background-color: #fafafa;
}

.vhs_tape_5_label {
  transform: rotate(1deg);
  background-color: #f4efdc;
}

.vhs_tape_6_label {
  transform: rotate(-1deg);
  background-color: #fafafa;
  border-top: 1px solid #fff;
}

.vhs_tape_1_label {
  background-color: #d8cbc5;
}

.vhs_tape_2_label {
  background-color: #fdefe7;
}

.vhs_tape_3_label {
  background-color: #fdf3ed;
}

.vhs_tape_4_label {
  background-color: #fdefe7;
}

.vhs_tape_5_label {
  background-color: #efe1da;
}

.vhs_tape_6_label {
  background-color: #d8cbc5;
}

/* Label Fonts and Pens */
.font_1_style {
  font-family: 'Just Another Hand', cursive;
  font-size: 7vw;
  letter-spacing: 0.3vw;
}

.font_2_style {
  font-family: 'Permanent Marker', cursive;
  font-size: 3.3vw;
  letter-spacing: 0.3vw;
}

.font_3_style {
  font-family: 'Architects Daughter', cursive;
  font-size: 3.3vw;
  letter-spacing: 0.3vw;
}

.font_4_style {
  font-family: 'Just Me Again Down Here', cursive;
  font-size: 5vw;
  letter-spacing: 0.3vw;
}

.font_5_style {
  font-family: 'Walter Turncoat', cursive;
  font-size: 3.3vw;
  letter-spacing: 0.3vw;
}

.font_6_style {
  font-family: 'Caveat Brush', cursive;
  font-size: 4.3vw;
  letter-spacing: 0.3vw;
}

.black_pen {
  color: rgba(0, 0, 0, 0.9);
  mix-blend-mode: multiply;
  transform: rotate(-1deg);
}

.red_pen {
  color: rgba(153, 0, 0, 0.9);
  mix-blend-mode: multiply;
  transform: rotate(-1deg);
}

.blue_pen {
  color: rgba(0, 0, 102, 0.9);
  mix-blend-mode: multiply;
  transform: rotate(-1deg);
}

.green_pen {
  color: rgba(0, 102, 0, 0.9);
  mix-blend-mode: multiply;
  transform: rotate(-1deg);
}

/* Optional Extras */
.vhs_label_grey_grid {
  background-size: 2vw 2vw;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 1px, transparent 1px);
}

.vhs_label_blue_grid {
  background-size: 2.5vw 2.5vw;
  background-image: linear-gradient(to right, rgba(0, 0, 102, 0.5) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 102, 0.5) 1px, transparent 1px);
}

.old_label {
  position: absolute;
  font-size: 2vw;
  letter-spacing: 0.2vw;
  font-family: 'Architects Daughter', cursive;
  line-height: 2.5vw;
  top: 3%;
  left: 2%;
  width: 100%;
  text-align: left;
  color: rgba(0, 0, 0, 0.5);
  z-index: 99;
  height: 0;
}

.current_labelx {
  font-size: 3vw;
  line-height: 3vw;
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

#timecode {
  display: inline;
  border: 0px solid #ffff00;
}

#myYouTubePlayer {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100% !important;
  height: 100% !important;
}

.outer {
  width: 100%;
  aspect-ratio: var(--outer-ar);
  background: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  position: relative;
}

/* === Image aspect ratio classes === */
.ar-4-3 {
  --image-ar: calc(4 / 3);
  --label: "4:3";
}

.ar-16-9 {
  --image-ar: calc(16 / 9);
  --label: "16:9";
}

.ar-233-100 {
  --image-ar: 2.33;
  --label: "2.33:1";
}

.ar-1-5 {
  --image-ar: 1.5;
  --label: "1.5:1";
}

.ar-3-2 {
  --image-ar: calc(3 / 2);
  --label: "3:2";
}

.ar-1-1 {
  --image-ar: 1;
  --label: "1:1";
}

.inner {
  aspect-ratio: var(--container-ar);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-origin: center;
  outline: 0px solid cyan;
  --scale: calc(var(--image-ar) / var(--outer-ar));
  transform: scale(var(--scale));
  position: relative;
}

.inner::before {
  content: var(--label);
  position: absolute;
  top: 0.25rem;
  left: 0.5rem;
  font-size: 0.9rem;
  background: rgba(0, 0, 0, 0.6);
  padding: 2px 6px;
  border-radius: 4px;
}

#you_tube_button {
  display: block;
  border: 0px solid #ff0000;
  cursor: pointer;
}




@media (min-aspect-ratio: 13.01/8) {
  #telly_mode {
    top: 15%;
    transform: scale(0.5);
  }
}

@media (max-aspect-ratio: 13/8) {
  #telly_mode {
    top: 12.5%;
    transform: scale(0.6);
  }
}

@media (max-aspect-ratio: 12/8) {
  #telly_mode {
    top: 15%;
    transform: scale(0.7);
  }
}

@media (max-aspect-ratio: 11/8) {
  #telly_mode {
    top: 15%;
    transform: scale(0.75);
  }
}

@media (max-aspect-ratio: 10/8) {
  #telly_mode {
    top: 15%;
    transform: scale(0.8);
  }
}

@media (max-aspect-ratio: 9/8) {
  #telly_mode {
    top: 15%;
    transform: scale(0.9);
  }
}

@media (max-aspect-ratio: 8/8) {
  #telly_mode {
    top: 20%;
    transform: scale(1);
  }
}

@media (max-aspect-ratio: 7.9/8) {
  #telly_mode {
    top: 10%;
    transform: scale(1);
  }
}













@media (max-aspect-ratio: 7/8) {
  #telly_mode {
    top: 8%;
    transform: scale(1.25);
  }
  

  #telly_holder {
    display: none;
  }
  #telly_holder_mobile {
    display: block;
  }
  

  #vhs_stack {

  bottom: 81.5vw;
}
  
  
  #next_video {
  left: 63.5%;
  top: 127%;
    transform: rotate(6.0deg);
  }
  
  #previous_video {
  left: 11%;
  top: 126%;
  transform: rotate(-5.0deg);
  }
  
  
  #youtube_link {
  left: 36%;
  top: 130%;
  transform: rotate(3.0deg);
  }
  
  
  #mute_dial {
   left: 91.5%;
  top:128%;
  width: 6vw;
  height: 6vw;
  border-radius: 3vw;
  }
  
  
  #mute_dial_b {
  left: 86%;
  top: 123%;
  transform: rotate(-2.0deg);
  }
  
}

@media (max-aspect-ratio: 6/8) {
  #telly_mode {
    top: 10%;
    transform: scale(1.30);
  }


  
}



@media (max-aspect-ratio: 5/8) {
  #telly_mode {
    top: 9%;
    transform: scale(1.5);
  }
  

  
}

@media (max-aspect-ratio: 4/8) {
  #telly_mode {
    top: 10%;
    transform: scale(1.65);
  }
  


}