html,
body {
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
background: url(tv-1920.jpg) rgba(0, 0, 0, 0.9);
background-size: contain;
background-blend-mode: hard-light;
background-size: cover;	
font-family: "Josefin sans", sans-serif;
}

.outer {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
	
}


.photo-frame {
	background: url('frame.png') rgba(0, 0, 0, 0.07);
	background-blend-mode: color-burn;
	background-repeat: no-repeat;
	background-size: 99.9%;
	width: 846px;
	height: 562px;
	position: relative;
	justify-items: center;
	margin: 20% auto;
	box-shadow: 0 16px 37px rgba(143, 143, 143, 0.6);
	z-index: 1;
  }
  /*
  .photo-frame > iframe {
	position: absolute;
	top: 51.54%;
    left: 40.39%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
	width: 560px;
	height: 315px;
	  
  }


.overlay-video {
  position: absolute;
  top: 51.54%;
  left: 40.39%;
  transform: translate(-50%, -50%);
  width: 671px;
  height: 410px;
  z-index: 9;
}
*/
.crt-tv {
  width: 588px;
  height: 476px;
  border-radius: 81px;
  overflow: hidden;
  border: 12px solid #222;
  background: #111;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);

position: absolute;
  top: 48.91%;
  left: 39.68%;
  transform: translate(-50%, -50%);
  
  z-index: 9;	
}

#myVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.3s ease;

  filter: 
    saturate(1.5)
    contrast(1.4)
    brightness(1.1);
}

/* Video fills container
.crt-tv .overlay-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
 */

/* Inner curved screen glass effect */
.crt-tv::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border-radius: 40px;
  background: radial-gradient(
    ellipse at center,
    rgba(255,255,255,0.05) 0%,
    rgba(0,0,0,0.15) 80%
  );
  pointer-events: none;
  z-index: 2;
}

/* Optional glass shine */
.crt-tv::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border-radius: 40px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.02) 40%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 3;
}



  .b button {
	position: absolute;
	  color: #FFEC60;
	  background-color: rgb(255, 255, 255, 0.1);
	cursor: pointer;
	bottom: 2.81%;
    right: 3.96%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
	font-size: 0.8em;
	  font-weight: bold;
	border: 1px;
	padding-bottom: 14px;
	  display: flex;
	flex-direction: column;
	justify-content: flex-start; /* align text to the top */
	align-items: center;

}

.b button:hover {
	background-color: rgb(255, 255, 7);
	border: 0px;
	
}

#muteToggleBtn {
  	position: absolute;
	  color: #FFEC60;
	  background-color: rgb(255, 255, 255, 0.1);
	cursor: pointer;
	bottom: 23.14%;
    right: 5.94%;
	width: 47px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
	font-size: 0.8em;
	  font-weight: bold;
	border: 1px;
	padding: 14px;
	  display: flex;
	flex-direction: column;
	justify-content: flex-start; /* align text to the top */
	align-items: center;
}


#controlsWrapper {
  position: absolute;
  top: 14.64%;
    right: 2.88%;
  display: flex;
  flex-direction: column;
	font-size: 0.8em;
	  font-weight: bold;
  gap: 3px;
  background: rgba(255, 255, 255, 0.1);
  padding: 10px;
  border-radius: 8px;
  z-index: 10;
  color: #FFEC60;
  
}

#controlsWrapper input[type="range"] {
  width: 114px;
}


/* Common slider base */
#effectSlider1,
#effectSlider2,
#volumeSlider {
  -webkit-appearance: none;
  width: 240px;
  height: 12px;
  background: linear-gradient(to right, #6e4f3a, #8b6f52); /* wood-tone */
  border: 2px solid #3a2c20;
  border-radius: 6px;
  box-shadow: inset 0 0 2px #000, 0 1px 0 #554433;
  margin: 12px 0;
  cursor: pointer;
}

/* Webkit track (Chrome/Safari/Edge) */
#effectSlider1::-webkit-slider-runnable-track,
#effectSlider2::-webkit-slider-runnable-track,
#volumeSlider::-webkit-slider-runnable-track {
  height: 12px;
  background: linear-gradient(to right, #6e4f3a, #8b6f52);
  border-radius: 6px;
}

/* Firefox track */
#effectSlider1::-moz-range-track,
#effectSlider2::-moz-range-track,
#volumeSlider::-moz-range-track {
  height: 12px;
  background: linear-gradient(to right, #6e4f3a, #8b6f52);
  border-radius: 6px;
}

/* Webkit thumb (the "dial") */
#effectSlider1::-webkit-slider-thumb,
#effectSlider2::-webkit-slider-thumb,
#volumeSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  background: radial-gradient(circle, #e2d4b7 20%, #b29e7f 80%);
  border: 2px solid #5a4a36;
  border-radius: 50%;
  box-shadow: 0 1px 1px rgba(0,0,0,0.4), inset -2px -2px 4px rgba(255,255,255,0.2);
  margin-top: -6px;
  transition: transform 0.2s ease;
}

#effectSlider1:hover::-webkit-slider-thumb,
#effectSlider2:hover::-webkit-slider-thumb,
#volumeSlider:hover::-webkit-slider-thumb {
  transform: scale(1.1);
}

/* Firefox thumb */
#effectSlider1::-moz-range-thumb,
#effectSlider2::-moz-range-thumb,
#volumeSlider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background: radial-gradient(circle, #e2d4b7 20%, #b29e7f 80%);
  border: 2px solid #5a4a36;
  border-radius: 50%;
  box-shadow: 0 1px 1px rgba(0,0,0,0.4), inset -2px -2px 4px rgba(255,255,255,0.2);
  transition: transform 0.2s ease;
}

#effectSlider1:hover::-moz-range-thumb,
#effectSlider2:hover::-moz-range-thumb,
#volumeSlider:hover::-moz-range-thumb {
  transform: scale(1.1);
}

  
@media screen and (max-width: 846px) {

	.outer {
		width: 100vw;
	}
}

@media screen and (max-width: 660px) {

	.outer {
		width: 110vw;
	}
}

@media screen and (max-width: 610px) {

	.outer {	
		width: 117vw;
	}
}

@media screen and (max-width: 580px) {

	.outer {		
		width: 121vw;
	}
}