body{

margin:0;
font-family:Inter,sans-serif;
background:#1f2229;
color:white;
padding-top:90px;

}


/* HEADER */
header{

position:fixed;
top:0;
left:0;
right:0;

height:60px;

display:flex;
align-items:center;
justify-content:space-between;

padding:0 30px;

background:rgba(20,22,28,.35);
backdrop-filter:blur(10px);

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

z-index:1000;

}

.logo{

font-size:22px;
font-weight:600;

}


.search-container{

position:absolute;

top:10px;
left:50%;

transform:translateX(-50%);

width:460px;

z-index:1100;

}


#searchBox{

width:100%;

padding:12px 18px;

border-radius:30px;

border:none;

background:#3a3f47;

color:white;

font-size:14px;

box-shadow:0 5px 14px rgba(0,0,0,.35);

}



/* SHORTCUTS */

.shortcuts{

display:flex;
justify-content:center;

gap:28px;

margin-top:30px;

}

.shortcut{

text-align:center;
text-decoration:none;
color:white;

}

.shortcut img{

width:50px;
height:50px;

background:#2b2e36;

padding:10px;

border-radius:12px;

}

.shortcut span{

display:block;
margin-top:6px;

font-size:13px;

opacity:.9;

}



/* CONTENT */

.section{

max-width:1200px;
margin:auto;

margin-top:40px;

padding:0 20px;

}

.section h2{

margin-bottom:20px;

font-weight:500;

}



/* NEWS CARDS */

.card-grid{

display:grid;

/* Firefox card layout */
grid-template-columns:repeat(auto-fill, minmax(320px,1fr));

gap:16px;

max-width:1200px;

margin:auto;

}

.card{

background:#2b2e36;

border-radius:10px;

overflow:hidden;

display:flex;

flex-direction:column;

transition:transform .15s ease, box-shadow .15s ease;

}

.card:hover{

transform:translateY(-3px);

box-shadow:0 10px 22px rgba(0,0,0,.35);

}
.card img{

width:100%;

aspect-ratio:16/9;

object-fit:cover;

display:block;

}

.card-content{

padding:12px 14px;

display:flex;

flex-direction:column;

gap:6px;

}

.card-content h3{

font-size:14px;

font-weight:500;

line-height:1.3;

margin:0;

color:#e8eaed;

}

.section{

max-width:1250px;

margin:auto;

padding:0 20px;

margin-top:35px;

}