*{
  box-sizing: border-box;
}

/******************************************
/* LAYOUT
/*******************************************/
body {
  background-image: url("../img/bodyBackground.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  color: white;
  height: 100vh;
}

.overall {
  margin-top: 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  -webkit-text-stroke: 2px black;
  font-size: 5rem;
  text-align: center;
  color: white;
  font-weight: bold;
  margin: 1%;
}

.television {
  overflow: visible;
  height:700px;
  padding:1%;
  margin:0;
}

.content {
  position: relative;
  z-index: -2;
  left: 100px;
  top: -550px;
  height: 360px;
  width: 640px;
  background-image: url("../img/static.gif");
  background-size: cover;
  background-repeat: no-repeat;
  background-size: 100%;
  transition-property: background-image;
  transition-timing-function: linear;
}

.tvBars {
  z-index: -3;
  position: relative;
  left: 100px;
  top: -1000px;
  background-color: black;
  height: 550px;
  width: 640px;
}

h2 {
  margin-top: 10px;
  font-size: 4rem;
  color: inherit;
  -webkit-text-stroke: 2px black;
}

span {
  font-size: 4rem;
  color: inherit;
  -webkit-text-stroke: 2px black;
  margin-top: -2%;
}

#knob {
  position: relative;
  left: 794px;
  top: -1111px;
}

@media screen and (max-width: 1000px) {
  .television {
    position: fixed;
    top: 19%;
  }

  h2 {
    position: fixed;
    top: 61%;
  }

  span {
    position: fixed;
    top: 70%;
  }

  h1, h2, span {
    -webkit-text-stroke: 2px black;
    font-size: 6rem;
  }
}