*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial;

}

body{

background:#000;
color:white;
padding:20px;

}

.container{

max-width:1200px;
margin:auto;

}

.title{

font-size:35px;
margin-bottom:30px;

}

.skills{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:20px;

}

.skillBox{

background:
rgba(255,255,255,.05);

border-radius:25px;

padding:20px;

border:
1px solid rgba(255,255,255,.1);

transition:.5s;

backdrop-filter:
blur(10px);

}

.skillBox:hover{

transform:
translateY(-10px);

box-shadow:
0 0 30px
rgba(255,255,255,.2);

}

.skillBox h2{

margin-bottom:10px;

}

.skillBox p{

font-size:13px;
opacity:.7;

margin-bottom:15px;

}

.progress{

height:12px;

background:#111;

border-radius:30px;

overflow:hidden;

margin-bottom:10px;

}

.bar{

height:100%;
width:0;

background:white;

border-radius:30px;

transition:2s;

}

.homeBtn{

position:fixed;

left:20px;
top:20px;

width:50px;
height:50px;

display:flex;

justify-content:center;
align-items:center;

border-radius:50%;

background:
rgba(255,255,255,.1);

backdrop-filter:
blur(10px);

border:
1px solid
rgba(255,255,255,.1);

color:white;

text-decoration:none;

font-size:24px;

z-index:999;

transition:.5s;

}


.homeBtn:hover{

transform:scale(1.1);

box-shadow:
0 0 20px
rgba(255,255,255,.3);

}




/* Mobile */

@media(max-width:768px){

.skills{

grid-template-columns:
repeat(2,1fr);

gap:10px;

}

.skillBox{

padding:12px;

}

.title{

font-size:28px;

}

}