.poppins{
  font-family: 'Poppins', sans-serif;
}

.sans{
font-family: 'Noto Sans', sans-serif;
}

.kuning{
color: #5ebbf1 !important;
}

.bg-kuning{
background-color: #5ebbf1 !important;
}

.bg-kuning:hover{
font-weight: bold !important;
}

.bg-outline-kuning{
border: 1px solid #5ebbf1 !important;
}

.bg-outline-kuning:hover{
 background-color: #5ebbf1 !important;
}

.garis-bawah{
  border-bottom: 3px solid #5ebbf1;
}

.garis-kiri{
  border-left: 5px solid #5ebbf1;
}

.link:hover{
background-color: #5ebbf1;
}

@keyframes blink {
0%, 100% {
    opacity: 1;
}

50% {
    opacity: .50;
}
}

.blink {
animation: blink 2s infinite;
}





/* membuat container atau wadah dari scrollbar dengan lebar 20px  */
::-webkit-scrollbar {
width: 20px;
margin: 0px;
}

/* membuat background dari scrollbar */
/* kasih warna transparan agar lebih estetik  */
::-webkit-scrollbar-track {
background-color: transparent;
padding: 0px;
width: auto;
}


/* membuat styling pada batang atau bar scrollbar  */
/* kita beri warna abu tua dengan lengkungan di sisi atas dan bawahnya  */
::-webkit-scrollbar-thumb {
background-color: #d6dee1;
border-radius: 20px;
border: 6px solid transparent;
background-clip: content-box;
margin: 0px;
}

/* warna akan berubah menjadi abu mudah saat kursor diarahkan  */
::-webkit-scrollbar-thumb:hover {
background-color: #5ebbf1;
}




/* Untuk HP */
@media screen and (max-width: 600px) 
{

  .padding{
    padding-left: 3%;
    padding-right: 3%;
  }
  
  .paddingg{
    padding-left: 3%;
    padding-right: 3%;
  }

  .kelas{
    padding-left: 0px;
    padding-right: 0px;
    margin-bottom: 6%;
  }

  .main{
    background-image: url('../img/main-bg-hp.svg');
    height: 620px;
    background-size: 100%;
    padding-top: 10%;
    margin-top: 10%;
    background-size: 100%;
    background-position: bottom;
    background-repeat: no-repeat;
  }

  .rekomendasi{
    background-color: #f2f2f2;
    width: 100%;
    height: 450px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 2%;
    padding-bottom: 2%;
  }

}


footer{
background-color: #f2f2f2;
}



/* Untuk Dekstop */
@media screen and (min-width: 600px) 
{

  .padding{
    padding-left: 5%;
    padding-right: 5%;
  }
  
  .paddingg{
    padding-left: 7%;
    padding-right: 7%;
  }
  
  .kelas{
    padding-left: 6%;
    padding-right: 6%;
    margin-bottom: 6%;
  }

  .main{
    background-image: url('../img/main-bg.svg');
    height: 700px;
    padding-top: 10%;
    background-size: 100%;
    background-position: bottom;
    background-repeat: no-repeat;
  }

  .rekomendasi{
    background-color: #f2f2f2;
    width: 100%;
    height: 480px;
    border-radius: 15px;
    padding: 2%;
  }
  
}