/* ============== ABOUT =============================== */
/* ============== MOBILE FIRST (< 421px) ============== */
.about-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 9vh 10vw;
  padding-bottom: 4vh;
}

.about-photo img {
  width: 8rem;
  height: auto;
  border-radius: 50%;
  box-shadow:0 .5rem 1rem rgba(0,0,0,.2);
}

.about-content h1 {
  color: #ffffff;
  font-family: "Playfair", serif;
  font-weight: 300;
  font-size: 2em;
  margin-bottom: 1rem;
}

.about-content p {
  color: #ffffff;
  line-height:1.7;
  font-family: "Montserrat", sans-serif;
  font-weight: 200;
  font-size: 0.8em;
  margin-bottom: 1.2rem;
}

.italic {
  font-style: italic;
}

.bold {
  font-weight: bold;
}

.about-content p a {
  text-decoration: none;
  color: #5ce1e6;
  transition: all ease 0.3s;
}

.about-content p a:hover {
  text-decoration: underline;
  color: #fff;
}

/* buttons */
.btn-cv-container, .btn-contact-container {
  display:flex;
  justify-content: center;
  margin-bottom: 3rem;
}

.btn-cv {
  display:block;
  text-align:center;
  text-decoration:none;
  padding: 0.5rem 2rem;
  border: 2px solid #fff;
  border-radius: 5px;
  font-family: "Montserrat", sans-serif;
  font-size:1rem;
  font-weight: 400;
  background: #5ce1e6;
  color:#06002e;
  transition: background .3s, color .3s;
}

.btn-contact {
  display:block;
  text-align:center;
  text-decoration:none;
  padding: 0.5rem 3.7rem;
  border: 2px solid #fff;
  border-radius: 5px;
  font-family: "Montserrat", sans-serif;
  font-size:1rem;
  font-weight:400;
  background: #06002e;
  color:#fff;
  transition: background .3s, color .3s;
}

.btn-cv:hover, .btn-contact:hover {
  background:#fff;
  color:#06002e;
}


/* ============== ABOUT - TABLETS (< 421px) ============== */
@media (min-width: 421px) {
  .about-content {
    margin-top: 3vh;
  }
}

/* ============== WELCOME - DESKTOPS (< 1280px) ============== */
@media (min-width: 1280px) {
  .about-content {
    margin-top: 2vh;
    padding: 0 3vw;
  }
  .about-content h1 {
  font-size: 2.3em;
  }
}


/* ============== WELCOME - DESKTOPS (< 1536px) ============== */
@media (min-width: 1536px) {
  .about-content {
    margin-top: 4vh;
    padding: 0 5vw;
  }
  .about-content h1 {
  font-size: 2.5em;
  }
  .about-content p {
  font-size: 0.9em;
  }
}