.logo {
  width: clamp(15em, 25vw, 25em);
  height: auto;
}

.logo--plain {
  width: clamp(10em, 18vw, 20em);
  height: auto;
}

.logo .outline-slow {
  animation: snake 15s ease;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}
.logo .outline-fast {
  animation: snake 2s ease;
  animation-delay: 3s;
  animation-fill-mode: forwards;
}
.logo .outline-fade-in {
  animation: fade-in 2s ease;
  animation-delay: 5s;
  animation-fill-mode: both;
}
@keyframes snake {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  } to {
    opacity: 1;
  }
}

.logo .cls-1 {
  fill: none;
  stroke-linecap: round;
  stroke-miterlimit: 15;
  stroke-width: 18;
}

.logo .cls-1a {
  stroke: #f7f7f7;
  stroke-width: 8;
}

.logo .cls-1b {
  stroke: var(--accent);
}

.logo .cls-2 {
  fill: var(--accent);
}

.logo .cls-3 {
  fill: transparent;
  stroke-width: 5;
  stroke: var(--main);
}

.copyright {
  font-family: "Workbench";
  font-size: 2rem;
  fill: var(--main);
  letter-spacing: 1.1em;
  text-transform: uppercase;
}