body {
     background-color: #777;
}

.tv {
  position: relative;
  width: 840px;
  height: 480px;
  margin: 120px auto 0 auto;
  border-radius: 10px;
  background: rgba(51, 51, 51, 1);
  background: -moz-linear-gradient(
    top,
    rgba(154, 156, 150, 1) 0%,
    rgba(51, 51, 51, 1) 3%,
    rgba(51, 51, 51, 1) 100%
  );
  background: -webkit-gradient(
    left top,
    left bottom,
    color-stop(0%, rgba(154, 156, 150, 1)),
    color-stop(3%, rgba(51, 51, 51, 1)),
    color-stop(100%, rgba(51, 51, 51, 1))
  );
  background: -webkit-linear-gradient(
    top,
    rgba(154, 156, 150, 1) 0%,
    rgba(51, 51, 51, 1) 3%,
    rgba(51, 51, 51, 1) 100%
  );
  background: -o-linear-gradient(
    top,
    rgba(154, 156, 150, 1) 0%,
    rgba(51, 51, 51, 1) 3%,
    rgba(51, 51, 51, 1) 100%
  );
  background: -ms-linear-gradient(
    top,
    rgba(154, 156, 150, 1) 0%,
    rgba(51, 51, 51, 1) 3%,
    rgba(51, 5,1 51, 1) 100%
  );
  background: linear-gradient(
    to bottom,
    rgba(154, 156, 150, 1) 0%,
    rgba(51, 51, 51, 1) 3%,
    rgba(51, 51, 51, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(
      startColorstr="#857969",
      endColorstr="#241b14",
      GradientType=0
    );
  -webkit-box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.75);
}

.outerRing {
  position: absolute;
  width: 816px;
  height: 456px;
  top: 10px;
  left: 10px;
  border-radius: 5px;
  background-color: #525252;
  -webkit-box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.75);
}

.middleRing {
  position: absolute;
  width: 600px;
  height: 432px;
  top: 10px;
  left: 10px;
  border-radius: 3px;
  background: rgba(51, 51, 51, 1);
  background: -moz-radial-gradient(
    center,
    ellipse cover,
    rgba(154, 156, 150, 1) 0%,
    rgba(51, 51, 51, 1) 72%,
    rgba(34, 34, 34, 1) 100%
  );
  background: -webkit-gradient(
    radial,
    center center,
    0px,
    center center,
    100%,
    color-stop(0%, rgba(154, 156, 150, 1)),
    color-stop(72%, rgba(51, 51, 51, 1)),
    color-stop(100%, rgba(34, 34, 34, 1))
  );
  background: -webkit-radial-gradient(
    center,
    ellipse cover,
    rgba(154, 156, 150, 1) 0%,
    rgba(51, 51, 51, 1) 72%,
    rgba(34, 34, 34, 1) 100%
  );
  background: -o-radial-gradient(
    center,
    ellipse cover,
    rgba(154, 156, 150, 1) 0%,
    rgba(51, 51, 51, 1) 72%,
    rgba(34, 34, 34, 1) 100%
  );
  background: -ms-radial-gradient(
    center,
    ellipse cover,
    rgba(154, 156, 150, 1) 0%,
    rgba(51, 51, 51, 1) 72%,
    rgba(34, 34, 34, 1) 100%
  );
  background: radial-gradient(
    ellipse at center,
    rgba(154, 156, 150, 1) 0%,
    rgba(51, 51, 51, 1) 72%,
    rgba(34, 34, 34, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(
      startColorstr="#525252",
      endColorstr="#1a1511",
      GradientType=1
    );
  -webkit-box-shadow: inset 0px 0px 32px 0px rgba(0, 0, 0, 0.75),
    0px 0px 16px -1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: inset 0px 0px 32px 0px rgba(0, 0, 0, 0.75),
    0px 0px 16px -1px rgba(0, 0, 0, 0.75);
  box-shadow: inset 0px 0px 32px 0px rgba(0, 0, 0, 0.75),
    0px 0px 16px -1px rgba(0, 0, 0, 0.75);
}

.screen {
  position: absolute;
  z-index: 2;
  width: 528px;
  height: 384px;
  top: 20px;
  left: 30px;
  background: #4a5453;
  z-index: 2;
  border-radius: 50% / 20%;
  border: 10px solid #1a1a1a;
  overflow: hidden;
  -webkit-box-shadow: inset 0px 0px 10px 6px rgba(0, 0, 0, 0.9),
    0px 0px 16px 0px rgba(0, 0, 0, 0.75),
    inset 0px 0px 125px 20px rgba(255, 255, 255, 0.5);
  -moz-box-shadow: inset 0px 0px 10px 6px rgba(0, 0, 0, 0.9),
    0px 0px 16px 0px rgba(0, 0, 0, 0.75),
    inset 0px 0px 125px 20px rgba(255, 255, 255, 0.5);
  box-shadow: inset 0px 0px 10px 6px rgba(0, 0, 0, 0.9),
    0px 0px 16px 0px rgba(0, 0, 0, 0.75),
    inset 0px 0px 125px 20px rgba(255, 255, 255, 0.5);
}

.movie {
  position: absolute;
  top: -10px;
  left: -165px;
  width: 750px;
  height: 320px;
  opacity: 0.7;
}

.sidePanel {
  position: absolute;
  width: 180px;
  height: 432px;
  top: 20px;
  right: 20px;
  border: 4px solid #262626;
  border-radius: 3px;
  background-image: repeating-linear-gradient(
    to bottom,
    #B8BAB5,
    #9A9C96 2%,
    #333 2%,
    #000000 4%
    /* #bba180,
    #bba180 2%,
    #26211d 2%,
    #26211d 4% */
  );
    
     
  -webkit-box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.75),
    inset 0px 0px 16px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.75),
    inset 0px 0px 16px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.75),
    inset 0px 0px 16px 0px rgba(0, 0, 0, 0.75);
}

.channelBox {
  position: absolute;
  width: 172px;
  height: 76px;
  top: 2%;
  background-color: #222222;
  -webkit-box-shadow: inset 0px 0px 60px 0px rgba(55, 45, 35, 1);
  -moz-box-shadow: inset 0px 0px 60px 0px rgba(55, 45, 35, 1);
  box-shadow: inset 0px 0px 60px 0px rgba(55, 45, 35, 1);
}

.channelScreen {
  position: absolute;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 36px;
  height: 36px;
  top: 20px;
  left: 15px;
  background-color: #24130c;
  color: #f5c8c8;
  border-radius: 3px;
  font-family: "Kelly Slab", cursive;
  font-size: 24px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 1),
    0 0 30px rgba(255, 255, 255, 1), 0 0 40px #ff0000, 0 0 70px #ff0000,
    0 0 80px #ff0000, 0 0 100px #ff0000;
}

.power {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  top: 23px;
  right: 15px;
  cursor: pointer;
  background: rgba(219, 219, 219, 1);
  background: -moz-radial-gradient(
    center,
    ellipse cover,
    rgba(219, 219, 219, 1) 0%,
    rgba(247, 247, 247, 1) 0%,
    rgba(145, 145, 145, 1) 42%,
    rgba(235, 235, 235, 1) 100%
  );
  background: -webkit-gradient(
    radial,
    center center,
    0px,
    center center,
    100%,
    color-stop(0%, rgba(219, 219, 219, 1)),
    color-stop(0%, rgba(247, 247, 247, 1)),
    color-stop(42%, rgba(145, 145, 145, 1)),
    color-stop(100%, rgba(235, 235, 235, 1))
  );
  background: -webkit-radial-gradient(
    center,
    ellipse cover,
    rgba(219, 219, 219, 1) 0%,
    rgba(247, 247, 247, 1) 0%,
    rgba(145, 145, 145, 1) 42%,
    rgba(235, 235, 235, 1) 100%
  );
  background: -o-radial-gradient(
    center,
    ellipse cover,
    rgba(219, 219, 219, 1) 0%,
    rgba(247, 247, 247, 1) 0%,
    rgba(145, 145, 145, 1) 42%,
    rgba(235, 235, 235, 1) 100%
  );
  background: -ms-radial-gradient(
    center,
    ellipse cover,
    rgba(219, 219, 219, 1) 0%,
    rgba(247, 247, 247, 1) 0%,
    rgba(145, 145, 145, 1) 42%,
    rgba(235, 235, 235, 1) 100%
  );
  background: radial-gradient(
    ellipse at center,
    rgba(219, 219, 219, 1) 0%,
    rgba(247, 247, 247, 1) 0%,
    rgba(145, 145, 145, 1) 42%,
    rgba(235, 235, 235, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(
      startColorstr="#dbdbdb",
      endColorstr="#ebebeb",
      GradientType=1
    );
  -webkit-box-shadow: 0px 0px 7px 2px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 7px 2px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 7px 2px rgba(0, 0, 0, 0.75);
}

.powerOn {
  width: 16px;
  height: 16px;
  -webkit-box-shadow: 0px 3px 15px 4px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 3px 15px 4px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 3px 15px 4px rgba(0, 0, 0, 0.75);
}

.powerText {
  position: absolute;
  top: 50px;
  right: 10px;
  font-size: 8px;
  color: #B8BAB5;
  font-family: "Montserrat", sans-serif;
}

.channelText {
  position: absolute;
  top: 49px;
  right: 50px;
  font-size: 8px;
  color: #B8BAB5;
  font-family: "Montserrat", sans-serif;
}

.channelSelect {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: absolute;
  width: 36px;
  height: 36px;
  top: 16px;
  right: 45px;
  font-size: 14px;
}

.buttons {
  padding: 2px;
  margin: 2px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  color: #B8BAB5;
  background-color: #241a0e;
  -webkit-box-shadow: inset 0px -3px 3px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: inset 0px -3px 3px 0px rgba(0, 0, 0, 0.75);
  box-shadow: inset 0px -3px 3px 0px rgba(0, 0, 0, 0.75);
}

.buttons:active {
  transform: translate(0px, 3px);
  box-shadow: none;
}

.buttons:focus {
  outline: none;
}

.channelList {
  padding: 20px 20px 0 20px;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: left;
  font-size: 14px;
  background-color: #6C0000;
  color: #f0f6f6;
  font-family: "Montserrat", sans-serif;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000,
    -1px 1px 0 #000, 1px 1px 0 #000;
  overflow-y: auto;
}

.channelList h4 {
  display: block;
  width: 100%;
  text-align: center;
  padding-bottom: 10px;
  margin-bottom: 20px;
  font-weight: 700;
  font-size: 24px;
  text-shadow: 2px 2px 4px #000;
}

.time {
  clear:both
}

.channelLine {
  display: flex;
  padding: 0 0 5px 0;
}

.channelLine:hover {
  background-color: #7C0000; /* Slightly lighter on hover */
}

.channelNumber {
  flex: 0 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #420000;
  margin-right: 10px;
  font-size: 15px;
  font-weight: 400;
  border-radius: 4px;

}
  flex: 1;
  padding: 5px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.description {
  flex: 1;
  padding: 0px 0 8px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
    justify-content: center;
  align-items: center;
  margin-top:0px!important;
}

/* Handle text truncation for long titles */
.description span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  color:#eee;
}

.channels {display:none;
  position: absolute;
  top: 25px;
  left: 35px;
  font-size: 30px;
  font-family: "Kelly Slab", cursive;
  background-color: rgba(92, 92, 92, 0);
  z-index: 5;
  opacity: 0;
  color: #efef44;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000,
    -1px 1px 0 #000, 1px 1px 0 #000;
  animation: channel 2.5s 1;
}

.startImage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  background-color: #6C0000;
  animation: fadeIn 5s 1;
}

.turnOff {
  animation: turnOff 0.3s 1;
}

/* .base {
  position: absolute;
  width: 500px;
  height: 20px;
  left: 100px;
  bottom: -20px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  background: rgba(36, 27, 20, 1);
  background: -moz-linear-gradient(
    top,
    rgba(36, 27, 20, 1) 0%,
    rgba(9, 5, 2, 1) 68%,
    rgba(133, 121, 105, 1) 100%
  );
  background: -webkit-gradient(
    left top,
    left bottom,
    color-stop(0%, rgba(36, 27, 20, 1)),
    color-stop(68%, rgba(9, 5, 2, 1)),
    color-stop(100%, rgba(133, 121, 105, 1))
  );
  background: -webkit-linear-gradient(
    top,
    rgba(36, 27, 20, 1) 0%,
    rgba(9, 5, 2, 1) 68%,
    rgba(133, 121, 105, 1) 100%
  );
  background: -o-linear-gradient(
    top,
    rgba(36, 27, 20, 1) 0%,
    rgba(9, 5, 2, 1) 68%,
    rgba(133, 121, 105, 1) 100%
  );
  background: -ms-linear-gradient(
    top,
    rgba(36, 27, 20, 1) 0%,
    rgba(9, 5, 2, 1) 68%,
    rgba(133, 121, 105, 1) 100%
  );
  background: linear-gradient(
    to bottom,
    rgba(36, 27, 20, 1) 0%,
    rgba(9, 5, 2, 1) 68%,
    rgba(133, 121, 105, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(
      startColorstr="#241b14",
      endColorstr="#857969",
      GradientType=0
    );
}  */

@keyframes channel {
  0% {
    opacity: 0.6;
  }
  99% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
  }
}

@keyframes turnOff {
  0%: {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(90deg);
    opacity: 0;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  60% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.7;
  }
}

@keyframes flicker {
  0% {
    opacity: 0.27861;
  }
  5% {
    opacity: 0.34769;
  }
  10% {
    opacity: 0.23604;
  }
  15% {
    opacity: 0.90626;
  }
  20% {
    opacity: 0.18128;
  }
  25% {
    opacity: 0.83891;
  }
  30% {
    opacity: 0.65583;
  }
  35% {
    opacity: 0.67807;
  }
  40% {
    opacity: 0.26559;
  }
  45% {
    opacity: 0.84693;
  }
  50% {
    opacity: 0.96019;
  }
  55% {
    opacity: 0.08594;
  }
  60% {
    opacity: 0.20313;
  }
  65% {
    opacity: 0.71988;
  }
  70% {
    opacity: 0.53455;
  }
  75% {
    opacity: 0.37288;
  }
  80% {
    opacity: 0.71428;
  }
  85% {
    opacity: 0.70419;
  }
  90% {
    opacity: 0.7003;
  }
  95% {
    opacity: 0.36108;
  }
  100% {
    opacity: 0.24387;
  }
}

.crt::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}
.crt::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  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)
    );
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

.crtOff::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  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)
    );
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

crtOff::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}

#author {
  padding-top: 25px;
  text-align: center;
  color: #c8c8c8;
  font-family: Raleway;
  font-size: 14px;
}

@media screen and (max-width: 700px) {
  .contain {
    -moz-transform: scale(0.70);
    -o-transform: scale(0.70);
    -webkit-transform: scale(0.70);
    transform: scale(0.70);
  }
}