body {
background-image: url(../assets/bg.png);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

.kotak {
  width: 290px;
  height: 125px;
  text-align: center;
  border: 3px solid black;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  margin-bottom: 25px;
  
opacity: 0;
   transform: translateY(40px);
  
  /*Animasi*/
  animation: slideUp 1s ease-out forwards;
 
  
}
@keyframes slideUp {
  to {
   opacity: 1;
   transform: translateY(0);
  }
}
.kotak p {
  margin: 15px 15px;
  font-size: 12px;

}

.kotak2 {
width: 290px;
  height: 460px;
  margin: 0 auto;
  text-align: center;
  border: 3px solid black;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  margin-bottom: 20px;
  
opacity: 0;
   transform: translateY(40px);
  
  /*Animasi*/
  animation: slideUp 1s ease-out forwards;
 
}

.kotak2 p {
  margin: 15px 15px;
  font-size: 12px;

}

.konten {
  max-height: 3000px;
  margin: 0 auto;
  padding: 25px 5px;
  background-color: rgba(0, 0, 0, 0.5);
}