/*body*/
* {box-sizing: border-box;}

body { font-family: Arial, Helvetica, sans-serif; padding: 0px; margin: 0px auto;}

@media (max-width: 768px) {body {flex-direction: column; align-items: stretch;}
}

/*HEADER*/
header {background: rgb(0, 128, 115); color: white; display: flex;}


/*CONTAINER*/
.container {width: 100%; padding: 0px; margin: 0px;}
.container1 {width: 100%; display: flex; justify-content: center; margin: 0px auto; padding: none;}
.container2 {width: 100%; display: flex; justify-content: center; align-items: center; margin: 0px auto; flex-direction: column;}
.container-form {width: 40%; justify-content: center; padding: none; margin: 0px auto; }
@media (max-width: 768px) {
    .container {width: auto;}
    .container-tengah1 {width: 95%; flex-direction: column; align-items: stretch;}
    .container-tengah2 {width: 95%;}
    .container-form {width: 95%;}
}


/*BACKGROUND*/
.bg-biru {width: 100%; background: #05005f; padding: 25px; border-radius: 12px;}
.bg-abu {width: 100%; background: #bbbbbb; padding: 25px; border-radius: 12px;}


/*GRID*/
.grid-4 {column-count: 4; column-gap: 5px; width:100%; margin:auto;}
.grid-5 {column-count: 5; column-gap: 5px; width:100%; margin:auto;}
.grid-6 {column-count: 6; column-gap: 5px; width:100%; margin:auto;}
        @media (max-width: 768px) {
            .grid-4 {column-count: 2; column-gap: 2px; width:100%; margin:auto;}
            .grid-5 {column-count: 3; column-gap: 2px; width:100%; margin:auto;}
            .grid-6 {column-count: 2; column-gap: 2px; width:100%; margin:auto;}
            }



/*BUTTON*/
.btn-biru {display: inline-block; background: #05005f; border-radius: 10px; font-size: 12px; color: #ffffff !important; text-align: center; padding: 10px 20px; 
            margin: 5px; text-decoration: none;}
    .btn-biru:hover {background: #322bff;}

.btn-hijau {display: inline-block; background: #00510e; border-radius: 10px; font-size: 12px; color: #ffffff !important; text-align: center; padding: 10px 20px; 
            margin: 5px; text-decoration: none;}
    .btn-hijau:hover {background: #47bb1d;}

.btn-merah {display: inline-block; background: #a50000; border-radius: 10px; font-size: 12px; color: #ffffff !important; text-align: center; padding: 10px 20px; 
            margin: 5px; text-decoration: none;}
    .btn-merah:hover {background: #ff6464;}


/*HURUF*/
h1 {font-size: 50px; color: rgb(0, 15, 127); margin: 0;}
h2 {font-size: 35px;}
h3 {font-size: 25px;}
h4 {font-size: 16px;}
h5 {font-size: 12px; color: aliceblue; justify-content: center; text-align: center; align-items: center;}
    @media (max-width: 768px) {
        h1 {font-size: 50px;}
        h2 {font-size: 35px;}
        h3 {font-size: 25px;}
        h4 {font-size: 16px;}
        h5 {font-size: 12px;}
        }


/*IMAGE*/
img {width: 100%;}
.img-1 {width: 100%; height: 100%; }
.img-2 {width: 100%; height: 100%; }
        .img-2:hover {transform: scale(1.2);}
    @media (max-width: 768px) {
    }