.tiga{text-align: center;text-decoration: dotted underline; color: #FF5656;margin-left: 100px; margin-right: 100px; background-color: #FEEE91;}
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;
}

.p1 {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    color: #FFA239;
    font-size: 20px;
    text-align: center;
}

.SDGx {
    width: 400px;
    transition: 0.3s ease;
    display: block;
    cursor: pointer;
}
.SDGx:hover {
    transform: scale(1.2);
}

.penjelasan {
    background: rgba(0, 0, 0, 0.6);
    justify-content: center;
    color: #FFA239;
    padding: 10px; padding-right: 50px;

}
h2{color: #FEEE91;}
ul{color: #FF5656;}

img.SDG{height: 200px; text-align: center; border-radius: 10px;transition: 0.3s ease;}
img.SDG:hover{transform: scale(1.3); transform:rotate(20deg);}
div.SDGnumbers{text-align: center;}
.p5{background-color: #5f9ea0;color: white;}
.p4{background-color: #ffffff;color: #5f9ea0;}
.p4:hover{background-color: #5f9ea0;color: white;}
.p5:hover{background-color: #ffffff;color: #5f9ea0;}