:root {
  --duration: 10s;
  --size: 80vw;
  --characters: 14;
  --font-size: 22px;
  --delay-character: 0.2s;
  --text-color-hover: #ff8489;
}

@font-face {
    font-family: 'molleregular';
    src: url('/fonts/molle-italic-webfont.woff2') format('woff2'),
         url('/fonts/molle-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.frame {
  width: var(--size);
  height: var(--size);
  max-width: 400px;
  max-height: 400px;
  margin: 0 auto;
  border: 2px red solid;
  position: relative;
  box-shadow: inset 0 0 0 20px #2b2871c7;
  background: url('/images/otter.jpg') no-repeat center;
  background-size: cover;
  transition: ease all 0.3s;

  &:hover {
    box-shadow: inset 0 0 0 0 white;
    border: 2px #f9f9f9 solid;
    cursor: pointer;

    .text {
      mix-blend-mode: difference;

      span {
        color: var(--text-color-hover);

      }

    }

  }

  .text {
    transform: translate(calc(calc(var(--font-size) * -1) / 2),
        calc(calc(var(--font-size) * -1) / 2));
    position: relative;
    height: 100%;
    transition: ease all 0.3s;

  }

  span {
    font-size: var(--font-size);
    display: inline-block;
    text-align: center;
    width: var(--font-size);
    animation: frameMove var(--duration) linear infinite;
    position: absolute;
    transition: ease all 0.3s;

    @for $i from 1 through 52 {
      &:nth-of-type(#{$i}) {
        animation-delay: calc(var(--delay-character) * #{$i});

      }

    }

  }

}

@keyframes frameMove {
  0% {
    top: 0;
    left: 0;
    transform: rotate(0deg);

  }

  24% {
    top: 0;
    left: 100%;
    transform: rotate(0deg);

  }

  25% {
    transform: rotate(90deg);

  }

  49% {
    top: 100%;
    left: 100%;
    transform: rotate(90deg);

  }

  50% {
    transform: rotate(180deg);

  }

  74% {
    top: 100%;
    left: 0%;
    transform: rotate(180deg);

  }

  75% {
    transform: rotate(270deg);

  }

  99% {
    top: 0%;
    left: 0%;
    transform: rotate(270deg);

  }

  100% {
    transform: rotate(360deg);

  }

}

body {
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('/images/orchids.jpg')
}

div {
  text-align: center;
}

pre {
  color: red;
  font-size: 1rem;
  font-weight: bolder;
  text-shadow: 6px 4px 5px rgb(0, 207, 255);
}

span,
a {
  color: white;
}

span.mantra img {
  width: 30%;
}

span.links {
    font-family: 'molleregular';
}