/* The footer: contact as small icons, then the light/dark switch and the log-in key.
   Each icon moves a little on hover. */
footer {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--dim);
}

footer .copy {
  margin-right: auto;
}

footer .sep {
  width: 1px;
  height: 18px;
  background: var(--edge);
}

@media (max-width: 480px) {
  footer .icons a,
  footer .icons button {
    width: 34px;
    height: 34px;
  }
}

.icons {
  display: flex;
  align-items: center;
  gap: 4px;
}

.icons a,
.icons button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  color: var(--dim);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}

.icons a:hover,
.icons button:hover {
  color: var(--cyan-ink);
  background: var(--cyan-soft);
}

.icons svg {
  width: 19px;
  height: 19px;
}

.icons svg,
#resume svg path {
  transition: transform 0.4s cubic-bezier(0.3, 0.7, 0.3, 1);
}

.i-in:hover svg,
.i-in:focus-visible svg {
  transform: rotate(-8deg) scale(1.1);
}

.i-mail:hover svg,
.i-mail:focus-visible svg {
  transform: translateY(-2px) rotate(-8deg);
}

#resume:hover svg path:nth-child(3),
#resume:focus-visible svg path:nth-child(3) {
  transform: translateY(2px);
}

#owner svg {
  transition: transform 0.4s cubic-bezier(0.3, 0.7, 0.3, 1);
}

#owner:hover svg {
  transform: rotate(-28deg);
}

#theme svg {
  transition: transform 0.5s cubic-bezier(0.3, 0.7, 0.3, 1);
}

#theme:hover svg {
  transform: rotate(-20deg);
}