html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: orange !important;
  }




@keyframes bounce{
    0%{
        transform: translateY(0);
    }

    50%{
        transform: translateY(-100px);
    }

    100%{
        transform: translateY(0);
    }
}



.hide{
  display:none;
}

.show{
  display:block;
}

#spiderball{
max-width: 100%;
 height: auto;
 position: absolute;
 top: -50px;
 animation: bounce 1s linear infinite;
 animation-delay: .10s;
 padding:0%;
}

#noona{
max-width: 50%;
  height: auto;
  animation: bounce 1s linear infinite;
  animation-delay: .4s;
  padding: 0%;
}

@media screen and (max-width: 992px) {
  #noon{
    width: 150px;
    height: auto;
    animation: bounce 1s linear infinite;
    animation-delay: .4s;
  }

    #spiderbal{
      width: 200px;
      height: auto;
      animation: bounce 1s linear infinite;
      animation-delay: .10s;
  }
  #title{
    font-size: 45px;
  }
  #advent{
    font-size: 45px;
  }
}

/* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 600px) {
  #noon{
    width: 150px;
    height: auto;
    animation: bounce 1s linear infinite;
    animation-delay: .4s;
  }

    #spiderbal{
      width: 200px;
      height: auto;
      animation: bounce 1s linear infinite;
      animation-delay: .10s;
  }

  #title{
    font-size: 45px;
  }
  #advent{
    font-size: 45px;
  }
}

/* text 
@import url('https://fonts.googleapis.com/css?family=Fira+Mono:400');
*/

h1{
  text-transform:uppercase;
  font-size:72px;
  font-family:'Ipsum';
  text-align: center;
  color:black;
  text-shadow: 4px 3px 0px white, 9px 8px 0px rgba(0,0,0,0.15);

}

#overlay{
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

#overlay2{
  position: absolute;
  left: 400;
  width: 100%;
  height: 100%;
  z-index: 10;
}


#overlay3{
  position: absolute;
  left: 700;
  width: 100%;
  height: 100%;
  z-index: 10;
}

#bored{
  max-width: 85%;
  height: auto;
  position: absolute;
  padding: 5%;
}

#bored2{
  width: auto;
  height: auto;
  position: absolute;
}

  #phones{
    max-width: 85%;
    height: auto;
    position: absolute;
    padding: 3%;
  }


  #loveNoona{
    max-width: 85%;
    height: auto;
    position: absolute;
    padding: 3%;
  }


  #vday{
    position:absolute;
    top:0;
  }
@media screen and (max-width: 600px) {
  
    #bore{
      width: 40%;
      height: auto;
      position: absolute;
      left:150px;
      top: 0;

      #phones{
        width: 40%;
        height: auto;
        position: absolute;
        left:150px;
        top: 0;
  }