html {
  padding: 0;
  font-family: GothamMedium;
  color: white; }

body {
  margin: 0;
  padding: 0; }

.background {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: -100;
  height: 100vh;
  background-image: url(/img/bg.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: gray;
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); }

.menu-bar {
  position: fixed;
  top: 0;
  z-index: 100; }
  .menu-bar .menu {
    line-height: 2.5rem;
    padding: 0; }
    .menu-bar .menu li {
      display: inline; }
      .menu-bar .menu li a {
        margin-right: 1rem;
        text-decoration: none;
        border: 1px solid white;
        border-radius: 5px;
        padding: 0.5rem;
        color: white; }
        .menu-bar .menu li a:hover {
          background-color: white;
          color: black; }
      .menu-bar .menu li.active a {
        background-color: white;
        color: black; }

.hero {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  width: 100%;
  text-align: center; }
  .hero h1 {
    font-size: 2rem;
    color: white; }
  .hero p {
    color: white; }
  .hero .icons {
    display: flex;
    justify-content: center; }
    .hero .icons a {
      margin: 10px; }
    .hero .icons .icon {
      height: 2rem;
      width: 2rem; }
  .hero .img {
    width: 120px;
    height: 120px;
    margin: auto;
    border-radius: 100%;
    background-position: center;
    background-position-y: 20%;
    background-size: cover;
    background-repeat: no-repeat;
    filter: gray;
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); }

section {
  position: relative;
  height: 100vh;
  background-color: #00000082; }

.tech-stack {
  margin: auto;
  max-width: 80%;
  width: 400px; }
  .tech-stack .tech-item h3 {
    font-size: 1.125rem;
    text-decoration: underline;
    text-transform: uppercase;
    text-underline-position: under; }
  .tech-stack .tech-item p {
    font-size: 1rem;
    font-family: GothamLight; }

.edu {
  margin: auto;
  max-width: 80%;
  width: 400px; }
  .edu .edu-item {
    display: flex; }
    .edu .edu-item .edu-date {
      width: 4rem;
      min-width: 4rem; }
      .edu .edu-item .edu-date .date-top {
        margin-bottom: 0.5em; }
      .edu .edu-item .edu-date .date-bottom {
        margin-top: 0; }
    .edu .edu-item .edu-description p {
      margin-bottom: 0.5em; }
    .edu .edu-item .edu-description span {
      margin-bottom: 1em;
      font-family: GothamLight; }

.project {
  position: relative;
  max-width: 80%;
  width: 400px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  margin: auto; }
  .project h2 {
    text-transform: uppercase;
    text-underline-position: under;
    text-decoration: underline; }
  .project .inner ul {
    line-height: 2.5rem;
    padding: 0; }
    .project .inner ul li {
      color: white;
      display: inline;
      text-decoration: underline; }
  .project .inner .links {
    display: flex; }
  .project .inner a {
    margin-right: 1rem;
    text-decoration: none;
    border: 1px solid white;
    border-radius: 5px;
    padding: 0.5rem;
    color: white; }
    .project .inner a:hover {
      background-color: white;
      color: black; }

.linkedin {
  background-image: url(/img/linkedin.svg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; }

.github {
  background-image: url(/img/github.svg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; }

.center {
  display: flex;
  justify-content: center; }

.fp-controlArrow.fp-next {
  background-image: url(/img/right.svg);
  background-size: auto;
  background-position: center;
  background-repeat: no-repeat;
  right: 15px;
  height: 80px;
  border: none;
  width: 25px; }
  @media screen and (max-width: 768px) {
    .fp-controlArrow.fp-next {
      height: 20px;
      right: 5px !important;
      width: 20px !important; } }

.fp-controlArrow.fp-prev {
  background-image: url(/img/left.svg);
  background-size: auto;
  background-position: center;
  background-repeat: no-repeat;
  left: 15px !important;
  height: 80px;
  border: none;
  width: 25px !important; }
  @media screen and (max-width: 768px) {
    .fp-controlArrow.fp-prev {
      height: 20px;
      left: 5px !important;
      width: 20px !important; } }

@font-face {
  font-family: "GothamMedium";
  src: url("/fonts/Gotham-Medium_1.eot");
  src: url("/fonts/Gotham-Medium_1.eot?#iefix") format("embedded-opentype"), url("/fonts/Gotham-Medium_1.woff2") format("woff2"), url("/fonts/Gotham-Medium_1.woff") format("woff"), url("/fonts/Gotham-Medium_1.ttf") format("truetype"), url("/fonts/Gotham-Medium_1.svg#Gotham-Medium") format("svg"); }

@font-face {
  font-family: "Gotham-Medium";
  src: url("/fonts/Gotham-Medium.eot");
  src: url("/fonts/Gotham-Medium.eot?#iefix") format("embedded-opentype"), url("/fonts/Gotham-Medium.woff2") format("woff2"), url("/fonts/Gotham-Medium.woff") format("woff"), url("/fonts/Gotham-Medium.ttf") format("truetype"), url("/fonts/Gotham-Medium.svg#Gotham-Medium") format("svg"); }

@font-face {
  font-family: "GothamBold";
  src: url("/fonts/Gotham-Bold.eot");
  src: url("/fonts/Gotham-Bold.eot?#iefix") format("embedded-opentype"), url("/fonts/Gotham-Bold.woff2") format("woff2"), url("/fonts/Gotham-Bold.woff") format("woff"), url("/fonts/Gotham-Bold.ttf") format("truetype"), url("/fonts/Gotham-Bold.svg#Gotham-Bold") format("svg"); }

@font-face {
  font-family: "Gotham-Bold";
  src: url("/fonts/Gotham-Bold_1.eot");
  src: url("/fonts/Gotham-Bold_1.eot?#iefix") format("embedded-opentype"), url("/fonts/Gotham-Bold_1.woff2") format("woff2"), url("/fonts/Gotham-Bold_1.woff") format("woff"), url("/fonts/Gotham-Bold_1.ttf") format("truetype"), url("/fonts/Gotham-Bold_1.svg#Gotham-Bold") format("svg"); }

@font-face {
  font-family: "GothamLight";
  src: url("/fonts/Gotham-Light.eot");
  src: url("/fonts/Gotham-Light.eot?#iefix") format("embedded-opentype"), url("/fonts/Gotham-Light.woff2") format("woff2"), url("/fonts/Gotham-Light.woff") format("woff"), url("/fonts/Gotham-Light.ttf") format("truetype"), url("/fonts/Gotham-Light.svg#Gotham-Light") format("svg"); }

@font-face {
  font-family: "Gotham-Light";
  src: url("/fonts/Gotham-Light_1.eot");
  src: url("/fonts/Gotham-Light_1.eot?#iefix") format("embedded-opentype"), url("/fonts/Gotham-Light_1.woff2") format("woff2"), url("/fonts/Gotham-Light_1.woff") format("woff"), url("/fonts/Gotham-Light_1.ttf") format("truetype"), url("/fonts/Gotham-Light_1.svg#Gotham-Light") format("svg"); }