.container {
  max-width: 1280px;
  padding: 0 1.5rem;
  margin: auto;
  overflow: hidden; }

* {
  margin: 0;
  padding: 0; }

body {
  line-height: 1.5;
  font-family: "Dosis", sans-serif; }

a {
  text-decoration: none; }

ul {
  list-style: none; }

img {
  width: 100%; }

#header-home {
  background: #333;
  color: white; }
  #header-home #main-nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 1rem 1.5rem; }
    #header-home #main-nav h1 {
      transition: all 150ms ease; }
    #header-home #main-nav h1:hover {
      font-weight: lighter;
      color: #f73859; }
    #header-home #main-nav ul {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center; }
      #header-home #main-nav ul li {
        padding-right: 1.5rem; }
        #header-home #main-nav ul li a {
          color: white;
          text-transform: uppercase;
          border-bottom: 3px transparent solid;
          transition: all 0.5s; }
          #header-home #main-nav ul li a:hover {
            border-color: #f73859;
            font-size: 1.2rem; }
          #header-home #main-nav ul li a.current {
            border-color: #f73859; }

#showcase-home {
  text-align: center;
  background: url("../images/background.jpeg") no-repeat center right/cover;
  height: 100vh; }
  #showcase-home .container {
    padding: 0 6rem;
    padding-top: 3rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1rem;
    height: 70vh; }
    #showcase-home .container img {
      border-radius: 15px;
      height: 300px;
      width: 300px;
      margin: auto; }
    #showcase-home .container .showcase-content {
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center; }
      #showcase-home .container .showcase-content h1 {
        font-size: 3rem; }
        #showcase-home .container .showcase-content h1 strong {
          border-bottom: 3px #f73859 solid; }
      #showcase-home .container .showcase-content a {
        padding: 1rem 2rem;
        background-color: #333;
        color: white; }
        #showcase-home .container .showcase-content a:hover {
          opacity: 0.95; }

#about-main {
  text-align: center;
  padding: 3rem 0; }
  #about-main .container .section-title {
    font-size: 2rem;
    display: block;
    padding-bottom: 0.5rem;
    text-align: center;
    font-weight: 100;
    text-transform: uppercase; }
  #about-main .container .lead {
    font-size: 1.3rem;
    margin-bottom: 2rem; }
  #about-main .container .bottom-line {
    height: 2px;
    width: 3rem;
    background: #f73859;
    display: block;
    margin: 0 auto 1rem auto; }
  #about-main .container .about-info {
    display: grid;
    grid-template-areas: "bioimage bio bio";
    grid-gap: 1.2rem; }
    #about-main .container .about-info img {
      border-radius: 10px;
      box-shadow: 2px 2px 4px 0 #333; }
    #about-main .container .about-info .bio-image {
      grid-area: bioimage; }
    #about-main .container .about-info .bio {
      grid-area: bio;
      background: #f4f4f4;
      border-left: 3px solid #f73859;
      padding: 0.8rem;
      border-radius: 10px;
      box-shadow: 2px 2px 4px 0 #333; }
      #about-main .container .about-info .bio h4 {
        padding-bottom: 0.5rem; }
        #about-main .container .about-info .bio h4 span {
          border-bottom: 2px #f73859 solid; }
      #about-main .container .about-info .bio p {
        padding-bottom: 1.5rem; }
        #about-main .container .about-info .bio p a {
          color: black;
          border-bottom: 1px #f73859 solid;
          transition: all 5ms ease-in; }
          #about-main .container .about-info .bio p a:hover {
            font-weight: bold;
            color: #f73859;
            border-bottom: none; }

#experience .container #experience-heading {
  text-align: center;
  margin-top: 1rem;
  font-size: 3rem; }

#experience #bottom-line {
  height: 2px;
  width: 5rem;
  background: #f73859;
  display: block;
  margin: 0 auto 1rem auto; }

#experience .page-container {
  display: grid;
  grid-template-columns: 5fr 2fr;
  margin: 2rem 0;
  grid-gap: 1.5rem; }
  #experience .page-container .card {
    padding: 1rem; }
    #experience .page-container .card h2 {
      text-align: center; }
    #experience .page-container .card .experiences-container .work-done table li {
      padding-left: 1rem; }
    #experience .page-container .card .experiences-container {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly; }
      #experience .page-container .card .experiences-container .work-done {
        background: #f4f4f4;
        border-left: 3px solid #f73859;
        padding: 0.8rem;
        border-radius: 10px;
        box-shadow: 2px 2px 4px 0 #333; }
      #experience .page-container .card .experiences-container .tech-skills {
        background: #f4f4f4;
        border-left: 3px solid #f73859;
        padding: 0.8rem;
        border-radius: 10px;
        box-shadow: 2px 2px 4px 0 #333;
        margin-top: 2rem; }
        #experience .page-container .card .experiences-container .tech-skills h5 {
          padding-left: 1rem; }
        #experience .page-container .card .experiences-container .tech-skills p {
          padding-left: 2rem; }
    #experience .page-container .card .project {
      background: #f4f4f4;
      border-left: 3px solid #f73859;
      padding: 0.8rem;
      border-radius: 10px;
      box-shadow: 2px 2px 4px 0 #333; }
      #experience .page-container .card .project p {
        padding-left: 1.5rem;
        padding-bottom: 0.5rem; }
      #experience .page-container .card .project #last-p-project {
        padding-bottom: 1rem; }
      #experience .page-container .card .project a {
        padding: 0.5rem 1rem;
        background-color: #333;
        color: white;
        margin-left: 3.9rem; }
        #experience .page-container .card .project a:hover {
          opacity: 0.95; }

#experience .page-container > *:first-child {
  grid-row: 1 / span 3; }

#contact-main {
  text-align: center;
  padding: 3rem 0;
  height: 70vh; }
  #contact-main .container .section-title {
    font-size: 2rem;
    display: block;
    padding-bottom: 0.5rem;
    text-align: center;
    font-weight: 100;
    text-transform: uppercase; }
  #contact-main .container .bottom-line {
    height: 2px;
    width: 3rem;
    background: #f73859;
    display: block;
    margin: 0 auto 1rem auto; }
  #contact-main .container .bio {
    background: #f4f4f4;
    border-left: 3px solid #f73859;
    padding: 0.8rem;
    border-radius: 10px;
    box-shadow: 2px 2px 4px 0 #333;
    margin-bottom: 3rem; }
    #contact-main .container .bio h4 {
      padding-bottom: 1rem; }
      #contact-main .container .bio h4 span {
        border-bottom: 2px #f73859 solid; }
    #contact-main .container .bio .indent {
      padding-left: 1rem; }
    #contact-main .container .bio .bold {
      font-weight: bold; }
    #contact-main .container .bio p {
      padding-bottom: 1.5rem;
      text-align: left; }
      #contact-main .container .bio p a {
        color: black;
        border-bottom: 1px #f73859 solid;
        transition: all 5ms ease-in; }
        #contact-main .container .bio p a:hover {
          font-weight: bold;
          color: #f73859;
          border-bottom: none; }
      #contact-main .container .bio p span {
        border-bottom: 1px #f73859 solid; }

#main-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem 0;
  background: #333; }
  #main-footer .links .fab {
    text-align: center;
    padding-right: 1.5rem;
    color: white; }
    #main-footer .links .fab:hover {
      color: #f73859;
      cursor: pointer; }

@media (max-width: 800px) {
  #header-home #main-nav {
    display: flex;
    flex-direction: column; }
    #header-home #main-nav h1 {
      text-align: center; }
  #showcase .container {
    display: grid;
    grid-template-rows: repeat(3, 1fr); }
  #about-main .container .about-info {
    display: grid;
    grid-template-areas: "bioimage" "bio";
    grid-gap: 1.2rem; }
  #experience .page-container {
    display: grid;
    grid-template-columns: 1fr; } }