/* =========================================================
   1. FORMULA 1 PAGE BACKGROUND
   ========================================================= */

/*
   Light mode:
   - faint technical grid
   - subtle blue glow in the top-right
   - subtle red glow in the bottom-left
*/
body {
    background:
        linear-gradient(rgba(0, 0, 0, 0.055) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.055) 1px,
            transparent 1px),
        radial-gradient(circle at 90% 10%,
            rgba(35, 75, 180, 0.18),
            transparent 35%),
        radial-gradient(circle at 10% 85%,
            rgba(210, 30, 45, 0.14),
            transparent 35%),
        var(--background);

    background-size:
        40px 40px,
        40px 40px,
        auto,
        auto,
        auto;

    background-attachment: fixed;
}

/* =========================================================
   2. FORMULA 1 HEADER
   ========================================================= */

/*
   Technical header using subtle Red Bull-inspired
   blue and red lighting.
*/
header {
    background:
        linear-gradient(90deg,
            rgba(20, 45, 110, 0.95),
            rgba(35, 35, 35, 0.95) 55%,
            rgba(125, 20, 30, 0.95));

    color: white;

    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

header a {
    color: white;
}

body.dark-mode header {
    background:
        linear-gradient(90deg,
            rgba(15, 35, 90, 0.96),
            rgba(20, 20, 20, 0.96) 55%,
            rgba(100, 15, 25, 0.96));
}


/*
   Dark mode:
   brighter grid and slightly stronger accent glows.
*/
body.dark-mode {
    background:
        linear-gradient(rgba(255, 255, 255, 0.055) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, 0.055) 1px,
            transparent 1px),
        radial-gradient(circle at 90% 10%,
            rgba(45, 90, 220, 0.22),
            transparent 35%),
        radial-gradient(circle at 10% 85%,
            rgba(220, 35, 50, 0.16),
            transparent 35%),
        var(--background);

    background-size:
        40px 40px,
        40px 40px,
        auto,
        auto,
        auto;

    background-attachment: fixed;
}


/* =========================================================
   2. TEAM / DRIVER LAYOUT
   ========================================================= */

/*
   Desktop layout:

   Text                 Image
*/
.f1-team-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 4rem;

    align-items: center;

    margin-top: 2rem;
}


/* =========================================================
   3. FORMULA 1 IMAGES
   ========================================================= */

/*
   Keeps the full image visible without cropping it.
*/
.f1-pics {
    display: block;

    width: 100%;
    max-width: 520px;

    height: auto;

    object-fit: contain;

    justify-self: end;
}


/* =========================================================
   4. MOBILE / RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {

    /*
       Text and image stack vertically on phones.
    */
    .f1-team-layout {
        grid-template-columns: 1fr;

        gap: 1.5rem;
    }


    /*
       Let the image use the full available width.
    */
    .f1-pics {
        justify-self: start;

        max-width: 100%;
    }
}