:root {
  --bg-color: rgb(217, 255, 233);
  --color-baseaqua: rgb(110, 184, 174);
  --color-darkeraqua: rgb(97, 162, 153);
  --color-lightgreen: rgb(212, 243, 209);
  --color-purple: rgb(101, 71, 185);
  --text-gradient: linear-gradient(0deg, #6eb8ae 0%, #d4f3d1 100%);
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
  200% {
    transform: translateY(0);
  }
}

@keyframes expand {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.header {
  font-family: "PageTitleFont", serif;
  white-space: nowrap;
  font-size: clamp(2.4rem, -0.886rem + 8.762vw, 7rem);
  color: white;
  -webkit-text-stroke: 0.2px rgb(110, 184, 174);
  margin-top: 1em;
  margin-bottom: 0.1em;
  animation: float 2s infinite;
}

.header-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  row-gap: 1px;
}

.mini-blurb {
  color: rgb(97, 162, 153);
  white-space: nowrap;
  margin-top: 0.1em;
  margin-bottom: 4em;
  font-family:
    League Spartan,
    Arial;
  font-weight: 600;
  font-size: clamp(0.9rem, 0.114rem + 2.095vw, 2rem);
}

.nav-bar-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: clamp(1rem, 0.429rem + 2.857vw, 3rem);
  justify-content: center;
  align-items: center;
  
}

.nav-button,
.contact-button {
  white-space: nowrap;
  font-family: "ButtonFont", serif;
  font-size: clamp(1rem, 0.714rem + 1.429vw, 2rem);
  background-color: white;
  color: rgb(67, 67, 67);
  border: 1px solid rgb(32, 32, 32);
  min-width: 5rem;
  text-align: center;
  border-radius: 4px;
  padding-top: 8px;
  padding-inline: .9rem;
  transition: all 0.2s ease;
  text-decoration: none;
  
}

.nav-button:hover,
.contact-button:hover {
  background-color: rgb(212, 243, 209);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transform: scale(1.05);
}

.head-divider {
  background-color: var(--color-baseaqua);
  height: 50px;
  border: none;
  margin-top: 6em;
}

.about-title,
.projects-title,
.contact-title {
  display: flex;
  white-space: nowrap; 
  align-items: center;
  justify-content: center;
  color: var(--color-baseaqua);
  -webkit-text-stroke: 1px var(--color-purple);
  font-family: League Spartan, Arial;
  font-size: clamp(2.7rem, 0.343rem + 6.286vw, 6rem);
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
  margin-block: clamp(2.3rem, 1.086rem + 3.238vw, 4rem);
  
}

.about-section {
  margin-top: 15em;
  
}

.about-content {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 6rem;
  position: relative;
  padding-inline: clamp(1.2rem, -0.086rem + 3.429vw, 3rem);
  box-sizing: border-box;
}

.me-icon {
  width: 5.3em;
}

.about-blurb {
  position: relative;
  font-family:
    League Spartan,
    Arial;
  font-size: clamp(1rem, 0.6rem + 2vw, 2.4rem);
  line-height: 1.7em;
  color: rgb(97, 162, 153);
  font-weight: 500;
  background-image: url("../assets/SPEECH-BUBBLE-1.png");
  background-repeat: no-repeat;
  background-blend-mode: multiply; 
  background-size: 100% 100%;
  padding: 40px;
  text-align: center;
  display: inline-block;
  width: min(100%, 40rem);
  min-height: auto; 
}

.blurb-2 {
  margin: 5em auto;
  border-radius: 15px; 
  font-family: League Spartan, Arial;
  background-color: white;
  max-width: 45rem;
  box-sizing: border-box;
  font-size: clamp(1rem, 0.771rem + 1.143vw, 1.8rem);
  line-height: 1.7em;
  color: var(--color-darkeraqua);
  padding: clamp(2rem, 1.286rem + 1.905vw, 3rem);
  text-align: center;
}


.selfie-container {
  position: relative;
  transition: all 0.15s ease;
}

.selfie {
  border-radius: 10px;
  border: 7px solid rgb(160, 235, 216);
  transition: all 0.15s ease;
  transform: rotate(-3deg);
  cursor: pointer;
}

.selfie-container:hover {
  transform: rotate(3deg);
}

.selfie-container:hover .selfie {
  box-shadow: 0 0 12px rgb(155, 255, 242);
}

.selfie-container:hover .angel-sticker,
.selfie-container:hover .heart-sticker {
  animation: expand 2s infinite;
}

.angel-sticker {
  position: absolute;
  max-width: 100%;
  width: max(10vh, 70px);
  top: -7px;
  left: -30px;
}

.heart-sticker {
  position: absolute;
  width: 25%;
  top: -13px;
  left: 15px;
}

.selfie:hover {
  box-shadow: 0 0 12px rgb(155, 255, 242);
  transform: rotate(3deg);
}


@media (max-width: 700px) {
  .about-content{
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .about-blurb {
    position: relative;
    font-family:
      League Spartan,
      Arial;
    font-size: clamp(1rem, 0.6rem + 2vw, 2.4rem);
    line-height: 1.7em;
    color: rgb(97, 162, 153);
    font-weight: 500;
    white-space: normal;
    background-image: url("../assets/MOBILE2_\ SPEECH\ BUBBLE.png");
    background-repeat: no-repeat;
    background-blend-mode: multiply; 
    text-align: center;
    display: inline-block;
    box-sizing: border-box;
    width: min(100%, 20rem);
  } 

  .blurb-2 {
    margin: 5em auto;
    border-radius: 15px; 
    width: max(50vw, 20rem);
    font-family: League Spartan, Arial;
    background-color: white;
    font-size: clamp(1rem, 0.8rem + 1vw, 1.7rem);
    line-height: 1.7em;
    color: var(--color-darkeraqua);
    padding: 2em;
    text-align: center;
  }

  .selfie-container {
    position: relative;
    transition: all 0.15s ease;
  }

  .selfie {
   border-radius: 10px;
   border: 7px solid rgb(160, 235, 216);
   transition: all 0.15s ease;
   transform: rotate(-3deg);
   cursor: pointer;
  }

  .selfie-container:active {
    transform: rotate(3deg);
  }

  .selfie-container:active .selfie {
    box-shadow: 0 0 12px rgb(155, 255, 242);
  }

  .selfie-container:active .angel-sticker,
  .selfie-container:active .heart-sticker {
    animation: expand 2s infinite;
  }

  .selfie:active {
    box-shadow: 0 0 12px rgb(155, 255, 242);
    transform: rotate(3deg);
  }

}





.projects-section {
  display: flex;
  flex-direction: column;
  width: calc(100vw - 2rem);
  justify-content: center;
  row-gap: 5em;
  align-items: center;
 
  margin-bottom: 100px;
}

.project-card-section {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 2.5rem;
  box-sizing: border-box;
  background-color: white;
  align-items: center;
  padding: clamp(1.7rem, 1.329rem + 1.857vw, 3rem);
  border-radius: 25px;
  max-width: 70vw;
  cursor: pointer;
}


.project-cover {
  width: max(15vh, 20rem);
  height: auto;
  min-width: 50px;
  transition: all 0.2s ease;
}


.project-cover:hover {
  animation: expand 2s infinite;
}


.project-type {
  color: var(--color-baseaqua);
  font-size: clamp(1rem, 0.943rem + 0.286vw, 1.2rem);
  margin-top: .5rem;
  font-weight: 700;
}

.project-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  
}

.project-card-title{
  font-size: clamp(1.7rem, 1.386rem + 1.571vw, 2.8rem);
  font-family: League Spartan, Arial;
  color: var(--color-darkeraqua);
  margin: 0;
  
}


.project-desc {
  font-family: League Spartan, Arial;
  line-height: 2em;
  font-size: clamp(1rem, 0.643rem + 0.952vw, 1.5rem);
  color: var(--color-darkeraqua);
}




@media (max-width: 700px) {
  .projects-section {
    display: flex;
    flex-direction: column;
    width: calc(100% - 5rem);
    justify-content: center;
    row-gap: 5em;
    align-items: center;
    margin-inline: auto;
    margin-bottom: 100px;
  }

  .project-card-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    background-color: white;
    gap: clamp(1rem, 0.643rem + 0.952vw, 1.5rem);
    align-items: center;
    padding: clamp(1.7rem, 1.329rem + 1.857vw, 3rem);
    border-radius: 25px;
    cursor: pointer;
  }

  .project-info {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .project-card-title {
    font-size: clamp(1.7rem, 1.386rem + 1.571vw, 2.8rem);
    font-family: League Spartan, Arial;
    text-align: center;
    color: var(--color-darkeraqua);
    margin: 0;
  
  }

  .project-desc {
    font-family: League Spartan, Arial;
    line-height: 2em;
    text-align: center;
    font-size: clamp(1.2rem, 1.057rem + 0.381vw, 1.4rem);
    color: var(--color-darkeraqua);
  }

  .project-cover {
    width: min(20vw, 4rem);
    height: auto;
    transition: all 0.2s ease;
    padding-bottom: .5rem;
  }


  .project-cover:active {
    animation: expand 2s infinite;
  }

  #designisty-cover {
    max-width: 70%;
    padding-bottom: .1rem;
  }

}




.contact-section {
  margin-bottom: 250px;
  position: relative;
}


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

.cta-line {
  color: var(--color-darkeraqua);
  font-family: League Spartan, Arial;
  font-size: clamp(0.95rem, 0.2rem + 2vw, 2rem);
  margin-top: clamp(-2rem, -1.914rem + -0.429vw, -2.3rem);
  white-space: nowrap;
}

.contact-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 0.429rem + 2.857vw, 3rem);
  margin-top: 3em;
}

#linkedin-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;

}

.linkedin-icon {
  max-width: 1.4rem;
  height: auto;
  transform: translateY(-3px);
}

@media (max-width:480px) {
  
  .contact-section {
    margin-bottom: 120px;
    position: relative;
}
}



.footer {
  position: relative;
  margin: 0;
  padding: 0;
  background-color: var(--color-baseaqua);
  background-image: url(../assets/PURPLE\ DOT\ PATTERN\ \(1\).png);
  background-repeat: repeat;
  background-size: 7px;
  background-blend-mode: soft-light;
  color: white;
  font-family: League Spartan, Arial; 
  height: 15rem;

}

.footer-name {
  padding: 30px;
  margin: 0;
  font-size: clamp(2.4rem, 1.9rem + 1.333vw, 3.1rem);
  margin-right: 40px;
}

.footer-bar {
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  margin-left: 2em;
  gap: 2em;
  align-items: flex-start;
  width: 300px;
}

.footer-name,
.footer-bar,
.copyright {
  z-index: 2;
}

.footer-link {
  transition: all 0.5s ease; 

}

.footer-link:hover {
  color: var(--color-lightgreen);
  text-decoration: underline;

}

.copyright {
  position: absolute;
  bottom: 0;
  right: 15px;
  font-size: clamp(0.6rem, 0.371rem + 1.143vw, 1.4rem);
}

.heart-deco {
  position: absolute;
  color: var(--color-purple);
  font-size: clamp(2rem, -0.857rem + 7.619vw, 6rem);
  opacity: 0.7;
  margin: 0 20px;
  top: 0;
  right: 0;
  z-index: 1;

}