body {
  font-family: "Poppins", sans-serif;
}

/*Nav*/
nav {
  background-color: #f6eff1;
}

.nav-item {
  padding: 5px;
}

.nav-link:hover {
  color: rgba(0, 0, 255);
  box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, 0.2);
}

section {
  /*border-top: solid 5px grey;*/
}

#about {
  background: rgb(238, 174, 202);
  background: radial-gradient(
    circle,
    rgba(238, 174, 202, 1) 0%,
    rgba(148, 187, 233, 1) 100%
  );
}

#about-container {
  background-color: #ffffff38;
  border-radius: 15px;
  color: #1a1818;
}

#about-container .btn {
  background-color: #eeaeca;
}

#social-list {
  font-size: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

#social-list i {
  color: #fff;
}

#profile-picture {
  width: 100%;
  border-radius: 50%;
  padding: 20px;
}

#skills {
}

.skill-icon {
  color: #a2959b;
}

#skills i {
}

#css {
  color: blueviolet;
}

#html {
  color: red;
}

#js {
  color: yellow;
}

#git {
  color: black;
}

#skills-list .btn {
  margin: 10px 20px;
  background: rgb(238, 174, 202);
  background: radial-gradient(
    circle,
    rgba(238, 174, 202, 0.249) 4%,
    rgba(148, 205, 233, 0.235) 100%
  );
  border: none;
  cursor: default;
  font-weight: bold;
}

#projects {
  background: rgb(238, 174, 202);
  background: radial-gradient(
    circle,
    rgba(238, 174, 202, 1) 0%,
    rgba(148, 187, 233, 0.10688025210084029) 100%
  );
}

.project {
  background-color: rgb(255, 255, 255);
  padding: 20px;
}

.project img {
  width: 100%;
}

.project .card-body {
  background: rgb(238, 174, 202);
  background: radial-gradient(
    circle,
    rgba(238, 174, 202, 0.249) 4%,
    rgba(148, 205, 233, 0.235) 100%
  );
  border-radius: 15px;
  padding-top: 10px;
  height: 100%;
}

.project .card-body a {
  color: #555;
}

#contact {
  background: rgb(116, 41, 86);
  background: linear-gradient(
    90deg,
    rgba(116, 41, 86, 0.40379901960784315) 0%,
    rgba(118, 176, 145, 0.5494572829131652) 41%,
    rgba(177, 186, 98, 0.48503151260504207) 60%
  );
}

#contact .btn {
  background-color: #eeaeca;
}

footer {
  background-color: #f6eff1;
}

footer .nav-link {
  color: #000;
}

@media screen and (max-width: 767px) {
  #social-list {
    flex-direction: row;
  }

  #profile-picture {
    max-width: 300px;
  }

  .fa-4x {
    font-size: 3em;
  }
}

@media screen and (max-width: 576px) {
  .fa-4x {
    font-size: 2em;
  }
}