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

#header{
  padding: 10px;
  background-color: #96ceb4;
}
#fcc{
  height: 30pt; 
  display: inline; 
  margin: -15px 10px 0px 0px;
}
#header_photo{
  border-radius:50%;
  border: 5px solid 	#ff6f69;
  width: 20vw;
  width: height;
  margin: 0 auto;
  min-width: 125px;
}

#name{
  color: #ffeead;
  font-family: 'PT Sans', sans-serif;
  font-weight: bold;
  font-size: 60px;
}

.icons{
  display: inline-block;
  border-radius: 60px;
  box-shadow: 0px 0px 2px #888;
}
#portfolio{
  padding: 50px;
  margin: 0;
  width: 100%;
}
.portfolio-item{
  background-color: white;
  padding:10px;
}

.black-fill{
  position: absolute;
  background-color: rgba(0,0,0,0.75);
  border-radius: 10%; 
  top:10px; bottom:10px; left:10px; right:10px;
  color: white;
  text-align: center;
  font-family: 'PT Sans', sans-serif;
  transition: background-color 0.4s ease;
}

.inner{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}

.inner h1{
  font-size: 42pt;
}

#footer{
  color: white;
  background-color: #555;
  text-align: center;
  padding: 10px;
  font-family: 'PT Sans', sans-serif;

}

a:link {
    text-decoration: inherit;
    color: inherit;
}
a:visited {
    text-decoration: inherit;
    color: inherit;
}


.vertical-center {
  display: flex;
  align-items: center;
}

@media (max-width: 775px) {
 .vertical-center{
   display: block;
 }
 
 #title{
   display: block !important;
   margin-top: 0;
 }
 .inner h1{
  font-size: 30pt;
 }
 #fcc{
   height: 25pt !important;
 }
 #footer a{
   display: block !important;
 }
}