body {
  text-align: center;
}

/* title */
#titleContentDiv {
  background-color: #03346e;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
h1 {
  font-family: "Zeyada", cursive;
  font-weight: 400;
  font-size: 4rem;
  color: #e2e2b6;
  flex-basis: 100px;
  margin: 0;
  width: 300px;
}
#title h2 {
  font-family: "Noto Serif KR", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  color: #6eacda;
  font-size: 2rem;
  text-align: left;
  margin: 0;
  width: 300px;
}
#southWesternBlueSquare1 {
  position: absolute;
  top: 76vh;
  left: 3%;
}
#southWesternBlueSquare2 {
  position: absolute;
  top: 70vh;
  left: 7%;
}
#southWesternBlueSquare3 {
  position: absolute;
  top: 82vh;
  left: 7%;
}
#southWesternBlueSquare4 {
  position: absolute;
  top: 76vh;
  left: 11%;
}
#southWesternBlueSquare5 {
  position: absolute;
  top: 70vh;
  left: 15%;
}
#southWesternBlueSquare6 {
  position: absolute;
  top: 82vh;
  left: 15%;
}
#northEasternBlueSquare1 {
  position: absolute;
  top: 12vh;
  left: 75%;
}
#northEasternBlueSquare2 {
  position: absolute;
  top: 24vh;
  left: 75%;
}
#northEasternBlueSquare3 {
  position: absolute;
  top: 6vh;
  left: 79%;
}
#northEasternBlueSquare4 {
  position: absolute;
  top: 18vh;
  left: 79%;
}
#northEasternBlueSquare5 {
  position: absolute;
  top: 12vh;
  left: 83%;
}
#northEasternBlueSquare6 {
  position: absolute;
  top: 24vh;
  left: 83%;
}
#northEasternBlueSquare7 {
  position: absolute;
  top: 6vh;
  left: 87%;
}
#northEasternBlueSquare8 {
  position: absolute;
  top: 18vh;
  left: 87%;
}
#northEasternBlueSquare9 {
  position: absolute;
  top: 12vh;
  left: 91%;
}
#northEasternBlueSquare10 {
  position: absolute;
  top: 24vh;
  left: 91%;
}
.originalFill {
  fill: #6eacda;
}
.mouseOverRect {
  fill: #e2e2b6;
}

/* hero */
#heroContentDiv {
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#hero h2 {
  font-family: "Abel", sans-serif;
  font-weight: 400;
  color: #e2e2b6;
  font-size: 4.5rem;
  margin: 0;
}
#hero p {
  font-family: "Noto Serif KR", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 1.5rem;
  color: #03346e;
  margin-left: 20%;
  margin-right: 20%;
}
#foto {
  height: 250px;
}
#beigeSquaresColumnDiv {
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 92vh;
  justify-content: space-between;
  width: 10%;
}

/* resume */
#resume > div {
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
#resume > div > div {
  width: 50%;
  display: flex;
  justify-content: space-around;
  gap: 50px;
}
#resume img {
  flex: 0.5;
}
.article {
  flex: 1.5;
}
h3 {
  font-family: "Abel", sans-serif;
  font-weight: 400;
  color: #e2e2b6;
  font-size: 3rem;
  text-align: left;
  margin-top: 20px;
  margin-bottom: 0px;
}
#resume p {
  font-size: 1.5rem;
  color: #03346e;
  text-align: justify;
  margin-top: 5px;
}

/* contact */
#contact > div {
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#contact > div * {
  margin-left: 2rem;
}
#contact h2 {
  font-family: "Abel", sans-serif;
  font-weight: 400;
  color: #03346e;
  font-size: 4rem;
  margin-bottom: 20px;
}
#contact p {
  font-family: "Abel", sans-serif;
  font-weight: 400;
  font-size: 1.3rem;
  color: #03346e;
  margin-bottom: 30px;
}
.btn {
  font-family: "Abel", sans-serif;
  font-weight: 400;
  background-color: #6eacda;
  border: none;
  color: #03346e;
  padding: 15px 55px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  border-radius: 20px;
}

/*footer*/
#footer div {
  background-color: #e2e2b6;
  min-height: 30vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#footer > div > div {
  width: 50%;
  display: flex;
  justify-content: space-between;
  gap: 50px;
  flex-direction: row;
}
#footer a {
  color: #6eacda;
  font-family: "Abel", sans-serif;
  font-weight: 400;
  font-size: 1.3rem;
  text-decoration: none;
}
#footer p {
  font-family: "Noto Serif KR", serif;
  font-weight: 400;
  color: #03346e;
}

@media (max-width: 600px) {
  /* title */
  /* hero */
  #hero h2 {
    margin: 0;
  }
  #hero p {
    font-size: 1.2rem;
    margin: 0;
  }

  /* resume */
  #resume img {
    width: 100px;
  }
  h3 {
    font-size: 2rem;
  }
  #resume > div > div {
    flex-direction: column;
    width: 80%;
    gap: 0;
  }
  #resume p {
    font-size: 1.2rem;
  }
  .resume-img {
    text-align: left;
  }

  /* contact */
}