html{font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

body {margin: 0; padding: 0; background-color: #8CE4FF;}

img.header { 
    width : 100%; display: block;}

* {
    box-sizing: border-box;
}

.topnav {
    background: #8CE4FF;
    width: 100%;
    overflow: visible;
    padding: 0;
}


.topnav a,
.dropbtn {
    float: left;
    padding: 14px 20px;
    background: #8CE4FF;
    color: #5f9ea0;
    font-size: 17px;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.topnav a:hover,
.dropdown:hover .dropbtn {
    background: #FEEE91;
    color: #FF5656;
}

.dropdown {
    float: left;
    position: relative;
}

.dropdown-content {
    display: none;
    position: absolute;
    background: #8CE4FF;
    min-width: 220px;
}

.dropdown-content a {
    display: block;
    padding: 12px 16px;
    background: #8CE4FF;
    color: #5f9ea0;
}

.dropdown-content a:hover {
    background: #FEEE91;
    color: #FF5656;
}

.dropdown:hover .dropdown-content {
    display: block;
}

div.ama{background-image: linear-gradient(#fff2d8,rgb(249, 160, 26));padding: 5px;}
p.judul{max-width: 1000px;font-size: larger;text-transform: uppercase ;}
p{text-align: justify; padding-left: 20px ;padding-right: 30px; background-color: #5f9ea0; border-radius: 10px; color: #FEEE91; border : 3px solid #dff4ff }
b{color: #539ed4;text-decoration: underline;}

.umkm{height: 233px; border-radius: 8px;transition: 0.2s ease;}
img.umkm:hover{transform: scale(1.3);}

img.SDG{height: 200px; margin: auto;display: block; border-radius: 10px; transition: 0.2s ease;}
img.SDG:hover{transform: rotate(10deg);}
.satu{padding:5px; color: #347cf1; background-color: #e0f1fd;max-width: 1200px;text-align: justify; border-radius: 10px;}
.dua{padding:5px; color: #fcb61f; background-color: #fcf4d1;max-width: 1200px;text-align: justify; border-radius: 10px;}
.dua:hover{padding:5px; color:#347cf1; background-color: #e0f1fd;max-width: 1200px;text-align: justify; border-radius: 10px;}
.satu:hover{padding:5px; color: #fcb61f; background-color: #fcf4d1;max-width: 1200px;text-align: justify; border-radius: 10px;}

div.collumn{float: left;
width: 50%;
padding: 15px;}
h4{color: #fcb61f;text-transform: uppercase;}
.divone{height: 110px;}

.tiga{padding:5px; color: #ffffff; background-color: #f3db73;max-width: 1200px;text-align: justify; border-radius: 10px;}
.tiga:hover{padding:5px; color:#2c6dd6; background-color: #e0f1fd;max-width: 1200px;text-align: justify; border-radius: 10px;}


div.pelitaDIV{text-align: center;background-image: linear-gradient(#46a1d1,rgb(194, 220, 244));padding: 5px;}
.PELITA{text-align: center; font-size: 30px;text-transform: uppercase; margin: auto; color: #fcb61f; background-color: #fcf4d1; border-radius: 10px; padding: 10px;}
.pelitapenjelasan{text-align: center; font-size: 15px;text-transform: uppercase; margin: auto; color: #df5a07; background-color: #fcf4d1; border-radius: 10px; padding: 10px;}
u{color: #ffffff;}
.pelitaimg{height: 233px; border-radius: 8px;transition: 0.2s ease;}
.pelitaimg:hover{transform: scale(1.3);}

img.onelaptop{height: 250px; margin: auto;display: block; border-radius: 10px; transition: 0.2s ease; margin-top: 50px;border :7px dotted orange }
img.onelaptop:hover{transform: rotate(10deg);}
.onelaptop{padding: 30px;color: #5f9ea0; background-image: linear-gradient(#fffeeb,rgb(255, 208, 150)); margin: 20px}

.pancasila{
        background-image: url(pancasila.jpg); background-color: rgba(0,0,0,0.4);
        height: 250px; color: #ffffff;
    
    }
    .pancasil{width: 550px; margin: auto;}

    .Serviam{
        background-image: url(serviam.png); background-color: rgba(0,0,0,0.4);
        height: 250px; color: #ffffff; background-repeat: no-repeat; text-align: center;margin: auto;} 

    .serviamtext{margin: auto; max-width: 550px;padding: 5px;}