.logo-link {
  font-size: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: none;
  max-inline-size: 10rem;
  transform: scale(2.1) translateY(-0.5rem);
}

.logo-link:hover,
.logo-link:focus {
  background: none;
  animation: logoshadow 1s infinite;
  animation-direction: alternate;
}

.logo-link:hover .logo__foreground,
.logo-link:focus .logo__foreground {
  animation: logoforeground 1.2s infinite;
  animation-direction: alternate;
}

.logo-link:active {
  transform: scale(1.7) translateY(-0.5rem);
}

@media only screen and (min-width: 47rem) {
  .logo-link {
    transform: scale(2.1) translate(0.4rem, -0.2rem);
  }
  .logo-link:active {
    transform: scale(1.7) translate(0.4rem, -0.2rem);
  }
}

.logo-link h1 {
  font-size: 1rem;
  display: inline-block;
  line-height: 1;
}

.logo {
  font-size: 1rem;
  height: 3.95rem;
  opacity: 0.9;
  transition: opacity 0.2s;
}

@keyframes logoshadow {
  0%, 30% {
    filter: drop-shadow(-2px -1px 0 rgba(248,224,158,0.9));
  }
  40%, 70% {
    filter: drop-shadow(-2px -1px 0 rgba(231,200,114,0.9));
  }
  80%, 100% {
    filter: drop-shadow(-2px -1px 0 rgba(233,214,161,0.9));
  }
}

@keyframes logoforeground {
  0%, 30% {
    fill: #962bd8;
  }
  40%, 70% {
    fill: #d54f80;
  }
  80%, 100% {
    fill: #a34f98;
  }
}