:root {
  --primaryFont: "Montserrat", serif;
  --secondaryFont: "Dancing Script", serif;
  --primaryColor: #9da421;
  --secondaryColor: #eaf1e3;
  --darkColor: #89a162;
  --darkerColor: #376f61;
  --lightColor: #badf9a;
  --lighterColor: #c2dda8;
  --fadeColor: #d9d9d9;
  --imageBorderRadius: 17px;
  --imageBorderSize: 10px;
}

body {
  font-family: var(--primaryFont);
  color: #000000;
  background-color: #ffffff;
  padding: 0 2rem;
  margin: 0;
  position: relative;
}

section {
  height: 100vh;
}

h1,
h2,
p {
  margin: 0;
}

.introduction {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}

.introduction .message {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.introduction .message h1 {
  font-family: var(--secondaryFont);
  font-size: 5.438rem;
}

.introduction .message p {
  font-size: 1.063rem;
  text-align: right;
}

.introduction .message .hidden {
  opacity: 0;
  margin-top: 10rem;
  width: 0;
}

.introduction .message p span {
  font-weight: bold;
}

.introduction .image-container img {
  width: 100%;
}

.quote {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.quote {
  position: relative;
}

.quote .image-container {
  position: absolute;
  top: -1%;
}

.quote .image-container img {
  transform: rotateX(180deg);
  width: 100%;
}

.quote .message {
  margin-top: 10rem;
}

.quote .message h2 {
  font-size: 1.563rem;
  font-weight: normal;
  transform: translateX(-4.813rem);
}

.quote .message p {
  font-family: var(--secondaryFont);
  color: var(--fadeColor);
  font-size: 4.188rem;
}

.hobby {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.25rem;
}

.hobby .collage,
.hobby .message {
  height: 100%;
}

.collage {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.collage .rectangle {
  background-color: var(--secondaryColor);
  height: 100%;
  width: 50%;
  position: absolute;
  top: 0;
  left: 0;
}

.collage .pictures {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.cover-photo {
  height: 70vh;
  width: 50vw;
  border-radius: var(--imageBorderRadius);
  border: var(--imageBorderSize) solid white;
  object-fit: cover;
  object-position: 0 64%;
}

.hobby .profile-photo-container {
  position: absolute;
  bottom: -10%;
  left: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: flex-end;
  width: 100%;
}

.hobby .profile-photo {
  height: 37vh;
  border: var(--imageBorderSize) solid white;
  border-radius: var(--imageBorderRadius);
  transform: translateX(-30%);
}

.hobby .design,
.about-me .design {
  transform: translateX(30%) rotate(344deg);
  height: 22vh;
}

.hobby .message {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hobby .message p {
  font-family: var(--secondaryFont);
  font-size: 1.875rem;
  text-align: center;
}

.about-me {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

.about-me .collage {
  justify-content: center;
}

.about-me .collage .rectangle {
  right: 0;
  left: initial;
}

.about-me .cover-photo {
  object-position: center;
  height: 50vh;
  width: 25vw;
}

.about-me .design {
  position: absolute;
  bottom: 0;
  transform: translate(-30%, 45%) rotate(195deg);
}

.about-me .title {
  display: flex;
  position: absolute;
  top: 4rem;
  left: 0;
}

.about-me .title h2 {
  font-family: var(--secondaryFont);
  font-size: 3.438rem;
}

.about-me .title img {
  transform: rotate(240deg);
  height: 12vh;
}

.about-me .message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.about-me .message .details h3 {
  font-size: 1.438rem;
  font-weight: 300;
}

.about-me .message .details p {
  font-size: 1.25rem;
  font-weight: 300;
}

.about-me .message .details ul {
  line-height: 3.125rem;
}

.about-me .message .details ul li p small {
  font-size: 0.875rem;
}

ul {
  list-style-type: "🪴  "; /* Unicode character */
}

.about-me .message .details span {
  font-weight: bold;
}

.contact-me {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.contact-me .message {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.contact-me .image-container {
  position: absolute;
  bottom: 0;
}

.contact-me .image-container img {
  width: 100%;
}

.contact-me .message h2 {
  font-family: var(--secondaryFont);
  font-size: 5.438rem;
}

.contact-me .message p {
  font-size: 0.938rem;
  margin: 0.313rem 0;
}

.contact-me .message button {
  background-color: var(--primaryColor);
  color: #ffffff;
  border: 0;
  padding: 0.438rem 0.938rem;
  border-radius: 0.313rem;
  font-weight: bold;
  margin-top: 1.563rem;
}

.contact-me .message img.hidden {
  opacity: 0;
  margin-top: 10rem;
  width: 0;
}

section.footer {
  height: auto;
  display: inline-block;
  background-color: var(--secondaryColor);
  position: absolute;
  bottom: 0;
  right: 2%;
  padding: 0.625rem;
  border-radius: 0.313rem 0.313rem 0 0;
}

section.footer p {
  font-size: 0.625rem;
  color: var(--darkColor);
}

@media (max-width: 1485px) {
  .about-me .cover-photo {
    height: 43vh !important;
  }

  .about-me .photo-leaf-design {
    height: 17vh !important;
  }
}

@media (max-width: 1385px) {
  .about-me .photo-leaf-design {
    height: 14vh !important;
  }
}

@media (max-width: 1370px) {
  .photo-leaf-design {
    height: 17vh !important;
  }

  .profile-photo {
    height: 30vh !important;
  }
}

@media (max-width: 1285px) {
  .about-me .cover-photo {
    height: 36vh !important;
  }

  .about-me .photo-leaf-design {
    height: 11vh !important;
  }
}

@media (max-width: 1245px) {
  .profile-photo {
    height: 27vh !important;
  }

  .hobby .cover-photo {
    height: 63vh;
  }
}

@media (max-width: 1200px) {
  .hobby .message p {
    font-size: 1.688rem;
  }

  .hobby .cover-photo {
    height: 56vh;
  }

  .profile-photo {
    height: 23vh !important;
  }

  .about-me {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 2fr;
  }

  .about-me .collage {
    grid-row: 1;
  }

  .about-me .collage .rectangle {
    right: initial;
    width: 35%;
  }

  .about-me .collage .pictures {
    transform: translateY(15%);
  }

  .about-me .title {
    position: initial;
  }

  .about-me .title img {
    display: none;
  }
}

@media (max-width: 1030px) {
  .photo-leaf-design {
    height: 14vh !important;
  }

  .profile-photo {
    height: 20vh !important;
  }
}

@media (max-width: 910px) {
  .hobby .cover-photo {
    height: 50vh;
  }

  .photo-leaf-design {
    height: 11vh !important;
  }

  .profile-photo {
    height: 17vh !important;
  }
}

@media (max-width: 845px) {
  .hobby {
    grid-template-columns: 1fr;
    grid-template-rows: 2fr 1fr;
  }

  .hobby .collage {
    justify-content: center;
  }

  .hobby .collage .rectangle {
    left: inherit;
  }

  .hobby .cover-photo {
    height: 50vh;
    width: 70vw;
  }

  .hobby .profile-photo {
    height: 23vh !important;
  }

  .hobby .photo-leaf-design {
    transform: translate(5%, 5%) rotate(170deg);
  }

  .hobby .message p {
    font-size: 1.875rem;
  }

  .about-me .collage .rectangle {
    width: 70%;
  }

  .about-me .title {
    margin-top: 9rem;
  }

  .about-me .cover-photo {
    height: 45vh !important;
    width: 50vw;
  }

  .about-me .photo-leaf-design {
    height: 14vh !important;
  }
}

@media (max-width: 795px) {
  .about-me .message {
    justify-content: flex-start;
    margin-top: 5.625rem;
  }

  html {
    font-size: 14px;
  }
}

@media (max-width: 770px) {
  .hobby .cover-photo {
    width: 90vw;
  }

  .hobby .profile-photo {
    transform: translateX(-10%);
  }

  .hobby .photo-leaf-design {
    justify-self: flex-end;
    height: 10vh !important;
  }

  .hobby .profile-photo {
    height: 20vh !important;
  }

  .about-me .collage .rectangle {
    width: 70%;
  }

  .about-me .cover-photo {
    height: 40vh !important;
    width: 50vw;
  }

  .about-me .photo-leaf-design {
    height: 12vh !important;
  }
}

@media (max-width: 700px) {
  .about-me .collage .rectangle {
    width: 80%;
  }

  .about-me .cover-photo {
    width: 55vw;
  }

  .about-me .photo-leaf-design {
    height: 12vh !important;
    transform: translate(0, 50%) rotate(180deg);
  }
}

@media (max-width: 600px) {
  .hobby .photo-leaf-design {
    height: 8vh !important;
  }
}