* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  perspective: 400vw;
  overflow: hidden;
}

body, .door {
  background: url(i/bg_p.jpg);
}

.box {
  position: relative;
  background: red;
  width: 15vmin;
  height: 15vmin;
  align-self: center;
}

main {
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(6, 1fr);
  justify-items: center;
  width: 100vw;
}

@media screen and (orientation: landscape) {
  main {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }
  body, .door {
    background: url(i/bg_l.jpg);
  }
}


img {
  width: 100%;
}

.door {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 2px dashed #444;
  border-left: none;
  font-size: 4vmin;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
  padding: .5em;
  transform-origin: left;
  transition: transform 2s ease;
  text-shadow: 0 0 1vmin white;
}

.door.open {
  transform: rotatey(-95deg);

}


.f1 {
    border: none;
    animation: fone 50s infinite;
}

.f2 {
    border: none;
    animation: ftwo 60s infinite;
}

@keyframes fone {
  0% {transform: translateX(0px) translateY(0px) rotate(-90deg); opacity: 0; }
  25% {opacity: 0.75; }
  100% {transform: translateX(-400px) translateY(3000px) rotate(90deg); opacity: 0; }
}

@keyframes ftwo {
    0% {transform: translateX(0px) translateY(0px) rotate(-50deg); opacity: 0; }
  25% {opacity: 0.5; }
  100% {transform: translateX(-200px) translateY(4000px) rotate(216deg); opacity: 0; }
}