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


body{

background:#050505;

color:#eee;

font-family:
"Consolas",
monospace;

}



header{

display:flex;

justify-content:space-between;

padding:25px 8%;

border-bottom:1px solid #222;

}


.logo{

color:#00ffff;

font-size:22px;

text-shadow:
0 0 15px cyan;

}



nav a{

color:white;

margin:15px;

text-decoration:none;

}



.hero{

text-align:center;

padding:100px 20px;

}



.hero h1{

font-size:45px;

color:#00ffff;

text-shadow:
0 0 20px cyan;

}



.posts{

display:grid;

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

gap:30px;

padding:40px 8%;

}



.card{

background:#0b0b0b;

padding:30px;

border-radius:15px;

border:1px solid #222;

transition:.4s;

}



.card:hover{

transform:translateY(-10px);

border-color:#00ffff;

box-shadow:
0 0 25px #00ffff55;

}



.card h2{

margin-bottom:15px;

}



.card a{

display:block;

margin-top:20px;

color:#ff00ff;

}



.tag{

margin-top:20px;

color:#00ff88;

}



.article{

max-width:800px;

margin:80px auto;

padding:30px;

line-height:2;

}



.loader{

position:fixed;

inset:0;

background:#000;

display:flex;

align-items:center;

justify-content:center;

z-index:999;

animation:
hide 2s forwards;

}



.loading-text{

color:#00ffff;

}



@keyframes hide{

0%{
opacity:1;
}

80%{
opacity:1;
}

100%{

opacity:0;

display:none;

}

}



footer{

text-align:center;

padding:40px;

color:#777;

}



@media(max-width:600px){

header{

flex-direction:column;

gap:20px;

}


.hero h1{

font-size:30px;

}

}