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

body{
    background:#050505;
    color:white;
    font-family:Arial, Helvetica, sans-serif;
}

.topbar{
    height:80px;
    border-bottom:2px solid #e10600;
    display:flex;
    align-items:center;
    padding:0 25px;
}

.topbar img{
    height:50px;
}

.hero{
    text-align:center;
    padding:60px 20px;
}

.hero h1{
    font-size:4rem;
    font-weight:900;
    margin-bottom:10px;
}

.hero p{
    color:#bdbdbd;
}

.drivers-grid{

    max-width:1600px;

    margin:auto;

    padding:20px;

    display:grid;

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

    gap:25px;
}

.driver-card{

    background:#101010;

    border-top:4px solid #e10600;

    border-radius:12px;

    overflow:hidden;

    transition:.3s;

    box-shadow:
    0 0 20px rgba(0,0,0,.5);
}

.driver-card:hover{

    transform:translateY(-8px);

    box-shadow:
    0 0 30px rgba(225,6,0,.25);
}

.driver-image{

    position:relative;
}

.driver-image img{

    width:100%;

    height:420px;

    object-fit:cover;

    display:block;
}

.driver-number{

    position:absolute;

    top:15px;

    right:15px;

    background:#e10600;

    color:white;

    font-size:1.2rem;

    font-weight:700;

    padding:8px 14px;

    border-radius:8px;
}

.driver-info{

    padding:20px;
}

.driver-info h2{

    font-size:1.5rem;

    margin-bottom:10px;
}

.team{

    color:#c7c7c7;

    margin-bottom:15px;
}

.category{

    display:inline-block;

    background:#e10600;

    padding:6px 12px;

    border-radius:20px;

    font-size:.85rem;
}

.loading{

    text-align:center;

    padding:50px;

    font-size:1.2rem;
}

@media(max-width:768px){

    .hero h1{
        font-size:2.5rem;
    }

    .driver-image img{
        height:340px;
    }

}