*{

margin:0;
padding:0;
box-sizing:border-box;

}


body{

font-family:Arial,sans-serif;

background:#0066b3;

}



.container{

max-width:520px;

margin:auto;

background:white;

min-height:100vh;

padding:25px 15px;

text-align:center;

}



.logo{

width:100px;

height:100px;

object-fit:contain;

margin-bottom:10px;

}



h1{

color:#0066b3;

font-size:26px;

}



h3{

color:#0066b3;

}



p{

color:#555;

}



#clock{

display:inline-block;

background:#0066b3;

color:white;

font-size:30px;

font-weight:bold;

padding:12px 30px;

border-radius:20px;

margin:20px;

}




.menu a{

display:flex;

align-items:center;

gap:15px;

padding:15px;

margin:12px 0;

border-radius:18px;

text-decoration:none;

color:#333;

font-weight:bold;

text-align:left;

box-shadow:0 4px 12px rgba(0,0,0,.15);

}



.menu img{

width:45px;

height:45px;

background:white;

padding:5px;

border-radius:50%;

}



small{

display:block;

color:#00897b;

margin-top:5px;

}



/* WARNA MENU */


.absensi{
background:#dcedc8;
}

.laporan{
background:#bbdefb;
}

.makanan{
background:#ffe0b2;
}

.sipgn{
background:#e1bee7;
}

.mpm{
background:#b2dfdb;
}

.pop{
background:#fff59d;
}

.tauwas{
background:#ffcdd2;
}

.kopra{
background:#c5cae9;
}

.relawan{
background:#f8bbd0;
}

.sdmo{
background:#d7ccc8;
}

.bpjs{
background:#b3e5fc;
}



.qris{

margin-top:35px;

background:white;

padding:20px;

border-radius:20px;

box-shadow:0 5px 15px rgba(0,0,0,.15);

}



.qris img{

width:230px;

margin:15px;

}



.footer{

margin-top:30px;

color:#0066b3;

font-weight:bold;

}