@import url("https://fonts.google.com/specimen/Nunito+Sans");

body {
  transform: translateY(100px);
  background: black;
  text-align: center;
}

a {
  color: #212121;
  transition: opacity linear 0.3s;
}

p {
  color: maroon;
}

a:hover {
  opacity: 0.8;
  color: #212121;
}

#about,
#skills,
#projects,
#contact {
  display: none;
}

.title {
  font-size: 4em;
  margin: 20px 0px;
}

#profile img {
  margin: 0px auto;
  display: block;
  border: solid 8px darkred;
}

#home p {
  font-family: "Cabin";
  font-size: 15px;
}

#skills i {
  font-size: 40px;
  margin: 10px 4px;
}

ul {
  list-style: none;
}

ul li {
  color: darkred;
  background-color: black;
  font-size: 15px;
  font-family: "Varela Round";
  display: inline-block;
  margin: 5px 5px;
  border: solid 2px #313131;
  border-radius: 18px;
  padding: 10px 10px;
}

#contact ul li {
  border-radius: 15px;
  padding: 10px 23px;
}

#contact .fa {
  font-size: 18px;
}

#navigate {
  margin: 10px 0;
}

#navigate .fa {
  font-size: 20px;
  border: solid 1px darkred;
  padding: 15px 25px;
  margin: 0px 5px;
  color: darkgray;
  transition: opacity linear 0.3s;
  border-radius: 10px;
}

#navigate .fa:hover {
  opacity: 0.8;
  cursor: pointer;
}

.icon-html5-alt {
  color: #01579b;
}

.icon-css3-alt {
  color: #ff5722;
}

.icon-javascript-alt {
  color: #ffc107;
}

.icon-bootstrap {
  color: #512da8;
}

.icon-jquery {
  color: #3f51b5;
}

.icon-nodejs {
  color: #8bc34a;
}

.icon-mongodb {
  color: #4caf50;
}

.icon-python {
  color: #283593;
}

.icon-git {
  color: #f44336;
}

#pomodoro-clock li {
  background: #512da8;
  border-color: #512da8;
}

#tweet li {
  background: #33691e;
  border-color: #33691e;
}

#upvote li {
  background: #ef6c00;
  border-color: #ef6c00;
}

#twentyh li {
  background: #3f51b5;
  border-color: #3f51b5;
}

#tvfreak li {
  background: #3e2723;
  border-color: #3e2723;
}

#notify-me li {
  background: #e53935;
  border-color: #e53935;
}

#wikipedia-viewer li {
  background: #19bd9b;
  border-color: #19bd9b;
}

#codepen li {
  background: #231f20;
  border-color: #231f20;
}

#linkedin li {
  background: #007bb6;
  border-color: #007bb6;
}

#quora li {
  background: #b92b27;
  border-color: #b92b27;
}

#envelope li {
  background: #e94132;
  border-color: #e94132;
}

#github li {
  background: #0d2636;
  border-color: #0d2636;
}