@keyframes fadezoom {
  from { 
    opacity: 0; 
    transform: scale(0.8);
  }
  to {
    opacity: 1; 
    transform: scale(1);
  }
}

html { 
  overflow:hidden; 
  background-color: black;
}

main {
  height:95vh;
  text-align: center;
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
}

#envelope-closed {
  display: inline-block;
  max-width:80vw;
  max-height:50vh;
  margin: 0 auto;
  cursor: pointer;
  animation-duration: 4s;
  animation-name: fadezoom;
  animation-fill-mode: backwards;
  animation-timing-function: ease-in-out;
}

#envelope-open {
  display:none;
  width:95vw;
  max-height:95vh;
  background-size: 100% 100%;
  margin: 0 auto;
  animation-delay: 1s;
  animation-duration: 2.23s;
}

rect {
  fill: rgba(255, 255,255,0);
  cursor: zoom-in;
}


#envelope-open, #mend-it, iframe, .instructions-top, .instructions-bottom {
  animation-name: fade;
  animation-fill-mode: backwards;
}

#mend-it {
  display:none;
  position:absolute;
  top:-8px;
  left:-8px;
  width:102vw;
  height:100vh;
  background: linear-gradient(black, transparent); 
  z-index:99;
  color:white;
  animation-duration: 2s; 
}

iframe {
  border:none;
  width:100%;
  height:100%;
  animation-delay: 5s;
  animation-duration: 1s;
}

.instructions-top { 
  position: absolute;
  top: 0px;
  width: 100%;
  animation-delay: 0.5s;
  animation-duration: 4s; 
}

.instructions-bottom {
  position: absolute;
  bottom: 0px;
  width: 100%;
  animation-delay: 2.5s;
  animation-duration: 3s;
}