@media only screen and (max-width: 1000px) {
  body {
    font-size:50px;
  }
  #videoList {
    width:75%;
    margin-left:20%; 
  }

  #topBannerText {
      padding:3%;
  }
}

@media only screen and (min-width: 1000px) {
  body {
      font-size:30px;
      &::before {
	  background-image: url('mountain.png');
      }
  }

  #videoList {
    width:55%;
    margin-left:40%; 
  }
  #topBannerText {
      padding:1%;
  }
}

body {
    margin-top:3%;
    background-color: #000;
    font-family: Arial, sans-serif;
    color: #FFF;
    opacity:1.0;

    &::before {  
      content: "";
      // background-image: url('https://placekitten.com/1200/800');

      
      background-size: cover;
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      opacity: 0.2;
  }

}

#topBanner {    
    width:100%;
   
    text-align:center;
    padding-top:2%;    
}

#topBannerText {
    opacity:1.0;
    border: 3px solid white;
    border-radius:1%;
    background-color:#333333;
    font-size:200%;
}

#introDiv, #afterDiv {
    width:80%;
    margin:auto;

    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}

#introText, #afterText {
    font-size:100%;
    padding:1%;    
    padding-bottom:0;
}

#videoList, #afterText {
    position:relative;
}

.videoRef {
    font-size:100%;
    padding-top:1%;
}

a:link, a:visited, a:active {
    color:#AAAAFF;
    text-decoration: none;
}

*, *::before, *::after {
  box-sizing: border-box;
}