body {
  width: 100vw;
  margin: 0;
  padding: 0;
  background-color: white;
}

@media only screen and (orientation: portrait) {
}

/* img */
.images {
  width: 100vw;
  display: flex;
  flex-direction: column;
}

.images img {
  width: 100vw;
  height: auto;
  display: block;
}

/* blur */
.blur-top, .blur-bottom {
  position: fixed;
  width: 100vw;
  height: 55vh;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  background-color: rgba(245, 245, 220, 0.3);
  z-index: 10;
  transform: translateZ(0);
  will-change: backdrop-filter;
  pointer-events: none;
}

.blur-top {
  top:0;
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

.blur-bottom {
  bottom: 0;
  -webkit-mask-image: linear-gradient(to top, black 60%, transparent 100%);
  mask-image: linear-gradient(to top, black 60%, transparent 100%);
}


/* frame */

.focus-frame {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 40vh;

  z-index: 15;
  pointer-events: none;
}

/* corner */
.corner {
  position: absolute;
  width: 25px;
  height: 25px;
  background-color: black;

  transform: scale(1);
  animation: pulse 2s infinite;
}

  .top-left { top: 0; left: 50px; }
  .top-right { top: 0; right: 50px; }
  .bottom-left { bottom: 0; left: 50px; }
  .bottom-right { bottom: 0; right: 50px; }

/* pulse */

.bottom-right, .top-right {
  animation-delay: 0.75s;
}

  @keyframes pulse {

  0% { transform: scale(1); }
  50% { transform: scale(2); }
  100% { transform: scale(1); }