Jukebox.css

h1 {
  text-align: center;
  font-family: 'Baloo Bhaina', cursive;
  color: snow;
  font-size: 3rem;
  text-transform: uppercase;
  margin-top: 0;
  letter-spacing: .3rem;
}

video {
  position: fixed;
  top: 60%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translateX(-50%) translateY(-50%);
  background: url("Coffee-Place/MP4/Coffee-Place.mp4");
  background-size: cover;
  transition: 1s opacity;
}

.Symbols {
  text-align: center;
  padding-top: 400px;
}

#Box{
  display: hidden;
}
#Box {
  background: #FFF5EE;
  padding: 0px 1px;
  border-style: ridge;;
  font: 16px sans-serif;
  line-height: 1.5;
  margin: .5em;
  margin-left: 20em;
  margin-right: 20em;
  opacity: .8;
}

#Controls {
  font-size: 1.5em;
  margin-left: 15em;
  margin-right: 15em;
}

#previous {
  margin-right: 2em;
  color: #FF1493;
}
#pause{
  margin-right: 2em;
  color: #FF1493;
}
#play{
  margin-right: 2em;
  color: #FF1493;
}
#stop{
  margin-right: 2em;
  color: #FF1493;
}
#next{
  margin-right: 2em;
  color: #FF1493;
}


@media (min-width: 400px) {
  body {
    background-color: ivory;
  }
}

@media (min-width: 550px) {
  body {
    background-color: ivory;
  }
}

@media (min-width: 750px) {
  body{
    background-color: ivory;
  }
}

@media (min-width: 1000px) {
  body {
    background-color: ivory;
  }
}
@media screen and (max-width: 500px) {
  div{width:70%;}
}
@media screen and (max-device-width: 800px) {
  html {background: url("Coffee-Place/MP4/Coffee-Place.mp4") #000 no-repeat center center fixed; }
  #bgvid { display: none; }
}