*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:Arial, Helvetica, sans-serif;
background:#050505;
color:white;
text-align:center;
overflow-x:hidden;
}

/* background tulisan X RPL */

.bg-text{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:20vw;
font-weight:bold;
color:transparent;
-webkit-text-stroke:2px rgba(255,165,0,0.2);
z-index:-1;
animation:gerak 10s infinite alternate ease-in-out;
}

@keyframes gerak{
0%{
transform:translate(-50%,-50%) scale(1);
opacity:0.2;
}

100%{
transform:translate(-50%,-60%) scale(1.1);
opacity:0.4;
}
}

/* header */

header{
padding:40px 20px;
}

header h1{
font-size:40px;
color:orange;
text-shadow:0 0 15px orange;
}

header h2{
color:limegreen;
margin-top:10px;
}

header p{
color:#ddd;
margin-top:5px;
}

/* container */

.container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
padding:30px;
max-width:1200px;
margin:auto;
}

/* card */

.card{
background:#111;
padding:25px;
border-radius:15px;
box-shadow:
0 0 10px orange,
0 0 20px green;
transition:0.4s;
}

.card:hover{
transform:translateY(-8px) scale(1.02);

box-shadow:
0 0 20px orange,
0 0 30px yellow,
0 0 40px green;
}

.card h3{
color:yellow;
margin-bottom:10px;
}

ul{
list-style:none;
margin-bottom:10px;
}

ul li{
padding:4px;
color:#ccc;
}

/* tombol */

.card a{
display:inline-block;
padding:10px 20px;
background:orange;
color:black;
text-decoration:none;
border-radius:8px;
font-weight:bold;
transition:0.3s;
}

.card a:hover{
background:limegreen;
color:white;
}
.title-box{
display:flex;
align-items:center;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.logo{
width:80px;
height:auto;
filter:drop-shadow(0 0 10px orange);
}

.title-text h1{
font-size:40px;
color:orange;
text-shadow:0 0 15px orange;
}

.title-text h2{
color:limegreen;
margin-top:5px;
}

.title-text p{
color:#ddd;
margin-top:5px;
}

/* footer */

footer{
padding:30px;
color:#aaa;
}

/* responsive */

@media(max-width:768px){

header h1{
font-size:30px;
}

.bg-text{
font-size:30vw;
}

}