:root{--tv-green:#6cb18a;overflow:hidden;}
body{background:linear-gradient(90deg,#153b37 15%,#0d1f1e)}
.mobile-warning{display:none;}
.main-content.tv{padding:0;}
.sidebar.tv{background-image:linear-gradient(to bottom,#203051 25%,#153b37 80%);}
.sidebar-link{color:#ffcf69;padding-left:1vw;}
.sidebar::after{display:none;}

.top-row{
  display:flex;
  width:100%;
  background-image:linear-gradient(90deg,#203051,#0d1f1f);
}

.tv-home-text{
  content:'';
  background-image:url(../images/TV/TVHomeText.svg);
  background-size:contain;
  background-repeat:no-repeat;
  width:100%;
}

.clock{
  display:flex;
  color:#6a8cd2;
  width:35%;
  margin-top:1.5vw;
  margin-right:3vw;
  margin-bottom:1vw;
  font-size:1.8vw;
  justify-content:space-between;
}

.middle-row{
  display:flex;
  width:100%;
  height:100%;
  background-image:linear-gradient(90deg,#203051,#0d1f1f);
}

.tv-container{
  position:relative;
  width:85%;
  aspect-ratio:16/9;
  background-color:#000;
}

.tv-inset{
  content:'';
  position:absolute;
  z-index:2;
}
.tv-inset.top{
  top:-0.5vw;
  height:0.5vw;
  width:100%;
  background-image:linear-gradient(to top,#0008,#0000);
}
.tv-inset.bottom{
  top:100%;
  height:0.5vw;
  width:100%;
  background-image:linear-gradient(to bottom,#fff2,#0000);
}
.tv-inset.left{
  left:-1vw;
  width:1vw;
  height:100%;
  background-image:linear-gradient(to left,#0008,#0000);
}
.tv-inset.right{
  left:100%;
  width:1vw;
  height:100%;
  background-image:linear-gradient(90deg,#fff2,#0000);
}

.source-container{
  display:flex;
  width:15%;
  background-color:#12232e;
  flex-direction:column;
}

#channel{
  font-size:3vw;
  margin:10% 0 0 10%;
  color:#ffcf69;
  text-shadow:0.15vw 0.15vw #000;
}

#channelName{
  margin:0 0 10% 10%;
  font-size:2vw;
  color:var(--tv-green);
}

.source-bg{
  height:100%;
  background-image:linear-gradient(180deg,#0c2a2a 50%,#163c33,#0c2a2a);
  background-size:1vh 1vh;
}
.source-bg::before{
  content:'';
  display:block;
  width:100%;
  height:100%;
  background: linear-gradient(90deg,#0003 35%,#0000 65%);
}

#tvVideo{
  position:absolute;
  width:100%;
  height:100%;
  border:0;
}

.bottom-row{
  display:flex;
  width:100%;
  height:13vh;
  background-image:linear-gradient(90deg,#153b37,#0d1f1e);
  flex-direction:column;
  justify-content:space-around;
}

#programTitle{
  width:fit-content;
  height:fit-content;
  font-size:2vw;
  color:#cdcdcd;
  text-shadow:0.1vw 0.1vw #000;
}

#programTime{
  width:fit-content;
  font-size:2vw;
  color:var(--tv-green);
}

.bottom-buttons{
  display:flex;
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:3.6vw;
  z-index:3;
}

.bottom-buttons::before{
  content:'';
  position:absolute;
  top:0;
  width:100%;
  height:100%;
  box-shadow:inset 0 0.6vw 0.4vw -0.2vw #0008;
  pointer-events:none;
}

.bottom-button{
  width:25%;
  font-size:2vw;
  border-radius:0;
  background:#1a192d;
  box-shadow:inset 0.7vw 0 1vw -0.8vw #fff6,inset -0.7vw 0 0.6vw -0.4vw #000;
  color:#83cba3;
  text-shadow:0.15vw 0.15vw #000;
}

@media (max-width:760px){
  .mobile-warning{
    position:absolute;
    display:block;
    top:50vh;
    left:50vw;
    width:80vw;
    text-align:center;
    translate:-50% -50%;
    word-wrap:break-word;
  }
  .body{background-color:#191919;}
  .main-content.tv{display:none;}
}