@charset "utf-8";

.Frame {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  pointer-events: none;
  border: 1px solid #ffffff;
  -webkit-transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
}

@media only screen and (min-width: 480px) {
  .Frame {
    position: fixed;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
  }
}



@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}

@-webkit-keyframes color {
  100%,
  0% {
    stroke: #f04e59;
  }
  40% {
    stroke: #40c2d2;
  }
  66% {
    stroke: #77c383;
  }
  80%,
  90% {
    stroke: #ffc63b;
  }
}

@keyframes color {
  100%,
  0% {
    stroke: #f04e59;
  }
  40% {
    stroke: #40c2d2;
  }
  66% {
    stroke: #77c383;
  }
  80%,
  90% {
    stroke: #ffc63b;
  }
}