* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  --x: 0.5;
  --y: 0.5;

  background: #F6F6E3 url("/assets/silver2.jpg");
  background-size: cover;
  font-family: "Germania One", serif;
}

figure {
  width: 100%;
  height: 100dvh;
  padding-top: 10dvh;
  position: relative;
  perspective: max(100dvh, 100vw);
  background: url("/assets/drop-shadow2.png") no-repeat center center;
  background-size: 60dvh;
}

figure img {
  display: block;
  position: sticky;
  top: 0;
  width: 100%;
  max-height: 70dvh;
  object-fit: contain;
  overflow: hidden;
  transform-origin: center center;
  transform: rotateY(calc((var(--x) * 2 - 1) * -40deg)) rotateX(calc((var(--y) * 2 - 1) * -30deg));
}

main {
  width: min(80vw, 30rem);
  margin: 4rem auto 4rem;
  min-height: 100dvh;
  display: grid;
  place-content: center;
}

p {
  font-size: 2rem;
  line-height: 2.25rem;
  margin-bottom: 1rem;
}

a {
  color: inherit;
  opacity: .8;
}

img {
  display: block;
  max-width: 100%;
  margin-block: 2rem;
}

button {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	cursor: pointer;
	appearance: none;
	width: 3rem;
	height: 3rem;
	border: 0;
	border-radius: 50%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 1152'%3E%3Cpath d='M289.919 64.018c3.905.162 7.589 1.282 11.181 2.722 11.5 5.2 18.9 16.6 18.9 29.2v384c0 12.6-7.4 24-18.9 29.2-11.5 5.2-25 3.1-34.4-5.3l-134.9-119.9H64c-35.3 0-64-28.7-64-64v-64c0-35.3 28.7-64 64-64h67.8l134.9-119.9c5.211-4.577 11.739-7.414 18.669-7.975 1.512-.122 3.033-.031 4.55-.047zM457.756 133.49c5.753-.026 10.76 2.023 15.344 5.35v.1c43.2 35.2 70.9 88.9 70.9 149 0 60.1-27.7 113.8-70.9 149-10.3 8.4-25.4 6.8-33.8-3.5-8.4-10.3-6.8-25.4 3.5-33.8 32.5-26.4 53.2-66.6 53.2-111.7 0-45.1-20.7-85.3-53.2-111.8-10.3-8.4-11.8-23.5-3.5-33.8 3.549-4.292 8.383-7.285 13.868-8.381 1.507-.302 3.058-.313 4.588-.469z'/%3E%3Cpath d='M397.256 207.99c5.753-.026 10.76 2.023 15.344 5.35v.1c21.5 17.6 35.4 44.4 35.4 74.5s-13.9 56.9-35.4 74.5c-10.3 8.4-25.4 6.8-33.8-3.5-8.4-10.3-6.8-25.4 3.5-33.8 10.8-8.8 17.7-22.2 17.7-37.2 0-15-6.9-28.4-17.7-37.3-10.3-8.4-11.8-23.5-3.5-33.8 3.549-4.292 8.383-7.285 13.868-8.381 1.507-.302 3.058-.313 4.588-.469zM301.1 642.781c11.5 5.2 18.9 16.6 18.9 29.2v384c0 12.6-7.4 24-18.9 29.2-11.5 5.2-25 3.1-34.4-5.3l-134.9-119.9H64c-35.3 0-64-28.7-64-64v-64c0-35.3 28.7-64 64-64h67.8l134.9-119.9c9.4-8.4 22.9-10.4 34.4-5.3zm123.9 132.2 55 55 55-55c9.4-9.4 24.6-9.4 33.9 0 9.3 9.4 9.4 24.6 0 33.9l-55 55 55 55c9.4 9.4 9.4 24.6 0 33.9-9.4 9.3-24.6 9.4-33.9 0l-55-55-55 55c-9.4 9.4-24.6 9.4-33.9 0-9.3-9.4-9.4-24.6 0-33.9l55-55-55-55c-9.4-9.4-9.4-24.6 0-33.9 9.4-9.3 24.6-9.4 33.9 0z'/%3E%3C/svg%3E");
	background-size: 100% auto;
	background-position: bottom center;
	opacity: .7;
	text-indent: -100vw;
	overflow: hidden;
}

button.playing {
	background-position: top center;
}