body {
  margin: 0;
  padding: 0 10vmin;
  background: #000;
  color: #ddd;
  font-family: "Sacramento", "Palatino Linotype", "Book Antiqua", Palatino, serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

header {
  height: 13vh;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}

h1 {
  font-size: 6vh;
  font-weight: normal;
  margin: 1vh 0;
  padding: 0.25vh 1vh;
}

main {
  display: flex;
  min-height: 78vh;
}

.portrait {
  --size: min(40rem, 70vmin);
  position: relative;
  width: var(--size);
  height: var(--size);
  margin: 0 auto;
  background: linear-gradient(333deg, #e41e00, #f17c7c, #ffd650, #f8fa88, #47c75d, #1de8b5, #053edb, #9400d8, #dd00f3) 0% 85% / 2000% 2000%;
  animation: rotatebg 89s ease infinite;
}

.portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("line-t.png") center / cover;
  transform: scale(1.05);
  animation: blurpulse 26s infinite;
}

footer {
  display: flex;
  justify-content: space-evenly;
  height: 9vh;
  --transition: 0.3s;
}

footer a {
  position: relative;
  font-size: 4vh;
  color: #eee;
  text-decoration: none;
  opacity: 0.65;
  transition: opacity var(--transition) ease-in-out;
}

footer a::after {
  content: "";
  position: absolute;
  left: -15%;
  bottom: 2.5vh;
  width: 0;
  height: 0.5vh;
  background: #eee;
  transition: width var(--transition) ease-in-out;
}

footer a:hover,
footer a:focus-visible {
  opacity: 1;
}

footer a:hover::after,
footer a:focus-visible::after {
  width: 130%;
}

@keyframes rotatebg {
  0%, 100% { background-position: 0% 85%; }
  25% { background-position: 20% 10%; }
  50% { background-position: 100% 15%; }
  75% { background-position: 75% 65%; }
}

@keyframes blurpulse {
  0%, 48%, 52%, 100% { filter: blur(0); }
  50% { filter: blur(1px); }
}

@media (prefers-reduced-motion: reduce) {
  .portrait,
  .portrait::after {
    animation: none;
  }
}