@import url("https://fonts.googleapis.com/css2?family=Merriweather&display=swap");

html {
  background: rgb(41, 41, 41);
  background: -moz-linear-gradient(
    180deg,
    rgba(41, 41, 41, 1) 0%,
    rgba(24, 30, 48, 1) 100%
  );
  background: -webkit-linear-gradient(
    180deg,
    rgba(41, 41, 41, 1) 0%,
    rgba(24, 30, 48, 1) 100%
  );
  background: linear-gradient(
    180deg,
    rgba(41, 41, 41, 1) 0%,
    rgba(24, 30, 48, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#292929",endColorstr="#181e30",GradientType=1);
  height: 100%;
  width: 100%;
}

div {
  font-family: "Merriweather", serif;
  font-size: 2rem;
}

p,
a {
  text-align: center;
  margin-top: 5%;
  margin-bottom: 2rem;
  color: #eee;
}

ul {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1rem;
  list-style-type: none;
  font-size: 2rem;
}

ul li {
  padding: 1rem;
}

.fab {
  font-size: 5rem;
}

/* transition for social icon hover animation */
.fa-facebook,
.fa-codepen,
.fa-youtube,
.fa-instagram,
.fa-github,
.fa-pinterest {
  transition: 0.4s;
  cursor: pointer;
}

/* social media icons hover color */
.fa-facebook:hover,
.fa-facebook:focus {
  color: #1877f2;
  transform: scale(1.1);
}

.fa-twitter:hover,
.fa-twitter:focus {
  color: #1da1f2;
  transform: scale(1.1);
}

.fa-youtube:hover,
.fa-youtube:focus {
  color: #df2426;
  transform: scale(1.1);
}

.fa-instagram:hover,
.fa-instagram:focus {
  color: #bd22a2;
  transform: scale(1.1);
}

.fa-github:hover,
.fa-github:focus {
  color: #000;
  transform: scale(1.1);
}

.fa-github:hover,
.fa-github:focus {
  color: #000;
  transform: scale(1.1);
}

.fa-codepen:hover,
.fa-codepen:focus {
  color: #000;
  transform: scale(1.1);
}

.fa-pinterest:hover,
.fa-pinterest:focus {
  color: #b3001b;
}