*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

background:url("cos.jpg");
background-size:cover;
background-position:center;
background-attachment:fixed;

font-family:"Space Grotesk",sans-serif;

color:white;

}

.container{

width:90%;

max-width:1300px;

margin:auto;

padding:70px 0;

}

h1{

font-family:"Orbitron",sans-serif;

text-align:center;

font-size:52px;

letter-spacing:5px;

color:#7EEFFF;

margin-bottom:15px;

}

.subtitle{

text-align:center;

font-size:18px;

opacity:.8;

margin-bottom:60px;

}

.projects{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:35px;

}

.card{

background:rgba(10,20,40,.65);

backdrop-filter:blur(15px);

padding:30px;

border-radius:20px;

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

transition:.4s;

}

.card:hover{

transform:translateY(-10px);

box-shadow:0 0 25px rgba(126,239,255,.3);

}

.planet{

font-size:60px;

margin-bottom:20px;

}

.card h2{

color:#7EEFFF;

margin-bottom:10px;

}

.status{

display:inline-block;

padding:6px 14px;

border-radius:30px;

background:rgba(126,239,255,.15);

color:#7EEFFF;

margin-bottom:20px;

font-size:14px;

}

.card p{

line-height:1.7;

margin-bottom:20px;

}

.card a{

color:white;

text-decoration:none;

font-weight:bold;

}

.card a:hover{

color:#7EEFFF;

}

.back{

display:block;

width:220px;

margin:60px auto;

text-align:center;

padding:15px;

border:1px solid #7EEFFF;

border-radius:40px;

text-decoration:none;

color:white;

transition:.3s;

}

.back:hover{

background:#7EEFFF;

color:#04111f;

}

    html {
        cursor: url(mec8-cursor.png), auto !important;
      }