body {
  padding: 5%;
  margin: 0;
  background-color: black;
}

#content {
  padding: 5%;
  margin: 0;
  height: 100%;
}

h1 {
  color: white;
  text-align: center;

  transition: opacity 0.5s;
  opacity: 0; 
}

#glass {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 30%;
  transition: opacity 0.5s;
}

.pointer {
  cursor: pointer;
}

.shake {
  animation: shake 0.5s;
  animation-iteration-count: 3;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

#image {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-250%, -50%);
}

.slide-in {
  animation: slide-in 0.5s forwards;
}

.slide-out {
  animation: slide-out 0.5s forwards;
}

@keyframes slide-in {
  100% { transform: translate(-50%, -50%); }
}
  
@keyframes slide-out {
  0% { transform: translateX(-50%, -50%); }
  100% { transform: translateX(-250%,-50%); }
}