html, body {
  margin: 0;
  padding: 0; }

#HeroSection {
  background-color: #000; }
  #HeroSection .container {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between; }
    @media only screen and (max-width: 768px) {
      #HeroSection .container {
        padding-bottom: 4rem; } }
  #HeroSection .profile {
    width: 95%;
    display: flex;
    justify-content: space-between; }
    @media only screen and (max-width: 768px) {
      #HeroSection .profile {
        display: block;
        text-align: center;
        width: 100%; } }
    #HeroSection .profile .title {
      padding-top: 10rem;
      display: flex;
      flex-direction: column;
      text-align: right; }
      @media only screen and (max-width: 768px) {
        #HeroSection .profile .title {
          padding-top: 4rem;
          justify-content: center;
          align-items: center; } }
      #HeroSection .profile .title #SubTitle {
        background-color: #F3B61F;
        display: inline-block;
        align-self: flex-end;
        margin-top: 1rem;
        padding: 0.5rem 1rem; }
        @media only screen and (max-width: 768px) {
          #HeroSection .profile .title #SubTitle {
            align-self: center; } }
    #HeroSection .profile img {
      align-self: center;
      width: 35rem; }
      @media only screen and (max-width: 768px) {
        #HeroSection .profile img.profile_img {
          display: none; } }
      #HeroSection .profile img.logo_img {
        width: 8rem; }
        @media only screen and (min-width: 768px) {
          #HeroSection .profile img.logo_img {
            display: none; } }

#AboutSection {
  min-height: 100vh; }
  #AboutSection #BigHeroText {
    text-align: center;
    padding-top: 8rem; }
  #AboutSection .me {
    text-align: center;
    padding-bottom: 4rem;
    margin: 0 auto;
    width: 50%; }
    @media only screen and (max-width: 768px) {
      #AboutSection .me {
        width: 100%; } }
    #AboutSection .me a {
      text-decoration: none;
      font-size: 2.4rem;
      color: #000;
      margin: 0 1rem; }
      #AboutSection .me a i {
        margin-top: 1rem; }
  #AboutSection .content_container {
    justify-content: space-between; }
    #AboutSection .content_container .love {
      padding-top: 6rem; }
      #AboutSection .content_container .love #PrimaryTitle {
        text-align: center; }

#AboutBox {
  background-color: #000;
  width: 100%;
  margin: 0 auto;
  padding: 4rem 0; }
  @media only screen and (max-width: 768px) {
    #AboutBox {
      padding-top: 4rem; } }
  #AboutBox #PrimaryTitle {
    text-align: center; }

#PortfolioSection {
  background-color: #fff;
  min-height: 100vh;
  text-align: center; }
  #PortfolioSection #BigHeroText {
    padding-top: 8rem; }

#FooterSection {
  margin-top: 4rem;
  padding: 8rem 0 10rem 0;
  background-color: #000;
  text-align: center; }
  @media only screen and (max-width: 768px) {
    #FooterSection {
      padding: 4rem 0 6rem 0; } }
  #FooterSection i {
    font-size: 1.5rem;
    color: #fff;
    margin-right: 1rem; }
  #FooterSection a {
    text-decoration: none; }
    #FooterSection a:after {
      content: '';
      display: block;
      height: 5px;
      background-color: #fff;
      width: 0;
      margin-top: 0.6rem;
      transition: all .2s ease-in-out; }
      @media only screen and (max-width: 768px) {
        #FooterSection a:after {
          display: none; } }
  #FooterSection .contact {
    margin: 0;
    display: flex;
    justify-content: center; }
    @media only screen and (max-width: 768px) {
      #FooterSection .contact {
        display: block;
        padding-top: 2rem; } }
    #FooterSection .contact div {
      display: flex; }
      @media only screen and (max-width: 768px) {
        #FooterSection .contact div {
          display: block;
          padding-top: 1.5rem; } }
      #FooterSection .contact div.contact_section {
        margin: 0 1.5rem; }
      @media only screen and (max-width: 768px) {
        #FooterSection .contact div #CommonText {
          padding-top: 0.4rem; } }
      #FooterSection .contact div:hover a:after {
        width: 100%; }
  #FooterSection .git {
    padding-top: 6rem; }
    #FooterSection .git a {
      display: flex;
      justify-content: center;
      padding-top: 1rem; }
      #FooterSection .git a:hover #CommonText {
        opacity: 0.7; }
      #FooterSection .git a #CommonText {
        color: #F3B61F;
        margin-top: 0.1rem;
        opacity: 1;
        transition: all .2s ease-in-out; }

#MainNavigation {
  color: #fff;
  padding-top: 2rem;
  display: flex;
  justify-content: space-between; }
  @media only screen and (max-width: 768px) {
    #MainNavigation {
      justify-content: center; } }
  #MainNavigation img {
    width: 3rem; }
    @media only screen and (max-width: 768px) {
      #MainNavigation img {
        display: none; } }
  #MainNavigation ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style-type: none; }
  #MainNavigation li {
    line-height: 3rem;
    font-family: 'Montserrat', sans-serrif;
    font-weight: 700; }
    #MainNavigation li:nth-child(2) {
      margin: 0 1.5rem; }
    #MainNavigation li:hover {
      cursor: pointer; }
      #MainNavigation li:hover a:after {
        width: 100%; }
  #MainNavigation a {
    color: #fff;
    text-decoration: none;
    box-sizing: border-box; }
    #MainNavigation a:after {
      content: '';
      display: block;
      height: 5px;
      background-color: #fff;
      width: 0;
      transition: all .2s ease-in-out; }

#PrimaryTitle {
  font-size: 2.3rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; }
  #PrimaryTitle.dark {
    color: #000; }
  #PrimaryTitle.light {
    color: #fff; }

#SubTitle {
  color: #fff;
  font-size: 0.8rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; }

#BigHeroText {
  font-size: 8rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; }
  #BigHeroText.dark {
    color: #000; }
  #BigHeroText.light {
    color: #fff; }
  #BigHeroText::selection {
    color: #F3B61F; }
  @media only screen and (max-width: 768px) {
    #BigHeroText {
      font-size: 2.5rem; } }

#CommonText {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; }
  #CommonText.dark {
    color: #000; }
  #CommonText.light {
    color: #fff; }
  #CommonText.medium {
    font-family: 'Montserrat';
    font-weight: 400; }

#LogoOverview {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 1rem; }
  #LogoOverview img {
    width: 5rem;
    align-self: center;
    margin: 0 1rem;
    transform: scale(1);
    transition: all 300ms ease-in-out;
    filter: grayscale(1);
    margin-top: 2rem; }
    #LogoOverview img:hover {
      transform: scale(1.1);
      filter: grayscale(0); }

#LogoPlaceholder {
  background-color: #000;
  width: calc(50% - 1rem);
  margin: 0.5rem;
  display: flex;
  justify-content: center; }
  @media only screen and (max-width: 768px) {
    #LogoPlaceholder {
      display: none; } }
  #LogoPlaceholder img {
    width: 40%;
    align-self: center;
    transition: all 2s ease-in-out; }
  #LogoPlaceholder:hover img {
    transform: scale(1.1); }

#ProjectsOverview {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding-top: 4rem;
  align-items: stretch; }
  @media only screen and (max-width: 768px) {
    #ProjectsOverview {
      display: block; } }

#SingleProject {
  width: calc(50% - 1rem);
  min-height: 25rem;
  margin: 0.5rem; }
  @media only screen and (max-width: 768px) {
    #SingleProject {
      width: 100%;
      margin: 1rem 0 0 0; } }
  #SingleProject .overlay {
    background-color: #000;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transition: all 0.2s ease-in-out; }
  #SingleProject .overlay_text {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 4rem; }
    #SingleProject .overlay_text #CommonText {
      position: relative;
      top: 40%;
      opacity: 0;
      transition: all 0.3s ease-in-out 150ms;
      margin-bottom: 0.5rem; }
      #SingleProject .overlay_text #CommonText.second {
        transition: all 0.2s ease-in-out 150ms; }
  #SingleProject .img_container {
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    height: 100%; }
    #SingleProject .img_container img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: all 2s ease-in-out; }
    #SingleProject .img_container .description {
      position: absolute;
      overflow: hidden;
      bottom: 0;
      height: 0rem;
      width: 100%;
      background-color: #000;
      transition: all 0.2s ease-in-out;
      padding: 0 2rem;
      text-align: left;
      line-height: 5rem;
      display: flex;
      justify-content: space-between; }
      #SingleProject .img_container .description .icons {
        display: flex; }
        #SingleProject .img_container .description .icons i {
          color: #fff;
          font-size: 1.6rem;
          line-height: 5rem;
          margin-left: 1.5rem; }
          #SingleProject .img_container .description .icons i:hover {
            cursor: pointer; }
    #SingleProject .img_container:hover img {
      transform: scale(1.1); }
    #SingleProject .img_container:hover .description {
      height: 5rem; }
    #SingleProject .img_container:hover .overlay {
      opacity: 0.4; }
    #SingleProject .img_container:hover .overlay_text #CommonText {
      opacity: 1;
      top: 30%; }