html {
  scroll-behavior: smooth;
}

body {
  background-color: #181818 !important;
  font-family: "Poppins", sans-serif !important;
  color: #f5f5f7 !important;
}

#web-title {
  font-weight: 700;
  font-size: 24px;
}

#menu {
  font-weight: 400 !important;
  font-size: 18px;
  color: #f5f5f7;
}

#menu:hover {
  color: #0acf83;
}

.container span {
  color: #0acf83;
}

.vector {
  width: 72%;
}

.header {
  margin-top: 64px;
}

#header-text {
  font-size: 24px;
  margin-top: 64px;
}

#header-text h4 {
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: 1px;
}

#header-text p {
  font-weight: 300;
  margin-bottom: 32px;
  letter-spacing: 1px;
}

#btn-email-me {
  border-color: #0acf83 !important;
  border-radius: 10px;
}

#btn-email-me:hover {
  background-color: #0acf83;
  color: #f5f5f7;
  border-radius: 10px;
}

.social-media a {
  color: #f5f5f7;
}

.social-media a:hover {
  color: #41c4ff;
}

.download-cv a {
  color: #f5f5f7;
  font-weight: 300px;
  font-size: 14px;
}

.download-cv a:hover {
  color: #41c4ff;
  text-decoration: none;
}

.vector {
  position: absolute;
  right: 16px;
  width: 65%;
}

#card-skill {
  background-color: #343447 !important;
  padding: 24px 64px 24px 64px;
  border-radius: 10px;
}

#skill-badge img {
  height: 64px;
  width: 64px;
}

#card-illustration {
  background-color: transparent;
}

.project-desc {
  text-align: center;
}

#card-project {
  background-color: transparent;
}

.design-preview {
  border-radius: 10px;
  margin: 7px auto;
}

#card-certificates {
  background-color: #3a3b53;
  border-radius: 10px;
}

#certificate-image {
  width: 95%;
}

.level {
  color: #41c4ff;
  font-weight: 700;
}

.company {
  font-weight: 300;
  font-size: 20px;
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
  .navbar-toggler:focus,
  .navbar-toggler:active,
  .navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
  }

  .certificate .carousel-inner {
    height: 500px;
  }

  .carousel-item h3,
  .carousel-item p {
    text-align: center;
  }

  #certificate-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .carousel-inner {
    padding: 20px;
  }

  #header-text h4,
  #header-text p {
    text-align: center;
  }

  footer {
    margin-top: 100px;
  }
}

/* Desktop version */
@media (min-width: 1280px) {
  .nav-link:hover::after {
    content: "";
    border-bottom: 2px solid #0acf83;
    display: block;
    margin: auto;
    width: 50%;
    padding-bottom: 5px;
    margin-bottom: -8px;
  }

  .certificate .carousel-inner {
    height: 430px !important;
  }

  .carousel-inner {
    padding: 24px;
  }

  .carousel-inner h3 {
    text-align: left;
  }

  footer {
    margin-top: 90px;
  }
}