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;
}

.isi{background-image: linear-gradient(#c4ddde,rgb(66, 204, 211));padding: 5px;}

p{text-align: justify; padding-left: 20px ;padding-right: 30px; background-color: #5f9ea0; border-radius: 10px; color: #FEEE91;}
img.SMART{height: 200px;display: block; margin: auto;border-radius: 25px 25px 25px 25px; transition: 0.3s ease;}
img.SMART:hover{transform: scale(1.3);border: 4px solid #FEEE91;}

h1{color: #FF5656; background-color: #ffc5c5;max-width: 400px;text-align: center; border-radius: 10px;}

img.map{height: 200px;display: block; margin: auto;border-radius: 25px 25px 25px 25px; transition: 0.3s ease;}
img.map:hover{transform: scale(1.5);border-radius: 10px;border: 5px solid #FF5656;}