body {
      background-color: #f8f9fa;
      font-family: WDXL Lubrifont TC, sans-serif;
  

    }
    html, body {
  max-width: 100%;
  overflow-x: hidden;  
}
 .navlinks{
  font-size: 1.1rem;

 }
 .navbar {
  max-width: 100vw;   
  overflow-x: hidden;
}
 .name{
  font-size: 1.5rem;

 }
 .name:hover{
    color:#0dcaf0 !important;
  text-decoration: underline;
 }
 .navlinks li a:hover{
  color:#0dcaf0 !important;
  
}
    .hero {
      padding: 5rem 0;
      text-align: center;
      background-image: linear-gradient(36deg,rgb(0, 0, 0) 0%, rgb(5, 32, 60) 37%, rgb(0, 0, 0) );
      background-repeat: no-repeat;
      background-size: cover;
      height: 70vh;
      color: white;
    }

    
    .social-icons a {
      color: white;
      font-size: 1.5rem;
      margin: 0 10px;
    }
   .myport {
  background:linear-gradient(36deg,rgb(0, 0, 0) 0%, rgb(5, 32, 60) 37%, rgb(0, 0, 0) )
  }
  img{
    box-shadow: 8px 9px 20px black;
  }
  #services{
height: 313px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 1.2rem;

  }

i[class^="devicon-"] {
  transition: transform 0.3s ease;
  display: inline-block;
}

i[class^="devicon-"]:hover {
  transform: scale(1.2);
  
}
.project {
  opacity: 0;
  transform: translateX(0);
  transition: all 0.8s ease-out;
  background: #eee;
  padding: 20px;
  margin: 50px 0;
  border-radius: 8px;
}
.project:hover{
  scale: 1.1;
}

.from-left {
  transform: translateX(-100px);
}

.from-right {
  transform: translateX(100px);
}

.project.show {
  opacity: 1;
  transform: translateX(0);
}

.logo:hover{
color: aqua;
scale: 1.1;
transition: 0.3s all;
}
h5{
font-size: 1.8rem;
}
p{
  font-size: 1.2rem;
}