@import url("/?originalUrl=https%3A%2F%2Ffonts.googleapis.com%2Fcss2%3Ffamily%3DPoppins%3Aital%2Cwght%400%2C100%3B0%2C200%3B0%2C300%3B0%2C400%3B0%2C500%3B0%2C600%3B0%2C700%3B0%2C800%3B0%2C900%3B1%2C100%3B1%2C200%3B1%2C300%3B1%2C400%3B1%2C500%3B1%2C600%3B1%2C700%3B1%2C800%3B1%2C900%26display%3Dswap");
/* Colors - https://www.computerhope.com/jargon/w/w3c-color-names.htm */

body {
  font-family: 'Poppins';
  margin-top: 2vw; /* vw stands for viewport width */
  margin-bottom: 2vw;
  font-weight: 300;
}

.semi-bold {
  font-weight: 500;
}

.bold {
  font-weight: 600;
}

.extra-bold {
  font-weight: 700;
}

header {
  background-color: #fff;
  padding: 1rem 0;
  position: sticky; /* keep the navigation bar in view when scrolling */
  top: 0;
  z-index: 100; /* make sure the navigation bar is on top of other elements */
}

h1 {
  font-size: 1.5rem;
  margin: 0.5rem 0;
  font-weight: normal;
}

h2 {
  font-size: 1.2rem;
  margin: 0.5rem 0;
  font-weight: normal;
}

/* Paragraphs */
p {
  text-align: justify;
  font-size: 1rem;
  line-height: 1.4rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

/* Unordered list */
ul {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

/* List element */
li {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

/* Links */
a {
  color: steelblue;
  text-decoration: none; /* removes underline */
  font-weight: semi-bold;
}

a:hover {
  color: orange;
  text-decoration: underline;
}

a:visited {
  color: purple;
}

footer {
  text-align: center;
  margin-top: 10rem;
  width: 100%;
  font-size: 0.7rem;
}

/* --------------------------- NAVIGATION BAR ------------------------------- */

.navbar {
  list-style: none; /* remove list bullets */
  padding: 0;
  margin: 0;
  display: flex; /* display navigation items horizontally */
  justify-content: flex-end; /* right-align the navigation */
  margin-right: 12vw; /* add a margin to the right -- this depends on the width of the content container in flexbox */
  padding: auto;
  position: sticky; /* keep the navigation bar in view when scrolling */
  top: 0;
  z-index: 100; /* make sure the navigation bar is on top of other elements */
}

/* Navbar list elements */
.navbar li {
  margin-left: 5vw; /* add space between navigation items */
}

/* Navbar links */
.navbar li a {
  text-decoration: none;
}

/* ------------------------------- CONTAINERS ------------------------------- */

.main-container {
  display: flex;
  max-width: 75vw; /* maximum width of the entire content */
  margin: 2rem auto; /* top bottom margin, right left margin set based on max-width */
  padding-top: 2rem; /* padding between the navbar and main sections */
}

/* headshot and social links take up 33% of the screen */
.headshot-section {
  flex: 1; /* take up 1/3 of the screen */
  height: 10vh; /* add space between the sidebar and content */
  position: sticky; /* keep the headshot section in view when scrolling */
  top: 75px;
  bottom: 0;
}

/* remaining sections take up 67% of the screen */
.content-section {
  flex: 2;
}

/* When viewing on smaller screens p to 768px (typical tablet and mobile sizes),
 stack the columns on top of each other */
@media (max-width: 768px) {
  .main-container {
    flex-direction: column; /* stack columns on top of each other */
  }

  /* disable sticky scrolling for mobile */
  .headshot-section{
    height: auto;
    position: static;
    top: initial;
    bottom: initial;
  }

  .content-section {
    flex: auto;
    border: none;
    position: relative;
    top: initial;
    padding-top: 20px; /* add some space between columns */
  }
}

/* ------------------------------- HEADSHOT --------------------------------- */

.headshot {
  margin-left: 0;
}

.headshot img {
  max-width: 75%;
  object-fit: contain;
}

.headshot-name {
  font-size: 1.5rem;
  font-weight: normal;
  margin-left: 0;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.social-links {
  margin-left: 0;
}