html,body{height:100%;margin:0;padding:0;overflow-y:auto}
header{font-family:'Poppins',sans-serif}
body{font-family:'Roboto',sans-serif;text-align:center;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:100vh;background-image:url('/images/liem1.png'),url('/images/liem2.png'),url('/images/liem3.png'),url('/images/liem4.png'),url('/images/liem5.png'),url('/images/liem6.png');background-size:cover,cover,cover,cover,cover,cover;background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;background-position:center,center,center,center,center,center;color:#fff;transition:background .5s ease-in-out;position:relative}
.logo{position:absolute;top:10px;left:10px;width:64px;height:auto;border-radius:50%;box-shadow:0 0 10px rgba(0,0,0,0.2);transition:transform .3s,box-shadow .3s}
.logo:hover{transform:scale(1.1);box-shadow:0 0 15px rgba(0,0,0,0.3)}
h1{color:#fff;font-size:4rem;margin:10px 0 0;text-shadow:2px 2px 4px rgba(0,0,0,0.6);transition:color .3s}
h1:hover{color:#FFD700}
h3{margin:10px 20px;font-size:1.2rem;line-height:1.5}
p{margin:5px 20px;font-size:1rem}
ul{list-style:none;padding:0;margin:20px 0;display:flex;justify-content:center;background:rgba(255,255,255,0.2);border-radius:10px;padding:10px;backdrop-filter:blur(5px);transition:background .3s}
ul:hover{background:rgba(255,255,255,0.3)}
li{margin:15px;display:inline-block;transition:transform .3s}
li:hover{transform:scale(1.1)}
a{text-decoration:none;color:#6C63FF;font-weight:bold;transition:color .3s,transform .2s}
a:hover{color:#FFD700;transform:scale(1.1)}
.content1{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px;margin-top:20px;width:80%;max-width:1200px;justify-items:center;padding-bottom:20px}
.content{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:20px;width:80%;max-width:1200px;justify-items:center;padding-bottom:20px}
.box,.box1{background:rgba(0,0,0,0.2);padding:20px;border-radius:10px;backdrop-filter:blur(5px);text-align:center;transition:transform .3s,background .3s;box-shadow:0 0 10px rgba(0,0,0,0.4);break-inside:avoid}
.box,.box1:hover{transform:scale(1.05);background:rgba(0,0,0,0.3);transform:scale(1.05);box-shadow:0 0 20px rgba(255,255,255,0.6)}
.box h2,.box1 h2{font-size:1.8rem;color:#fff;margin-bottom:10px}
.box p,.box1 p,.box ul,.box1 ul{font-size:1rem;color:#fff;margin:10px 0;text-shadow:1px 1px 2px rgba(0,0,0,0.6);padding-left:20px;text-align:left}
.box ul,.box1 ul{padding-left:20px;text-align:left}
.box1 ul,.box ul{padding-left:10;padding-right:10;text-align:center}
.box1 li,.box li{display:inline-block;margin:5px 10px;background:rgba(255,255,255,0.2);padding:10px;border-radius:5px;transition:background .3s,transform .3s}
.box1 li:hover,.box li:hover{background:rgba(255,255,255,0.3);transform:scale(1.1)}
.facebook-link{position:fixed;bottom:20px;right:20px;text-align:right;z-index:100}
.facebook-link p{margin:0;padding-right:10px;color:#ff2727}
.facebook-link a{color:#2f44ff;font-weight:bold;text-decoration:none;transition:color .3s;background:rgba(223,223,223,0.2);padding:10px;border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,0.4);backdrop-filter:blur(5px)}
.facebook-link a:hover{color:#6c64ff;background:rgba(255,255,255,0.3)}
footer{footer{footer{background:rgba(0,0,0,0.8);color:#fff;text-align:center;border-top-left-radius:5px;border-top-right-radius:5px;padding:10px 2px;width:100%;position:relative;bottom:0}
om:0}
footer a{color:#FFD700;text-decoration:none;font-weight:bold;transition:color .3s}
footer a:hover{color:#6C63FF}
}
@media(max-width:768px){h1{font-size:2.5rem}
.content{flex-direction:column;align-items:center}
.content1{flex-direction:column;align-items:center}
.box{width:80%;margin:10px 0}
.logo{width:48px}
.facebook-link{position:relative;margin-top:20px;margin-right:0;text-align:center;bottom:auto;right:auto}
}