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

body {
  background-color: #eef7ff;
}

nav {
  background-color: #cde8e5;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(238, 247, 255, 0.19);
}

.image img {
  width: 270px;
}

.images {
  margin: auto 0;
  width: 280px;
  height: 300px;
  background-color: #7ab2b2;
  border-radius: 50%;
  overflow: hidden;
}

.sosmed,
.sosial-media {
  display: flex;
  margin-top: 2rem;
  gap: 3.5rem;
}

.sosmed div,
.sosial-media div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 2px 3px 5px 0px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.sosmed div img,
.sosial-media div img,
.certificate .more-info img,
footer div img {
  width: 25px;
}

.about .row {
  gap: 1.5rem;
}

.card {
  background-color: #f8f4ea;
}

.skill div img {
  width: 5.5rem;
  margin: 10px;
}

.certificate img {
  width: 350px;
}

.footer {
  background-color: #cde8e5;
}

@media screen and (max-width: 576px) {
  #home .container {
    padding-top: 2.5rem;
  }

  .info {
    display: flex;
    flex-wrap: wrap-reverse;
  }

  .sosmed {
    display: flex;
    margin-top: 0;
    gap: 1rem;
  }

  .sosial-media {
    gap: 1rem;
  }

  .navbar .container-fluid {
    padding: 0;
  }

  .about .row {
    display: flex;
    flex-direction: column;
  }

  .skill div img {
    width: 3.5rem;
  }

  .project .row {
    display: flex;
    flex-direction: column;
  }

  .certificate img {
    width: 300px;
  }
}