a:active,
a:focus,
a:hover,
a:link,
a:visited {
  color: #242424;
  text-decoration: none;
}

body {
  background: #fdf5e6;
  color: #727272;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, Roboto, sans-serif;
  font-size: 15px;
  font-weight: 350;
  letter-spacing: .7px;
}

footer {
  margin: 0 auto 64px auto;
}

header {
  margin: 64px auto 0 auto;
}

main {
  margin: 0 auto 0 auto;
}

.avatar-box {
  background: #009b77;
  width: calc(100% - 40px);
  margin: 20px 20px 16px 20px;
  padding: 16px 0 12px 0;
  opacity: 0;
  animation: fadeUp 0.7s ease-out forwards;
}

.avatar-icon {
  width: 208px;
  height: 208px;
  border-radius: 50%;
}

.container {
  background: #fcfcfc;
  max-width: 648px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.copy {
  width: 100%;
  margin: 40px 0 16px 0;
  opacity: 0;
  animation: fadeUp 0.7s ease-out forwards;
}

.email {
  opacity: 0;
  animation: fadeUp 0.7s ease-out forwards;
}

.intro {
  width: calc(100% - 128px);
  margin: 20px 64px 12px 64px;
  text-align: left;
  opacity: 0;
  animation: fadeUp 0.7s ease-out forwards;
}

.item-box {
  display: inline-block;
  width: 128px;
  height: 100px;
  opacity: 0;
  animation: fadeUp 0.7s ease-out forwards;
}

.item-icon {
  width: 48px;
  height: 48px;
}

.item-subtitle {
  color: #727272;
  width: 100%;
  font-size: 13px;
}

.item-title {
  color: #242424;
  width: 100%;
  margin: 8px 0 2px 0;
}

.items-grid {
  margin: 20px 0 0 0;
  display: block;
  width: 100%;
}

.name {
  color: #242424;
  margin: 0 20px 2px 20px;
  font-size: 38px;
  opacity: 0;
  animation: fadeUp 0.7s ease-out forwards;
}

.navigation-grid {
  display: flex;
  gap: 24px;
  opacity: 0;
  animation: fadeUp 0.7s ease-out forwards;
}

.navigation-item,
.navigation-item:active,
.navigation-item:focus,
.navigation-item:link,
.navigation-item:visited {
  color: #242424;
}

.navigation-item:hover {
  color: #727272;
}

.project-box {
  display: inline-block;
  width: 240px;
  height: 200px;
  opacity: 0;
  animation: fadeUp 0.7s ease-out forwards;
}

.project-box:nth-child(1) {
  animation-delay: 0.1s;
}

.project-box:nth-child(2) {
  animation-delay: 0.18s;
}

.project-box:nth-child(3) {
  animation-delay: 0.26s;
}

.project-box:nth-child(4) {
  animation-delay: 0.34s;
}

.project-box:nth-child(5) {
  animation-delay: 0.42s;
}

.project-box:nth-child(6) {
  animation-delay: 0.50s;
}

.project-box:nth-child(7) {
  animation-delay: 0.58s;
}

.project-box:nth-child(8) {
  animation-delay: 0.66s;
}

.project-icon {
  width: 128px;
  height: 128px;
  border-radius: 22%;
}

.section-description {
  margin: 0 64px 0 64px;
  opacity: 0;
  animation: fadeUp 0.7s ease-out forwards;
}

.section-title {
  color: #242424;
  width: 100%;
  margin: 24px 0 12px 0;
  font-size: 24px;
  opacity: 0;
  animation: fadeUp 0.7s ease-out forwards;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media screen and (max-width: 648px) {
  body {
    font-size: 14px;
  }

  footer {
    margin: 0 auto 0 auto;
  }

  header {
    margin: 0 auto 0 auto;
  }

  .avatar-box {
    width: calc(100% - 16px);
    margin: 8px 8px 4px 8px;
    padding: 8px 0 4px 0;
  }

  .avatar-icon {
    width: 40%;
    height: 40%;
  }

  .container {
    max-width: 100%;
  }

  .intro {
    width: calc(100% - 48px);
    margin: 20px 24px 12px 24px;
  }

  .item-box {
    width: 110px;
  }

  .item-subtitle {
    font-size: 12px;
  }

  .project-box {
    width: 160px;
  }

  .section-description {
    margin: 0 24px 0 24px;
  }
}