.collab {
  text-align: right;
}

.collab p {
  font-weight: lighter !important;
  margin-bottom: 20px;
}

.hr {
  background: rgba(255, 255, 255, 0.2);
  height: 1px;
}

.info h4 {
  font-size: 18px;
  font-weight: lighter;
}

.info p {
  color: grey;
  font-weight: lighter;
}

.info li {
  font-weight: lighter;
  color: #fff;
  font-size: 18px;
  padding-left: 20px;
}

#fb::before {
  display: inline-block;
  content: '';
  border-radius: 100%;
  height: 4px;
  width: 4px;
  margin-right: 6px;
  background: #3b5998;
}


#ig::before {
  display: inline-block;
  content: '';
  border-radius: 100%;
  height: 4px;
  width: 4px;
  margin-right: 6px;
  background: #fcaf45;
}


#tw::before {
  display: inline-block;
  content: '';
  border-radius: 100%;
  height: 4px;
  width: 4px;
  margin-right: 6px;
  background: #55acee;
}


#yt::before {
  display: inline-block;
  content: '';
  border-radius: 100%;
  height: 4px;
  width: 4px;
  margin-right: 6px;
  background: #c4302b;
}

#gh::before {
  display: inline-block;
  content: '';
  border-radius: 100%;
  height: 4px;
  width: 4px;
  margin-right: 6px;
  background: #24292e;
}

#media, #address {
  text-align: right;
}

#media ul {
  list-style: none;
}

#media ul li {
  display: inline-block;
}

@media(max-width: 768px) {
  .collab, #personal, #media, #address {
    text-align: center;
  }

  .info ul {
    margin: 0 0 0 -22px;
    padding: 0;
  }
}

/* Honestly, this took way longer to figure out than it should've. I scoured the internet for so long, at one point, I think
// I had around 20+ tabs open, no idea how I really figured it out, just tried as many solutions until it was solved. - 17:27, 10/20/2018
*/
div #no-h, #personal a, a:hover, #media a, a:hover, #address a, a:hover {
  color: inherit;
  text-decoration: none;
  transition: 0.5s;
}