body {
  font-family: 'Josefin Sans', sans-serif;
}

.card {
  background-color: transparent;
  border:transparent;
}

.card-text {
  color: white;
}

.bg-dark {
    color: #196786;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #868e96;
}

svg {
  transition: all .2s ease-in-out;
  width: 30%;
}

svg:hover {
  transform: scale(1.3, 1.3);
}

.nav {
  display: grid;
  width: 100%;
}

.navbar-brand {
  display: grid;
  justify-content: center;
  width: 100%;
  font-size: large;
  margin-left: auto;
  margin-right: auto;
}

#navbarNavDropdown {
  padding-left: 5%;
}

.card-header {
  font-size: x-large;
}

.footer {
  display: grid;
  grid-column: span 2;  
  padding-bottom: 5%;
  place-content: center;
}

#contact {
  display: grid;
  grid-column: span 2;
}

#svg-icons {
  display: grid;
  grid-template-columns: 33% 33% 33%;
  justify-items: center;
}

/* Media Queries */

@media only screen
  and (min-device-width: 768px) {
    .navbar-brand {
      font-size: xx-large;
    }

    #container-fluid {
      display: grid;
      grid-template-columns: 45% 45%;
      grid-gap: 1%;
      justify-content: space-evenly;
      margin-bottom: 3%;
      margin-top: 3%;
    }
}

#contact {
  display: grid;
  grid-column: span 1/2;
}

.row footer {
  display: grid;
  grid-column: span 1/2;
}

@media only screen
  and (min-device-width: 1024px) {
    .project-header {
      display: none;
    }

    .card:hover .overlay {
      opacity: 1;
      background-color: #868e96;
    }

    .text {
      color: white;
      font-size: xx-large;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      text-align: center;
    }

    .bg-secondary:hover {
      opacity: .5;
    }

    #about-text {
      font-size: large;
    }

    #contact {
      display: grid;
      grid-column: span 2;
}

}