/* =========================================================
   CINAEEI - GLOBAL
========================================================= */

:root {
    --cinaeei-green: #079452;
    --cinaeei-orange: #ff7415;
    --cinaeei-pink: #fa0647;
    --cinaeei-lime: #d2d509;
    --cinaeei-purple: #672cc9;
    --cinaeei-yellow: #ffb31b;
    --cinaeei-magenta: #c91c82;
    --cinaeei-blue: #1e58c7;

    --cinaeei-black: #090909;
    --cinaeei-dark: #121212;
    --cinaeei-white: #ffffff;

    --cinaeei-text: #181818;
    --cinaeei-muted: #686868;
    --cinaeei-background: #f4f1ec;

    --cinaeei-container: 1320px;
}


/* Container */

.cinaeei-container {
    width: min(
        calc(100% - 3rem),
        var(--cinaeei-container)
    );

    margin-inline: auto;
}


/* Circuit colors */

[data-circuit="1"] {
    --circuit-color: var(--cinaeei-green);
}

[data-circuit="2"] {
    --circuit-color: var(--cinaeei-orange);
}

[data-circuit="3"] {
    --circuit-color: var(--cinaeei-pink);
}

[data-circuit="4"] {
    --circuit-color: var(--cinaeei-lime);
}

[data-circuit="5"] {
    --circuit-color: var(--cinaeei-purple);
}

[data-circuit="6"] {
    --circuit-color: var(--cinaeei-yellow);
}

[data-circuit="7"] {
    --circuit-color: var(--cinaeei-magenta);
}

[data-circuit="8"] {
    --circuit-color: var(--cinaeei-blue);
}


/* Circuit color bar */

.circuit-color-bar {
    display: grid;
    grid-template-columns: repeat(8, 1fr);

    height: 12px;
}

.circuit-color-bar span:nth-child(1) {
    background: var(--cinaeei-green);
}

.circuit-color-bar span:nth-child(2) {
    background: var(--cinaeei-orange);
}

.circuit-color-bar span:nth-child(3) {
    background: var(--cinaeei-pink);
}

.circuit-color-bar span:nth-child(4) {
    background: var(--cinaeei-lime);
}

.circuit-color-bar span:nth-child(5) {
    background: var(--cinaeei-purple);
}

.circuit-color-bar span:nth-child(6) {
    background: var(--cinaeei-yellow);
}

.circuit-color-bar span:nth-child(7) {
    background: var(--cinaeei-magenta);
}

.circuit-color-bar span:nth-child(8) {
    background: var(--cinaeei-blue);
}


@media (max-width: 650px) {

    .cinaeei-container {
        width: min(
            calc(100% - 2rem),
            var(--cinaeei-container)
        );
    }

}