* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background-color: #FAFAFA;
}

body {
  margin: 0 auto;
  text-align: center;
}

main {
  margin: 120px auto;
  padding-bottom: 120px;
  padding-left: 24px;
  padding-right: 24px;
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 37px;
  color: #2E2E2E;
}

main section,
main footer,
main h1,
main h2,
main h3,
main h4 {
  color: #111;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  list-style-type: none;
}

p {
  text-wrap: pretty;
  color: #888888;
}

a {
  color: #111;
  font-weight: 400;
}

img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 24px;
}

.profile-photo {
  width: clamp(150px, 50vw, 300px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

img.small {
  max-width: 48px;
  max-height: 48px;
  border-radius: 12px;
}

.project-video-shell {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(120deg, #ececec 25%, #f8f8f8 45%, #ececec 65%);
  background-size: 200% 100%;
}

.project-video-shell.loading {
  animation: video-shimmer 1.8s ease-in-out infinite;
}

.project-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1090 / 1008;
  border-radius: 24px;
  background-color: transparent;
}

@keyframes video-shimmer {
  0% {
    background-position: 200% 0;
    filter: brightness(0.98);
  }

  50% {
    background-position: 0 0;
    filter: brightness(1.02);
  }

  100% {
    background-position: -200% 0;
    filter: brightness(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-video-shell.loading {
    animation: none;
  }
}

footer {
  border-top: 1px dotted #888888;
  margin-top: 48px;
  padding-top: 24px;
}