@font-face {
    font-family: 'DuctusCalligraphic';
    src: url('fonts/ductuscalligraphic-webfont.woff2') format('woff2'),
         url('fonts/ductuscalligraphic-webfont.woff') format('woff');
  
    font-display: swap;
}


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

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


/* text-top */
  .text-left-top, .text-center-top, .text-right-top, .text-left-bottom, .text-center-bottom, .text-right-bottom {
    font-size: 25px;
    color: lightyellow;
    font-family: 'DuctusCalligraphic';
  }

    .text-left-top {
      position: fixed;
      top: 5px;
      left: 30px;
      text-align: left;
      color: lightyellow;
      z-index: 20;
    }

    .text-center-top {
      position: fixed;
      top: 5px;
      width: 100%;
      text-align: center;
      color: lightyellow;
      z-index: 20;
    }

    .text-right-top {
      position: fixed;
      top: 5px;
      right: 30px;
      width: 100%;
      text-align: right;
      color: lightyellow;
      z-index: 20;
    }

/* text-bottom */

    .text-left-bottom {
      position: fixed;
      bottom: 5px;
      left: 30px;
      text-align: left;
      color: lightyellow;
      z-index: 20;
    }

    .text-center-bottom {
      position: fixed;
      bottom: 5px;
      width: 100%;
      text-align: center;
      color: lightyellow;
      z-index: 20;
    }

    .text-right-bottom {
      position: fixed;
      bottom: 5px;
      right: 30px;
      text-align: right;
      color: lightyellow;
      z-index: 20;
    }

/* 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: 100vh;
  -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: lightyellow;

  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); }