body {
  background: black;
}

.teks {
  position: absolute;
  left: 50px;
  top: -10px;
  color: white;
}

.garis-atas {
  background: #a9a9a9;
  width: 360px;
  position: absolute;
  height: 1px;
  top: 35px;
}
 
img {
  position: absolute;
  width: 85px;
  height: 85px;
  border-radius: 50px;
  margin-top: 100px;
  left: 151px;
  z-index: 1000;
}

.garis-profile {
  position: absolute;
  background: white;
  width: 89px;
  height: 89px;
  border-radius: 50px;
  top: 105px;
  left: 149px;
}

.navbar {
  position: absolute;
  left: 60px;
  top: 230px;
  text-decoration: none;
  font-weight: bold;
}

.nav-a {
  text-decoration: none;
  background: black;
  color: white;
  margin-right: 20px;
  cursor: pointer;
}

.nav-a:active {
  text-decoration: underline;
}

.content {
  position: absolute;
  background: black;
  color: white;
  width: 250px;
  left: 40px;
  /* height: 100px;
  width: 250px */
  top: 300px;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0px 0px 3px white;
}

/* .about-teks {
  position: absolute;
  background: black;
  color: white;
  left: 50px;
  top: 230px;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0px 0px 3px white;
} */

.home {
  background-color: white;
  position: absolute;
  width: 10px;
  height: 2px;
  top: 220px;
  animation: home 13s ease infinite;
}

@keyframes home {
  0% {
    transform: translateX(0);
  }
  
  18% {
    width: 61px;
    
  }
  
  30% {
    width: 61px;
    transform: translateX(43px);
  }
  
   100% {
      width: 61px;
      transform: translateX(43px);
  }
}

.homes {
  background-color: white;
  position: absolute;
  width: 3px;
  height: 2px;
  top: 220px;
  left: 112px;
  right: 0;
  animation: homes 13s ease infinite;
}

@keyframes homes {
  0% {
    height: 0;
  }
  
  20% {
    height: 0;
  }
  
  38% {
    height: 35px;
    
  }
  
  40% {
    height: 35px;
  }
  
   100% {
      height: 35px;
  }
}

.homeng {
  background-color: white;
  position: absolute;
  width: 3px;
  height: 2px;
  top: 253px;
  left: 151px;
  animation: homeng 13s ease infinite;
}

@keyframes homeng {
  0% {
    width: 0;
  }
  
  30% {
    width: 0;
  }
  
  48% {
   width: 61px;
   transform: translateX(-100px)
    
  }
  
  50% {
     width: 61px;
   transform: translateX(-100px)
  }
  
   100% {
       width: 61px;
   transform: translateX(-100px)
  }
}

.hemes {
  background-color: white;
  position: absolute;
  width: 3px;
  height: 2px;
  top: 220px;
  left: 50px;
  right: 0;
  animation: hemes 13s ease infinite;
}

@keyframes hemes {
  0% {
    height: 0;
  }
  
  20% {
    height: 0;
  }
  
  38% {
    height: 35px;
    
  }
  
  40% {
    height: 35px;
  }
  
   100% {
      height: 35px;
  }
}

.about {
  background-color: white;
  position: absolute;
  width: 10px;
  height: 2px;
  top: 220px;
  left: 120px;
  animation: about 13s ease infinite;
}

@keyframes about  {
  0% {
    width: 0;
  }
  
  18% {
    width: 83px;
  }
  
  25% {
    width: 83px;
  }
  
  100% {
    width: 83px;
  }
}

.ebetes {
  background-color: white;
  position: absolute;
  width: 3px;
  height: 2px;
  top: 220px;
  left: 203px;
  right: 0;
  animation: ebetes 13s ease infinite;
}

@keyframes ebetes {
  0% {
    height: 0;
  }
  
  20% {
    height: 0;
  }
  
  38% {
    height: 35px;
    
  }
  
  40% {
    height: 35px;
  }
  
   100% {
      height: 35px;
  }
}

.aboutemeng {
  background-color: white;
  position: absolute;
  width: 3px;
  height: 2px;
  top: 220px;
  left: 120px;
  right: 0;
  animation: aboutemeng 13s ease infinite;
}

@keyframes aboutemeng {
  0% {
    height: 0;
  }
  
  20% {
    height: 0;
  }
  
  38% {
    height: 35px;
    
  }
  
  40% {
    height: 35px;
  }
  
   100% {
      height: 35px;
  }
}

.aboutes {
  background-color: white;
  position: absolute;
  width: 3px;
  height: 2px;
  top: 253px;
  left: 223px;
  animation: aboutes 13s ease infinite;
}

@keyframes aboutes {
  0% {
    width: 0;
  }
  
  30% {
    width: 0;
  }
  
  48% {
   width: 81px;
   transform: translateX(-100px)
    
  }
  
  50% {
     width: 81px;
   transform: translateX(-100px)
  }
  
   100% {
       width: 81px;
   transform: translateX(-100px)
  }
}

.hayhayo-kontol {
  height: 100px;
  margin-top: 100px;
  position: absolute;
  background: black;
}

footer {
  color: white;
  background: black;
  margin-top: 1000px;
  text-align: center;
  position: absolute;
  padding: 22px;
}