styles.css

body{
  margin: 0;
  font-family: 'Lato', sans-serif;
}

.title{
  display: flex;
  justify-content: center;
  font-size: 1.1em;
}

.nav{
  display: flex;
  justify-content: center;
  padding-bottom: 2%;
}

.info{
  display: flex;
  justify-content: center;
  color: grey;
}

.nav a{
  color: grey;

  border-bottom: 2px solid transparent;
  transition: border-bottom 0.5s;

  text-decoration: none;

  margin-right: 10px;
  margin-left: 10px;
  font-size: 1.1em;
}

.nav a:hover{
  border-bottom: 2px solid black;
}

.about h2{
  border-left: 5px solid black;
  padding-left: 1%;
}

.about h3{
  border-left: 5px solid black;
  padding-left: 1%;
}

.link a{
  text-decoration: none;
  color: grey;
  border-bottom: 2px solid transparent;
  transition: border-bottom 0.5s;
}

.link a:hover{
  border-bottom: 2px solid black;
}

p{
  display: block;
  padding-bottom: 1%;
}

/* Computer/Wide View: */
@media only screen and (min-width: 501px) {
  .content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }

  .about{
    padding-left: 20%;
    padding-right: 20%;
  }

  .picture img {
    width: 95%;
  }

  .picture {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile View: */
@media only screen and (max-width: 500px) {
  .content {
    display: grid;
    grid-template-columns: 1fr;
  }

  .about{
    padding-left: 10%;
    padding-right: 10%;
  }

  .picture img {
    width: 100%;
  }
}

.content img {
  vertical-align: middle;
  filter: brightness(100%) opacity(50%);
  transition: filter 0.5s;
}

.content img:hover{
  filter: brightness(100%);
}