body, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: serif;
  font-size: 14px;
  line-height: 1.2;
  background: #fefafa;
  color: #222;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

picture,
blockquote,
footer {
  max-width:  min(60vh, 60vw);
}

@keyframes rotation {
  0% {
    transform: rotate( 0deg );
  }

  50% {
    transform: rotate( 180deg );
  }

  100% {
    transform: rotate( 360deg );
  }
}

picture {
  display: flex;
  align-items: end;
  flex-grow: 1;
}

img {
  max-height: min(60vh, 60vw);
  max-width:  min(60vh, 60vw);
  width: auto;
  height: auto;
  animation: rotation 240s infinite linear;

  mask-size: cover;
  mask-image: url("copper-hydrate-mask.png");
  mask-image: image-set(
    url("copper-hydrate-mask.avif") type("image/avif"),
    url("copper-hydrate-mask.png") type("image/png")
  );
}

p {
  margin: 0 0 0.6em;
}

blockquote {
  margin: 2.4em 0 1.2em;
  flex-grow: 1;
}

@media screen and (min-width: 640px) {
  blockquote {
    font-size: 120%;
  }
}

footer {
  margin: 1.2em 0;
  opacity: 0.8;
  font-size: 80%;
}

a {
  color: coral;
}