body {
    margin: 0 auto;
    background: #303030;
    font-family: 'VT323', monospace;
    font-weight: 100;
    height: 100vh;
    overflow: hidden;
    overflow-x: hidden;
}

/*.bg-img{
    min-height: 100vh;
    background-image: url(img/2018-01-05%2008.34.55%201.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment:fixed;
    float: none;
}
*/
.glitch {
    color: white;
    font-size: 10vw;
    position: relative;
    margin: 0 auto;
    width: 66%;
    top: 40vh;
    background-color: rgba(0,0,0,0.4);
}

@keyframes noise-anim {
  0% {
    clip: rect(83px, 9999px, 23px, 0);
  }
  5% {
    clip: rect(20px, 9999px, 74px, 0);
  }
  10% {
    clip: rect(70px, 9999px, 77px, 0);
  }
  15.0% {
    clip: rect(83px, 9999px, 85px, 0);
  }
  20% {
    clip: rect(50px, 9999px, 18px, 0);
  }
  25% {
    clip: rect(36px, 9999px, 59px, 0);
  }
  30.0% {
    clip: rect(38px, 9999px, 14px, 0);
  }
  35% {
    clip: rect(92px, 9999px, 41px, 0);
  }
  40% {
    clip: rect(20px, 9999px, 22px, 0);
  }
  45% {
    clip: rect(44px, 9999px, 7px, 0);
  }
  50% {
    clip: rect(88px, 9999px, 50px, 0);
  }
  55.0% {
    clip: rect(78px, 9999px, 89px, 0);
  }
  60.0% {
    clip: rect(42px, 9999px, 73px, 0);
  }
  65% {
    clip: rect(91px, 9999px, 17px, 0);
  }
  70% {
    clip: rect(59px, 9999px, 64px, 0);
  }
  75% {
    clip: rect(55px, 9999px, 61px, 0);
  }
  80% {
    clip: rect(85px, 9999px, 42px, 0);
  }
  85.0% {
    clip: rect(100px, 9999px, 24px, 0);
  }
  90% {
    clip: rect(56px, 9999px, 45px, 0);
  }
  95% {
    clip: rect(86px, 9999px, 62px, 0);
  }
  100% {
    clip: rect(86px, 9999px, 47px, 0);
  }
}
.glitch:after {
    content: attr(data-text);
    position: absolute;
    left: 1px;
    text-shadow: -1px 0 red;
    top: 0;
    color: white;
    background: rgba(0,0,0,0);
    overflow: hidden;
    clip: rect(0, 900px, 0, 0);
    animation: noise-anim 2s infinite linear alternate-reverse;
}

@keyframes noise-anim-2 {
  0% {
    clip: rect(50px, 9999px, 70px, 0);
  }
  5% {
    clip: rect(80px, 9999px, 10px, 0);
  }
  10% {
    clip: rect(1px, 9999px, 62px, 0);
  }
  15.0% {
    clip: rect(82px, 9999px, 40px, 0);
  }
  20% {
    clip: rect(32px, 9999px, 63px, 0);
  }
  25% {
    clip: rect(63px, 9999px, 31px, 0);
  }
  30.0% {
    clip: rect(15px, 9999px, 39px, 0);
  }
  35% {
    clip: rect(17px, 9999px, 52px, 0);
  }
  40% {
    clip: rect(66px, 9999px, 59px, 0);
  }
  45% {
    clip: rect(3px, 9999px, 58px, 0);
  }
  50% {
    clip: rect(56px, 9999px, 28px, 0);
  }
  55.0% {
    clip: rect(90px, 9999px, 91px, 0);
  }
  60.0% {
    clip: rect(94px, 9999px, 97px, 0);
  }
  65% {
    clip: rect(18px, 9999px, 79px, 0);
  }
  70% {
    clip: rect(59px, 9999px, 37px, 0);
  }
  75% {
    clip: rect(35px, 9999px, 83px, 0);
  }
  80% {
    clip: rect(51px, 9999px, 57px, 0);
  }
  85.0% {
    clip: rect(28px, 9999px, 63px, 0);
  }
  90% {
    clip: rect(98px, 9999px, 55px, 0);
  }
  95% {
    clip: rect(69px, 9999px, 94px, 0);
  }
  100% {
    clip: rect(56px, 9999px, 1px, 0);
  }
}
.glitch:before {
    content: attr(data-text);
    position: absolute;
    left: -1px;
    text-shadow: 1px 0 blue;
    top: 0;
    color: white;
    background: rgba(0,0,0,0);
    overflow: hidden;
    clip: rect(0, 900px, 0, 0);
    animation: noise-anim-2 3s infinite linear alternate-reverse;
}

/* Parallax Effect */

.wrapper {
  /* The height needs to be set to a fixed value for the effect to work.
   * 100vh is the full height of the viewport. */
  height: 110%;
  /* The scaling of the images would add a horizontal scrollbar, so disable x overflow. */
  overflow-x: hidden;
  /* Enable scrolling on the page. */
  overflow-y: none;
  /* Set the perspective to 2px. This is essentailly the simulated distance from the viewport to transformed objects.*/
  perspective: 0.5px;
}

.section {
  /* Needed for children to be absolutely positioned relative to the parent. */
  position: relative;
  /* The height of the container. Must be set, but it doesn't really matter what the value is. */
  height: 115vh;
  
  /* For text formatting. */
  color: white;
    
}

.parallax::after {
  /* Display and position the pseudo-element */
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  
  /* Move the pseudo-element back away from the camera,
   * then scale it back up to fill the viewport.
   * Because the pseudo-element is further away, it appears to move more slowly, like in real life. */
  transform: translateZ(-1px) scale(3.0);
  /* Force the background image to fill the whole element. */
  background-size: 100%;
  /* Keep the image from overlapping sibling elements. */ 
  z-index: -1;
}

/* The styling for the static div. */
.static {
    background: black;
    height: 50px;
    font-family: 'Roboto', sans-serif;
    color: white;
    font-size: 6vw;
    width: 101%;
}

/* Sets the actual background images to adorable kitties. This part is crucial. */
.bg1::after {
    background-image: url('img/2018-01-05%2008.34.55%201.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    margin-top: -75px;
}

.sounds{
    min-height:100vh;
    background-color:#303030;
    
}


.images{
    text-align: center;
    background-color:#303030;
}

.backbtn{
    text-decoration: none;
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    padding-left: 50px;
}


/*Music Player Start*/


/*Music Player End*/

.music{
    font-size: 0.6em;
}

.row{
    padding-left: 5px;
    padding-right: 0px;
}

.img{
	margin: 0 auto;
	width: 300px;
    height: 600px;
}

.footer{
    font-size: 15px;
    text-align: center;
}
.back{
	font-size:15px;
	padding-left: 50px;
}

@media (max-width:820px) and (orientation: landscape){
    
    .glitch{
        margin-top: -8%;
    }
    .bg-img{
        min-height: 150vh;
        background-position: 0 -150px;
    }
    .bg1::after {
        min-height: 150vh;
        background-position: 0 -100px;
    }