body {
font-family: 'Roboto', sans-serif;
background: #707070;
color: #fff;
margin: 0;
padding: 0;
}
.container {
max-width: 480px;
margin: auto;
background: #282828;
padding: 20px;
border-radius: 10px;
}
header {
text-align: center;
padding: 10px 0;
background: #6d6d6d;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
header img {
height: 70px;
}
h1 {
text-align: center;
color: #ffd700;
font-size: 24px;
margin: 20px 0 30px 0;
}
.link-box {
background: #ccc;
color: #000;
margin-bottom: 15px;
padding: 15px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: #00000029 0px 1px 4px, #757575 0px 0px 0px 2px;
}
.link-box a {
color: #000000;
text-decoration: none;
word-break: break-all;
}
.link-box img {
height: 32px;
}
.support-section, .social-section {
margin-top: 30px;
}
.support-box {
background: #ccc;
color: #000;
margin-bottom: 15px;
padding: 15px;
border-radius: 10px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: #00000029 0px 1px 4px, #757575 0px 0px 0px 2px;
}
.support-box img {
height: 40px;
}
.social-icons {
text-align: center;
margin-top: 15px;
}
.social-icons img {
width: 32px;
margin: 0 8px;
}
footer {
text-align: center;
font-size: 12px;
color: #aaa;
margin-top: 30px;
}

      .kiri, .kanan {
flex: 1;
display: flex;
justify-content: center;  
align-items: center;      
      }

      .tengah {
flex: 5;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start; 
color: inherit;
text-decoration: none;
margin-left: 20px;
      }
      .support-text {
text-align: justify;
color: white;
display: none;
      }