h1, figure, dd, p, dl {
  margin: unset;
}

figure {
  display: grid;
  place-content: center;
}

figcaption, dt {
  background-color: #1a1a1a;
  place-self: start;
  border-radius: 10% 0.25em 15% 0.25em;
  box-sizing: border-box;
  font-weight: bold;
  border: solid #1a1a1a 8px;
  border-width: 8px 14px;
  box-shadow: -4px 4px #00000026;
}

dd {
  align-items: center;
  display: grid;
  grid-auto-flow: column;
  place-content: start;
}

body {
  font-display: swap;
  display: grid;
  place-content: center;
  text-shadow: -0.125em 0.125em #00000026;
  grid-template-columns: minmax(auto,25rem) minmax(auto,20rem) minmax(auto, 30rem);
  grid-template-areas: "heading . ." "figure tempedia tempedia" "figure data footer" "nav data footer";
  font-size: 2em;
  --border-radius: 5%;
  box-shadow: inset -12px 8px #00000026;
  border: solid calc(1vmin + 12px) #1a1a1a;
  background-color: #24232a;
  min-height: 100svh;
  gap: 1em 3em;
  border-radius: calc(var(--border-radius) + 1%) calc(var(--border-radius) - 1%);
  margin: unset;
  box-sizing: border-box;
  background-image: radial-gradient(#2a4653, #24232a calc(100% - var(--border-radius)), #1a1a1a calc(100% - var(--border-radius)));
  
  color: white;
  font-family: "Maven Pro", sans-serif;
}

@font-face {
  font-family: "Maven Pro";
  font-display: swap;
  src:
    local("Maven Pro"),
    url("fonts.google.com/MavenPro-VariableFont_wght.ttf") format("truetype"),
}

h1 {
  grid-area: heading;
  text-align: center;
}

figure {
  grid-area: figure;
}

p {
  grid-area: tempedia;
  margin: auto;
  font-size: 1.2em;
}

dl {
  grid-area: data;
}

nav {
  grid-area: nav;
  display: grid;
  grid-auto-rows: 1fr;
  justify-content: space-between;
  grid-auto-flow: column;
}

footer {
  grid-area: footer;
  place-self: end;
}

abbr {
  text-decoration: none;
}

dl {
  display: grid;
  place-content: center;
  grid-template-columns: auto 1fr;
  gap: 0.5em;
  align-items: center;
}



a img {
  margin: auto;
  animation-composition: add;
  animation: 1.5s infinite alternate wiggle;
}

a:hover img {
  animation-play-state: paused;
}

footer img {
  animation-direction: reverse;
}

a:active img {
  animation-play-state: running;
  transform: scale(0.95);
}

a:focus img {
  filter: drop-shadow(0 0 15px #fec368);
}

@keyframes wiggle {
  0% {
    transform: rotateZ(0);
  }
  25% {
    transform: rotateZ(-1deg);
  }
  75% {
    transform: rotateZ(1deg);
  }
  100% {
    transform: rotateZ(0);
  }
}

a {
  outline: unset;
}

@media (max-width: 70.25rem) {
  body {
    font-size: 1.4em;
    grid-template-areas: ". . heading . ." ". . figure . ." ". tempedia tempedia tempedia ." ". . data . ." ". . nav . ." ". . footer . .";
    grid-template-columns: 1rem auto 55svw auto 1rem;
  }
  footer {
    place-self: center;
  }
}