* {
   padding: 0;
   margin: 0;
   font-family:'Quicksand',Sans-Serif;
    text-decoration: none;
    color: #333;
   
}
header {
    height: 80px;
    
}
header h1 a:hover{
    color: blue;
    transition: .3s;
}
header h1 {
     height: 46px;
     display: inline-block;
     float: left;
     padding: 16px 24px; 
     text-transform: uppercase;
}
header ul {
  float: right;
}
header ul li a:hover {
  transition: .3s;
  color: red;
}
header ul li {
     padding: 24px;
     display: inline-block;
}
.container {
  width: 98%;
  margin: 0 auto;
}
.container::after {
   content: '';
   display: block;
   clear: both;
}
.mobile-menu {
  float: right; 
  display: none;
  padding: 24px;
  

}
.mobile-menu:hover {
  cursor: pointer;

}
#check {
   display: none;
}
.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: -300px;
  width: 300px;
  background-color: rgba(24, 87, 197, .9);
  transition: .3s;
}

.sidebar ul li a {
  color: white;
  
}
.sidebar ul li {
  padding: 24px;
  
}
.sidebar ul li:hover {
     background-color:greenyellow;
     transition: .3s;
     transition-property: background-color;
    }
#check:checked ~ .sidebar {
  left: 0;
}
.banner {
  background-color: rgb(67, 74, 72);
 padding: 160px;
}
.banner img {
  width: 100px;
  border-radius: 20px;
  box-shadow: 0 3px 5px #ddd;
  margin-bottom: 10px;
}
.banner-left {
  padding-left: 14px;
}
.banner h2 {
  margin-bottom: 10px;
  color: white;
 
}
.banner b {
  font-size: 18px;
  color: white;
  
}
.banner span {
  color: white;
}
section {
  padding: 140px 0;
}

section h3 {
  text-align: center;
  margin: 30px;
  position: relative;
  
}

.garis {
  width: 40px;
  align-content: center;

}
section h3::before {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  width: 110px;
  height: 1px; 
  margin: 0px 0 0px 0;
  background-color: #ddd;
  left: calc(50% - 60px); 
}
section h3::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  width: 40px;
  height: 1px;
  margin: 0px 0 0px 0;  
  background-color: red;
  left: calc(50% - 20px);
}
#about p {
  text-align: justify;
  padding: 20px;
  text-indent: 30px;
  line-height: 25px;
  margin-bottom: 15px;

}


#skill, 
#contact {
    background-color: #f9f9f9;
    

 }
.bar {
  height: 20px;
  background-color: #ffff;
  border: 1px solid #ddd;
  margin: 10px 0 20px 0;
}
.bar .nilai {
  height: 20px;
  width: 5%;
  background-color: #f84744;
  display: inline-block;
  color: #ffff;
}

.col-4 {
  width: 25%;
  box-sizing: border-box;
  padding: 5px;
  float: left;
  text-align: center;

}
.col-4 img {
   width: 100%;
}
.col-4 a:hover img {

   transform: scaleX(1.2);
}
.col-3 {
  width: 33.33%;
  float: left;
  box-sizing: border-box;
  text-align: center;
  padding: 50px 10px;
}
.col-3 h4 {
  padding-bottom: 10px;
  margin-bottom: 15px;
  border-bottom: 1px solid #ddd;
}
footer{
  background-color: #333;
  padding: 50px;
  text-align: center;
}
footer small {
  color: white;
}
html {
  scroll-behavior: smooth;
}

  




@media (max-width: 768px) {
   .mobile-menu {
     display:  block;
     
   }
   header ul {
     display: none;
   }
   .col-4 {
    width: 50%;
   }
}