#background{
    position: fixed;
    height:100vh;
    width: 100vw;
    z-index: -100;
}

#pup-pod{
    width: 40vw;
    position: absolute;
    margin-top: 20vh;
    margin-left: 35vw;
    z-index: 100;
}

#env-closed{
    position: absolute;
    z-index: 10;
    margin-top: 20vh;
    margin-left: 40vw;
    visibility: hidden;
    width: 40vw;
}

#env-opened{
    position: absolute;
    opacity: 0;
    z-index: 2;
    margin-top: 20vh;
    margin-left: 60vw;
    width: 40vw;
}

#letter{
    position: absolute;
    visibility: hidden;

    margin-top: 5vh;
    margin-left: 55vw;

    width: 40vw;
}

.letter-final{

}

@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    50% { transform: translateX(10px); }
    75% { transform: translateX(-10px); }
    100% { transform: translateX(10px); }
}

.shake{
    animation: shake 0.5s ease-in-out;
}
  

@keyframes move-left {
    0% { margin-left: 35vw; }
    100% { margin-left: 10vw; }
}

.move{
    animation: move-left 1s ease-in-out;
}

.moved{
    margin-left: 10vw !important;
}

.fade-out {
    opacity: 1;
    transition: opacity 1s ease-out;
}

.fade-out-fast {
    opacity: 1;
    transition: opacity 1s ease-out;
}

.faded {
    opacity: 0;
}

.fade-in {
    opacity: 0;
    transition: opacity 1s ease-in;
}

.faded-in {
    opacity: 1;
}


@keyframes flyInFromTop {
    0% {
      transform: translateY(-100%);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  .fly-in {
    animation: flyInFromTop 1s ease-out;
}