body, .card {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color: whitesmoke;
  background-image: url('Images2/watercolor3.jpg');
}

h2 {
  font-size:small;
  color: white;
  text-align: center;
}

.contact-info {
  background-color:rgb(121, 139, 108);
  width: 50%;
  margin: auto;
  padding: 20px;
  border-radius: 10%;
}

.headshot {
  margin-top: 5%;
  border-radius: 50%;
}

.icon {
  height: 40px;
  margin-bottom: 5px;
  border-radius: 20%;
}


.links {
  color:white;
}

.navbar-dark {
  background-color: rgb(121, 139, 108);
}

.port-image {
  border-radius: 10%;
  margin-bottom: 10%;
}

.portfolio{
  background-color:rgb(121, 139, 108);
  width: 50%;
  margin: auto;
  padding: 40px;
  border-radius: 10%;
  text-align: center;
}

.screenshot {
  width: 500px;
}

.submitbtn{
  background-color: rgb(83,110,75);
  color:white;
}

.text{
  margin-top: 5%;
  background-color: rgb(121, 139, 108);
}

#aboutMe{
  position: relative;
}

#media-links {
  border-top: 3px solid rgb(22, 22, 22); ;
}

@media screen and (max-width:992px) {
  .headshot { 
    margin-left:10%;
  }
 .text {
    width:80%;
  }
  .contact-info {
    width:90%;
    margin-bottom: 20px;
  }
  .portfolio {
    width:90%;
  }
}

@media only screen and (max-width: 667px) {
  .headshot { 
    margin-left:10%;
  }
 .text {
    width:80%;
  }
  .contact-info {
    width:90%;
    margin-bottom: 20px;
  }
  .portfolio {
    width:90%;
  }
}

/* on hover show screenshot for portfolio */
.hover-img img:last-child {
  display: none;  
}
.hover-img:hover img:last-child {
  display: block;  
}
.hover-img:hover img:first-child {
  display: none;  
}