*{

margin:0;

padding:0;

box-sizing:border-box;

font-family:Poppins,sans-serif;

}

body{

background:linear-gradient(
135deg,
#0f1d3e,
#000000
);

color:white;

}

header{

display:flex;

justify-content:space-between;

padding:25px 70px;

background:#111827;

}

nav{

display:flex;

gap:30px;

}

nav a{

color:white;

text-decoration:none;

}

.hero{

display:flex;

justify-content:space-between;

align-items:center;

padding:80px;

}

.kiri{

width:50%;

}

.kiri h1{

font-size:55px;

}

.kiri span{

color:#3B82F6;

}

.kiri p{

margin:20px 0;

color:#CBD5E1;

}

.btn{

display:flex;

gap:15px;

}

button{

padding:12px 25px;

border:none;

border-radius:10px;

background:#3B82F6;

color:white;

cursor:pointer;

}

.kanan img{

width:350px;

}

.skill{

padding:80px;

}

.card-area{

display:flex;

gap:20px;

margin-top:25px;

}

.card{

background:#1E293B;

padding:25px;

border-radius:15px;

width:140px;

text-align:center;

}

.card:hover{

background:#2563EB;

}

@media(max-width:900px){

.hero{

flex-direction:column;

text-align:center;

}

.kiri{

width:100%;

}

.card-area{

flex-wrap:wrap;

justify-content:center;

}

}