html {

  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

}

a {

  text-decoration: none;
  
}

button:hover {

  cursor: pointer;

}

li {

  margin: 3rem;
  
}

body {

  display: flex;
  flex-direction: column;

  height: 100%;

  justify-content: center;
  justify-items: center;
  justify-self: center;
  align-content: center;
  align-items: center;
  align-self: center;

  letter-spacing: 0.1rem;

  margin: 0;

  background-image: linear-gradient(#000010, #000006);
  color: white;

  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  
}

#lightbox {

  display: none;

  position:fixed;
  left: 0;
  top: 0;
  z-index: 10;

  width: 100%;
  height: 100%;

  background: none;
  opacity: 1.0;

}

#header_div {

  display: flex;

  flex-direction: column;

  width: 100%;

  justify-items: center;
  align-items: center;

  margin-top: 2.5rem;

  font-size: clamp(1rem, 1vw, 2.5rem);

}

#banner {

  display: flex;

  justify-content: center;

  width: 100%;

}

#banner_img {

  width: 70%;

  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;

}

#profile_email_icon {

  font-size: clamp(5rem, 2vw, 7rem);

  width: 50%;

  margin: 2rem;

  color: #FFFFFF;

  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;

  box-shadow:
    0 6px 18px rgba(255, 255, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  background: linear-gradient(
    180deg,
    #355a8a 0%,
    #2e4770 100%
  );

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;

}

#profile_email_icon:hover {

  transform: translateY(-2px);

  box-shadow:
    0 10px 28px rgba(255, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);

  background: linear-gradient(
    180deg,
    #3c67a1 0%,
    #32568a 100%
  );

}

#profile_email_icon:active {

  transform: translateY(0);

  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.5),
    inset 0 2px 4px rgba(0, 0, 0, 0.4);

}

#bio_hero_container {

  display: flex;
  flex-direction: row;

  width: 100%;

  margin-top: 2rem;

  background-color: black;

  text-align: center;

}

#bio_hero {

  display: flex;
  flex-direction: row;

  justify-content: center;
  align-items: center;

  width: 100%;

}

#profile_img {

  max-width: 400px;

  margin: 5rem;

  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;

}

#profile_img:hover {

  cursor: pointer;

}

#bio_headline {

  width: 50%;

  margin: 0 0 5rem 0;

  text-align: center;
  font-size: clamp(4.5rem, 1vw, 5rem);

  font-style: italic;

}

#bio {

  display: flex;
  flex-direction: column;

  justify-content: center;
  justify-self: center;
  justify-items: center;
  align-items: center;
  align-self: center;
  align-content: center ;

  text-align: center;

  margin: 3rem 3rem 3rem 4rem;

  line-height: 4rem;

  font-size: clamp(3rem, 1vw, 5rem);

}

#contact_button_container {

  display: flex;

  width: 100%;

  margin: 1rem;

  justify-content: center;

}

#contact_button {

  width: 50%;
  height: 10rem;

  padding: 1.2rem 2rem;
  margin: 6rem;

  background: linear-gradient(
    180deg,
    #355a8a 0%,
    #2e4770 100%
  );

  color: #FFFFFF;
  font-size: clamp(3rem, 2vw, 4rem);
  font-weight: 600;

  letter-spacing: 0.15rem;

  border-radius: 10px;

  box-shadow:
    0 6px 18px rgba(255, 255, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;

}

#contact_button:hover {

  transform: translateY(-2px);

  box-shadow:
    0 10px 28px rgba(255, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);

  background: linear-gradient(
    180deg,
    #3c67a1 0%,
    #32568a 100%
  );

}

#contact_button:active {

  transform: translateY(0);

  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.5),
    inset 0 2px 4px rgba(0, 0, 0, 0.4);
    
}






@media (max-aspect-ratio: 1/1) {

  #banner_img {

    width: 100%;
    
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;

  }

  #bio_hero {

    flex-direction: column;
    
  }

  #bio_headline {

    font-size: clamp(3.5rem, 1vw, 4rem);

  }

  #bio {

    font-size: clamp(3rem, 1vw, 4rem);

  }

  #contact_button {

    width: 80%;

    font-size: clamp(2.5rem, 2vw, 3rem);

  }

}