* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Helvetica, sans-serif;
}

header {
  min-width: 370px;
}

nav {
  height: 10vh;
  display: flex;
  align-items: center;
  justify-content: end;
  background-color: transparent;
  padding: 0 3em 0 3em;
}

.nav-links {
  display: flex;
  gap: 2em;
}

a:link {
  color: #04471D;
  text-decoration: none;
}

a:visited {
  color: #04471D;
}

.wrapper {
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  perspective: 20px;
  scroll-behavior: smooth;
}

.hero {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  transform-style: preserve-3d;
  z-index: -1;
}

.hero-greeting {
  min-width: 375px;
  width: 100%;
  font-size: clamp(24px, 5vw, 3.5em);
  color: #04471D;
  align-self: flex-start;
  padding: calc(1em - 2vw) 10vw 0 calc(2.2em - 4vw);
}

.hero-greeting > h1 {
  font-family: 'Noto Serif Toto', serif;
}

.hero-greeting > h1 > span {
  font-family: 'Noto Serif Toto', serif;
  text-shadow: 0.25vw 0.25vw 0vw limegreen;
}

.hero-greeting > p {
  margin-top: calc(-10px + 2vh);
}

.background,
.midground,
.foreground {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.background {
  margin-top: 10vh;
  transform: translateZ(-20px) scale(2);
}

.midground {
  margin-top: 3.5vh;
  transform: translateZ(-10px) scale(1.5);
}

.foreground {
  transform: translateZ(-5px) scale(1.25);
}

main {
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  padding-block: clamp(1em, 10vw, 5em);
  width: 100%;
  box-shadow: inset 0 50px 100px rgba(255, 234, 207, 0.6);
}

.main-section {
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-block: clamp(2em, 10%,6em);
}

.section-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  box-shadow: 0 0 100px 10px rgba(255, 234, 207, 0.6);
  min-width: 80%;
  max-width: 1350px;
  min-height: 70vh;
  padding: 5em clamp(1em, 10%, 5em) 5em clamp(1em, 10%, 5em);
  border-radius: 25px;
}

.section-title {
  text-align: center;
  font-family: 'Noto Serif Toto', serif;
  font-size: clamp(40px, 10vw, 64px);
  color: #04471D;
  text-shadow: 3px 3px 0px limegreen;
  margin-bottom: 0.4em;
}

.subsection-title {
  font-family: 'Noto Serif Toto', serif;
  font-size: clamp(24px, 2vw, 36px);
  color: limegreen;
  margin-bottom: 1em;
}


.about-text {
  margin-bottom: 2em;
}

.section-card > p {
  color: #04471D;
  font-size: clamp(20px, 2vw, 1.8em);
}

.project {
  display: flex;
  justify-content: center;
  gap: 2.2em;
  width: clamp(370px, 80vw, 100%);
  padding: 0 2em 2em 2em;
}

.project-image-container > a {
  display: flex;
  gap: 2vw;
}

.project-image {
  object-fit: contain;
  width: 30vw;
  height: auto;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.2);
}

.project-image-mobile {
  object-fit: contain;
  width: 7vw;
  height: auto;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.2);
}

.button-container {
  display: flex;
  justify-content: center;
  gap: 1em;
  padding: 2em;
}

.button-container > button {
  width: 120px;
}

.view-code {
  font-size: 1.2em;
  background-color: transparent;
  color: limegreen;
  border: solid limegreen 2px;
  padding: 0.6em;
}

.view-site {
  font-size: 1.2em;
  background-color: #04471D;
  color: limegreen;
  border: solid #04471D 2px;
  padding: 0.6em;
}

.view-code:hover {
  cursor: pointer;
  font-size: 1.2em;
  background-color: #04471D;
  color: limegreen;
  border: solid #04471D 2px;
  padding: 0.6em;
}

.view-site:hover {
  cursor: pointer;
  font-size: 1.2em;
  background-color: transparent;
  color: limegreen;
  border: solid limegreen 2px;
  padding: 0.6em;
}

.project-description {
  width: 50%;
  padding: 0 1em 0 1em;
}

.project-title {
  margin-bottom: 0.4em;
  color: limegreen;
}

.project-text {
  font-size: 1.2em;
  margin-bottom: 1em;
}

.project-description > ul {
  list-style: none;
}

.project-description > ul > h3 {
  color: limegreen;
  margin-bottom: 0.3em;
}

.project-description > ul > li {
  margin-left: 1em;
}

ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: limegreen; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

.contact-section {
  text-align: center;
}

.contact-email {
  font-size: clamp(1.6em, 3vw, 2.6em);
  font-weight: 600;
  margin-block: 0.6em;
}

.contact-section > p > a:hover {
  color: limegreen;
}

footer {
  color: #04471D;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1em;
  height: 25vh;
  background-color: #FFFFFF;
  box-shadow: 0 0 100px 10px rgba(255, 234, 207, 0.6);
}

.footer-icons {
  display: flex;
  gap: 1em;
}

.footer-icons > a > img {
  height: 50px;
  width: 50px;
}

@media screen and (max-width: 800px) {
  .project {
    flex-direction: column;
  }

  .project:nth-of-type(2) div:first-child {
    order: 1;
  }

  .project-description {
    width: 100%;
  }

  .project-image-container > a {
    justify-content: center;
  }

  .project-image {
    width: 60vw;
  }

  .project-image-mobile {
    width: 14vw;
  }
}