@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Rajdhani:wght@400;500;600;700&display=swap");

/* ==========================================================
   TrackDayCTRL
   Global Styles
   Responsive Foundation
   ========================================================== */

:root {

    /* ------------------------------------------------------
       Colors
       ------------------------------------------------------ */

    --bg: #0b0f14;
    --bg2: #121821;
    --page-bg: #050505;

    --text: #ffffff;
    --muted: #b5bcc7;

    --green: #739834;
    --green-dark: #5f7f2b;

    --yellow: #ffd43b;
    --red: #ff3b30;

    --border: #2d3644;

    /* ------------------------------------------------------
       Shape and motion
       ------------------------------------------------------ */

    --radius-sm: 0.625rem;
    --radius-md: 1rem;
    --radius-lg: 1.125rem;

    --radius: var(--radius-lg);

    --transition-fast: 0.15s ease;
    --transition: 0.25s ease;

    /* ------------------------------------------------------
       Responsive page width

       The container is fluid until it reaches its maximum
       comfortable content width.

       It is not tied to the width of the original mockup.
       ------------------------------------------------------ */

    --container-max: 100rem;

    --page-gutter:
        clamp(
            1rem,
            3vw,
            3rem
        );

    /* ------------------------------------------------------
       Responsive spacing scale
       ------------------------------------------------------ */

    --space-1: clamp(0.25rem, 0.2vw + 0.2rem, 0.5rem);
    --space-2: clamp(0.5rem, 0.35vw + 0.4rem, 0.75rem);
    --space-3: clamp(0.75rem, 0.5vw + 0.6rem, 1rem);
    --space-4: clamp(1rem, 0.8vw + 0.75rem, 1.5rem);
    --space-5: clamp(1.5rem, 1.2vw + 1rem, 2.25rem);
    --space-6: clamp(2rem, 2vw + 1rem, 3.5rem);
    --space-7: clamp(3rem, 3.5vw + 1rem, 5.5rem);
    --space-8: clamp(4rem, 5vw + 1rem, 8rem);

    /* ------------------------------------------------------
       Section spacing
       ------------------------------------------------------ */

    --section-padding-sm:
        clamp(
            2.5rem,
            5vw,
            5rem
        );

    --section-padding:
        clamp(
            3.5rem,
            7vw,
            7.5rem
        );

    --section-padding-lg:
        clamp(
            4.5rem,
            9vw,
            10rem
        );

    /* ------------------------------------------------------
       Text widths

       Used to prevent paragraphs from becoming difficult
       to read on large screens.
       ------------------------------------------------------ */

    --text-width-sm: 34rem;
    --text-width-md: 44rem;
    --text-width-lg: 56rem;
}


/* ==========================================================
   Reset
   ========================================================== */

*,
*::before,
*::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}


html {

    scroll-behavior: smooth;

    -webkit-text-size-adjust: 100%;

    text-size-adjust: 100%;

}


body {

    min-height: 100vh;

    overflow-x: hidden;

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

    color: var(--text);

    background: var(--page-bg);

    line-height: 1.5;

    text-rendering: optimizeLegibility;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}


/* ==========================================================
   Global Elements
   ========================================================== */

a {

    color: inherit;

    text-decoration: none;

}


img,
picture,
svg,
video,
canvas {

    display: block;

    max-width: 100%;

}


img {

    height: auto;

}


button,
input,
textarea,
select {

    font: inherit;

}


button {

    color: inherit;

    cursor: pointer;

}


ul,
ol {

    list-style: none;

}


h1,
h2,
h3,
h4,
h5,
h6 {

    line-height: 1.05;

    text-wrap: balance;

}


p {

    text-wrap: pretty;

}


/* ==========================================================
   Responsive Layout
   ========================================================== */

.container {

    width: min(
        calc(100% - (var(--page-gutter) * 2)),
        var(--container-max)
    );

    margin-inline: auto;

}


.container-narrow {

    width: min(
        calc(100% - (var(--page-gutter) * 2)),
        var(--text-width-lg)
    );

    margin-inline: auto;

}


section {

    position: relative;

    width: 100%;

}


.section-spacing {

    padding-block: var(--section-padding);

}


.section-spacing-sm {

    padding-block: var(--section-padding-sm);

}


.section-spacing-lg {

    padding-block: var(--section-padding-lg);

}


/* ==========================================================
   Responsive Grid Utilities
   ========================================================== */

.grid {

    display: grid;

    gap: var(--space-5);

}


.grid-auto {

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                min(100%, 18rem),
                1fr
            )
        );

}


.flex {

    display: flex;

}


.flex-wrap {

    flex-wrap: wrap;

}


.items-center {

    align-items: center;

}


.justify-between {

    justify-content: space-between;

}


/* ==========================================================
   Text Utilities
   ========================================================== */

.text-green {

    color: var(--green);

}


.text-muted {

    color: var(--muted);

}


.text-center {

    text-align: center;

}


.text-width-sm {

    max-width: var(--text-width-sm);

}


.text-width-md {

    max-width: var(--text-width-md);

}


.text-width-lg {

    max-width: var(--text-width-lg);

}


/* ==========================================================
   Accessibility
   ========================================================== */

:focus-visible {

    outline: 0.1875rem solid var(--green);

    outline-offset: 0.25rem;

}


.visually-hidden {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;

}


/* ==========================================================
   Utility
   ========================================================== */

.hidden {

    display: none !important;

}


/* ==========================================================
   Reduced Motion
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior: auto;

    }


    *,
    *::before,
    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;

    }

}