/* COMMENTS! */ /*root{}for defining variables*/
body {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #CFC;
}
.copyright {
  position: fixed;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-style: normal;
  bottom: 0;
}

.index-svg {
  --text-color: #000;
  --text-hover-color: #55F;
  max-height: calc(100vh - 2em);
}

.svg-anchor {
  --slide-in-speed: 0.2s;
  --slide-out-speed: 2s;
}

.svg-anchor .svg-anchor__hover {
  transition: stroke-dashoffset var(--slide-in-speed);
  stroke-linecap: round;

  --approximate-length: 120;
  stroke-dasharray: var(--approximate-length) var(--approximate-length);
  stroke-dashoffset: var(--approximate-length);
}

.svg-anchor:hover .svg-anchor__hover {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--slide-out-speed);
}

.svg-anchor .svg-anchor-logo__hover {
  --text-color: var(--text-hover-color);
  clip-path: circle(0 at 50% 100%);
  transition: clip-path var(--slide-in-speed);
}

.svg-anchor:hover .svg-anchor-logo__hover {
  clip-path: circle(90% at 50% 100%);
  transition: clip-path var(--slide-out-speed);
}