html,
body {
    height: 100%;
    width: 100%;
    background-color: black;
}

.carousel,
.item,
.active {
    height: 100%;
}

.carousel-inner {
  height: 100%;

}

#myCarousel {
  background-color: blue;
  background-image: radial-gradient(RoyalBlue  0%, Navy 100%);
  padding-top:40px;
  margin-right:20%;
  margin-left:60px;
}

.carousel-caption{
    position:fixed;
    top: 10%;
}

h2{
    color: white;
    font-size: 60px;
    font-family: 'vcr_osd_monoregular';
    text-shadow: none;
    position: relative;
    top: 0%;
    left: 0%;
    margin: 0 auto;
    z-index: 999;
}

.birds{
    font-family: 'vcr_osd_monoregular';
}

.carousel-indicators{
   position: fixed;
   bottom: 20%;
   width: 45%;
   border-width: 3px;
   border-style: solid;
   height: 10px;
   border-color: white;
}

#tracker{
    animation: borderShadow 40s infinite;
}

img{
    pointer-events: none;
}

p{
    color: white;
    font-size: 16px;
    font-family: 'vcr_osd_monoregular';
    text-shadow: none;
    position: relative;
    left: 0%;
    margin: 0 auto;
    z-index: 999;
}

a{color:red}

li{
    padding:10px;
    font-family: 'vcr_osd_monoregular';
    font-size: 24px;
    text-shadow: none;
}

@keyframes flicker {
  20% {
    opacity: 0.97438;
  }
  30% {
    opacity: 0.90001;
  }
  80% {
    opacity: 0.97441;
  }
}

.vcr-container {
  background: black;
  position: relative;
  animation: flicker 0.005s infinite;
}

.vcr-container::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;
}

.vcr-container::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;
}

@keyframes overlay-anim {
  0% {
    visibility: hidden;
  }
  20% {
    visibility: hidden;
  }
  21% {
    visibility: visible;
  }
  100% {
    visibility: hidden;
  }
}

.overlay {
  color: white;
  position: absolute;
  font-family: 'vcr_osd_monoregular';
  top: 10%;
  left: 5%;
  font-size: 38px;
  pointer-events: none;
  animation: overlay-anim 10s linear;
  z-index:1
}

.screen {
    padding: 50px;

}

.glitch {
    width:100%;
}

@keyframes noise-anim {
  0% {
    clip: rect(73px, 9999px, 61px, 0);
  }
  5% {
    clip: rect(31px, 9999px, 47px, 0);
  }
  10% {
    clip: rect(76px, 9999px, 95px, 0);
  }
  15% {
    clip: rect(42px, 9999px, 41px, 0);
  }
  20% {
    clip: rect(65px, 9999px, 72px, 0);
  }
  25% {
    clip: rect(24px, 9999px, 82px, 0);
  }
  30% {
    clip: rect(93px, 9999px, 79px, 0);
  }
  35% {
    clip: rect(3px, 9999px, 30px, 0);
  }
  40% {
    clip: rect(76px, 9999px, 22px, 0);
  }
  45% {
    clip: rect(40px, 9999px, 95px, 0);
  }
  50% {
    clip: rect(11px, 9999px, 72px, 0);
  }
  55% {
    clip: rect(20px, 9999px, 82px, 0);
  }
  60% {
    clip: rect(11px, 9999px, 20px, 0);
  }
  65% {
    clip: rect(76px, 9999px, 86px, 0);
  }
  70% {
    clip: rect(36px, 9999px, 93px, 0);
  }
  75% {
    clip: rect(28px, 9999px, 70px, 0);
  }
  80% {
    clip: rect(38px, 9999px, 9px, 0);
  }
  85% {
    clip: rect(5px, 9999px, 82px, 0);
  }
  90% {
    clip: rect(26px, 9999px, 73px, 0);
  }
  95% {
    clip: rect(57px, 100%, 69px, 0);
  }
  100% {
    clip: rect(51px, 9999px, 96px, 0);
  }
}

.glitch:after {
  content: attr(data-text);
  position: absolute;
  width: 100%;
  left: 1px;
  text-shadow: -1px 0 blue;
  top: 0px;
  animation: noise-anim 5s infinite linear alternate-reverse;
}

@keyframes noise-anim-2 {
  0% {
    clip: rect(41px, 9999px, 82px, 0);
  }
  5% {
    clip: rect(6px, 9999px, 60px, 0);
  }
  10% {
    clip: rect(81px, 9999px, 100px, 0);
  }
  15% {
    clip: rect(14px, 9999px, 78px, 0);
  }
  20% {
    clip: rect(32px, 9999px, 1px, 0);
  }
  25% {
    clip: rect(81px, 9999px, 97px, 0);
  }
  30% {
    clip: rect(47px, 9999px, 19px, 0);
  }
  35% {
    clip: rect(63px, 9999px, 95px, 0);
  }
  40% {
    clip: rect(54px, 9999px, 86px, 0);
  }
  45% {
    clip: rect(51px, 9999px, 73px, 0);
  }
  50% {
    clip: rect(21px, 9999px, 39px, 0);
  }
  55% {
    clip: rect(51px, 9999px, 74px, 0);
  }
  60% {
    clip: rect(98px, 9999px, 65px, 0);
  }
  65% {
    clip: rect(70px, 9999px, 5px, 0);
  }
  70% {
    clip: rect(60px, 9999px, 86px, 0);
  }
  75% {
    clip: rect(73px, 9999px, 51px, 0);
  }
  80% {
    clip: rect(53px, 9999px, 44px, 0);
  }
  85% {
    clip: rect(98px, 9999px, 66px, 0);
  }
  90% {
    clip: rect(4px, 9999px, 27px, 0);
  }
  95% {
    clip: rect(50px, 9999px, 77px, 0);
  }
  100% {
    clip: rect(13px, 9999px, 54px, 0);
  }
}

.glitch:before {
    content: attr(data-text);
    position: absolute;
    left: -4px;
    width: 100%;
    text-shadow: 1px 0 blue;
    top: 0;
    color: white;
    overflow: hidden;
    clip: rect(0, 900px, 0, 0);
}

.placard{
    background-image: url("../../static/img/Fine-Wood-Textures-1.jpg");
    border: 3px solid tan;
    color: white;
    position:fixed;
    top:10%;
    left:84%;
    z-index:99999999999;
    width: 12%;
    border-radius: 5%;
    font-size: 1.2em;
    text-shadow: 1px 1px tan;
    text-align: center;
    padding: 10px;
}

#frameImg {
    position:absolute;
    width:100%;
    height:100%;
    z-index:999;
}

#tv {
    position: fixed;
    top: 10%;
    left: 5%;
    width: 75%;
    height: 85%;
    z-index: 500;
    opacity: 0;
    pointer-events: none;
}

#tracker {
    background-color:white;
    height:20px;
    width:20px;
}

@keyframes turn-on{
  0%{
    transform:scale(1,0.8) translate3d(0,0,0);
    -webkit-filter:brightness(30);
    filter:brightness(30);
    opacity:1;
  }
  3.5%{
    transform:scale(1,0.8) translate3d(0,80%,0);
  }

  3.6%{
    transform:scale(1,0.8) translate3d(0,-80%,0);
    opacity:1;
  }

  9%{
    transform:scale(1.3,0.6) translate3d(0,80%,0);
    -webkit-filter:brightness(30);
    filter:brightness(30);
    opacity:0;
  }



  11%{
    transform:scale(1,1) translate3d(0,0,0);
    -webkit-filter:contrast(0) brightness(0) ;
    filter:contrast(0) brightness(0);
    opacity:0;
  }

  100%{
    transform:scale(1,1) translate3d(0,0,0);
    -webkit-filter:contrast(1) brightness(1.2) saturate(1.3);
    filter:contrast(1) brightness(1.2) saturate(1.3);
    opacity:1;
  }
}

img
{
    box-shadow: 0px 0px 50px #fff;
}