html{
    background-image: url(https://64.media.tumblr.com/adc080471137e593bd1d479d4b37a0ef/ae39db1dc298bd9b-22/s1280x1920/28b1298b6fff2f170e4cae5e7ecd09f8454ccf1c.gif)
    ;
    background-size: 20%;
    text-align: center;
}

footer{
    text-align: center;
}

.container {
  margin-top: 40px;
  padding: 10px;
  display: inline-grid;
  background-color: #bbb2ea;
  grid-template-columns: auto auto auto auto auto;
  box-shadow: 3px 3px 6px #fbff00c4, 0 0 45px #fbff00c9, 0 0 9px rgb(177, 200, 9);
}

.zoom {
  transition: transform .2s; /* Animation */

}

.zoom:hover {
  transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

img{
  margin-right: 10px;
}


.hide {
  display: none;
  position: absolute;
  top: 350px;
  left: 90px;
  background-color: #ffffff;
  padding: 10px;
  width: 800px;
  border-radius: 5px;
}

.outro:hover .hide {
  display: block;
  color: #000000;
}

/*spiderverse*/

.hide1 {
  display: none;
  position: absolute;
  top: 350px;
  left: 90px;
  background-color: #ffffff;
  padding: 10px;
  width: 800px;
  border-radius: 5px;
}

.outro1:hover .hide1 {
  display: block;
  color: #000000;
}

/*scott*/

.hide2 {
  display: none;
  position: absolute;
  top: 350px;
  left: 90px;
  background-color: #ffffff;
  padding: 10px;
  width: 800px;
  border-radius: 5px;
}

.outro2:hover .hide2 {
  display: block;
  color: #000000;
}

/*splat*/

.hide3 {
  display: none;
  position: absolute;
  top: 350px;
  left: 90px;
  background-color: #ffffff;
  padding: 10px;
  width: 800px;
  border-radius: 5px;
}

.outro3:hover .hide3 {
  display: block;
  color: #000000;
}

/*kdr*/
.hide4 {
  display: none;
  position: absolute;
  top: 350px;
  left: 90px;
  background-color: #ffffff;
  padding: 10px;
  width: 800px;
  border-radius: 5px;
}

.outro4:hover .hide4 {
  display: block;
  color: #000000;
}