@import
url('https://fonts.gogleapis.com/css2?family-poppins:wght@300;400;700&display=swap');

body {
  background: linear-gradient(#aeaeae, white);
  font-family: 'poppins', sanz-serif;
  height: 200vh;
}

 .navbar {
   text-align: center;
   background: white;
   position: fixed;
   width: 350px;
   height: 50px;
   border-top-left-radius: 100px;
   border-bottom-right-radius: 100px;
   box-shadow: 0px 0px 6px black;
   z-index: 1000;
   padding: 5px;
   top: 30px;
 }
 
 .navbar h2 {
   top: 10px;
 }
 
 .kosong {
   padding: 20px;
   height: 50px;
   margin: 20px;
   width: 40px;
 } 
 
 .container {
   text-align: center;
 }

/*about*/
.abaout {
  background: linear-gradient(45deg, white, black);
  color: white;
  width: 200px;
  padding: 50px; 
  height: 260px;
  margin-top: 100px;
  margin: 23px;
  border-radius: 20px;
  box-shadow: 0px 3px 15px black;
  padding-top: 20px;
  text-align: center;
  font-size: 14px;
  overflow: hidden;
  border: 1px solid black;
  animation: warnaKotak 5s infinite linear;
}

@keyframes animasiKotak {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

#about {
  background: white;
  color: black;
  top: 300px;
  height: 30px;
  padding: 5px;
  left: 150px;
  border-radius: 20px;
  box-shadow: 0px 0px 15px black;
}
/* tentang */
.ini {
  background: black;
  text-align: center;
  color: white;
  width: 200px;
  padding: 50px;
  height: 200px;
  margin: 23px;
  border-radius: 20px;
  box-shadow: 0px 3px 25px white;
  position: absolute;
  left: 70px;
  top: 370px;
  padding-top: 20px;
} 

#lihat {
  background: black;
  color: white;
  position: absolute;
  left: 95px;
  top: 160px;
  border-radius: 10px;
  box-shadow: 1px 1px 15px white;
}


.wax {
  background: white;
  color: black;
  width: 200px;
  padding: 50px;
  height: 230px;
  text-align: center;
  margin: 20px;
  border-radius: 20px;
  box-shadow: 0px 0px 15px black;
  position: absolute;
  left: 5px;
  top: 570px;
  font-size: 15px;
  padding-top: 10px;
  overflow: hidden;
  border: 1px solid black;
}

#contact {
  background: white;
  color: black;
  border-radius: 20px;
  box-shadow: 0px 0px 15px black;
}

.project {
  background: black;
  color: white;
  width: 200px;
  padding: 50px;
  height: 20%;
  text-align: center;
  margin: 20px;
  border-radius: 20px;
  box-shadow: 0px 1px 15px white;
  position: absolute;
  left: 70px;
  top: 785px;
  font-size: 15px;
  padding-top: 10px;
  overflow: hidden;
  border: 1px solid white;
}

#project {
  background: black;
  color: white;
  border-radius: 8px;
}

/* Styling overlay loading */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    display: none; /* Awalnya disembunyikan */
}


.loader {
    position: relative;
    width: 80px;
    height: 80px;
}

/* Lingkaran animasi */
.circle {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 5px solid transparent;
    border-top-color: hsl(83, 82%, 53%);
    border-radius: 50%;
    clip-path: inset(0 50% 50% 0);
    animation: spin 1.5s linear infinite;
}

.circle.one {
    animation-delay: 0s;
}

.circle.two {
    animation-delay: 0.2s;
}

.circle.three {
    animation-delay: 0.4s;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}