body {
  font-family: "Montserrat", Verdana, Geneva, sans-serif;
  text-rendering: optimizeLegibility;
  color: white;
  background-color: rgb(19,23,34);
}

.page-wrapper {
  margin: 0 auto;
  max-width: 1024px;
  min-width: 924px;
}

/* navbar stuff */
.nav-bar-container {
  display: flex;
  justify-content: space-between;
  padding-top: 25px;
}

.nav-title-container {
  position: relative;
  left: 15px;
}

a.h1 {
  text-decoration: none;
  color: inherit;
  font-weight: 300;
  font-size: 1.9em;
  letter-spacing: 0.06em;
}

a:focus {
    border: none;
    outline: none;
}

.nav-button-container {
  position: relative;
  top: 10px;
  right: 15px;
}

a.button {
  font-weight: 300;
  font-size: 19px;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: inherit;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 3px 6px 5px 6px;
  -webkit-clip-path: polygon(50% 4%, 95% 24%, 95% 75%, 50% 96%, 4% 74%, 4% 25%);
  clip-path: polygon(50% 4%, 95% 24%, 95% 75%, 50% 96%, 4% 74%, 4% 25%);
  transition: clip-path 0.4s ease;
}

a.button:hover {
  border: 2px solid rgb(122,179,170);
  -webkit-clip-path: polygon(50% 0, 105% 0, 105% 100%, 50% 100%, 0 100%, 0 0);
  clip-path: polygon(50% 0, 105% 0, 105% 100%, 50% 100%, 0 100%, 0 0);
}

.nav-bar-divider {
  width: 100%;
  height: 2px;
  background: lightgrey;
  border: transparent;
}
/* end navbar */

/* Begin body */
.main-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0px 10% 0px 10%;
}

.text-container {
  margin: 80px 160px 0px 0px;
}

.paragraph-styling {
  line-height: 38px;
  font-size: 0.9em;
  text-align: left;
  font-weight: 300;
}

.img-container {
  shape-outside: polygon(
    73% 1%,
    100% 0,
    100% 36%,
    78% 59%,
    50% 83%,
    0 100%,
    13% 68%,
    36% 37%,
    35% 27%
  );
  margin: 140px 0px 0px 0px;
}

#feather-style {
  clip-path: polygon(
    73% 1%,
    100% 0,
    100% 36%,
    78% 59%,
    50% 83%,
    0 100%,
    13% 68%,
    36% 37%,
    35% 27%
  );
}

.link-container {
    display: flex;
    justify-content: center;
    margin: 35px 0px 0px 0px;
  }

#icon-style {
    width: 20px;
    height: 20px;
  }

/* End body */

/* Misc Styling & Animations*/
.fadeIn {
  animation-delay: 0.25s;
  animation-name: fadeIn;
}

.fadeInDown {
  animation-delay: .5s;
  animation-name: fadeInDown;
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

/* Should'nt put this here, but I need to override some text. */
#sea-green-text {
  color: rgb(122,179,170);
}