:root {
    --light-gray:           hsla(120, 4%, 95%, 1);
    --gray:                 DarkGray;
    --winner-green:         hsla(120, 100%, 60%, 1);
    --winner-green-darker:  DarkGreen;

    --error-red:            LightCoral;
    --error-red-darker:     hsla(0, 100%, 20%, 1);
    --favorite-yellow:      Yellow;

    --header-height:        5em;
    --footer-height:        3em;
    --flashs-height:        3em;

    --responsive-trigger-size: 60em;

    --youtube-red:          hsla(0, 100%, 50%, 1);
    --twitch-purple:        hsla(261, 43%, 45%, 1);
    --esport-earnings-blue: hsla(191, 68%, 60%, 1);
    --startgg-blue:         hsla(225, 99%, 65%, 1);

    --color-flash-success: var(--winner-green-darker);
    --color-flash-success-highlight: var(--winner-green);
    --color-flash-error: var(--error-red-darker);
    --color-flash-error-highlight: var(--error-red);

    --color-edit-button: var(--orange);
    --color-delete-button: var(--error-red-darker);
}

html {
    container: page / inline-size;
    scrollbar-color: var(--yellow) var(--grey);

    @media (prefers-reduced-motion: no-preference) { scroll-behavior: smooth; }

    > body {
        margin: 0;
        font-family: 'Shapiro', sans-serif;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        color: white;
        background-size: contain;

        > main {
            flex-grow: 1;
            margin: auto;
            padding: 1em;
            display: flex;
            flex-direction: column;
            gap: 2em;
        }

        > header {
            height: var(--header-height);
            background-color: var(--header-background);
        }

        > footer {
            height: var(--footer-height);
            background-color: var(--footer-background);
        }

        > header, > footer {
            padding: 0 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
        }

        h1 { font-size: 2.5rem; }
        h2 { font-size: 2rem; }

        button {
            background: var(--button-color);
            padding: 0.5rem 0.75rem;
        }

        @container page (min-width: 70em) {
            display: grid;
            grid-template-rows: var(--header-height) var(--flashs-height) auto var(--footer-height);

            > main { width: max(85vw, var(--responsive-trigger-size)); }
        }
    }
}

.check__icon, .fa-shield-heart, .fa-toggle-on, .fa-arrow-up { color: var(--green); }

.uncheck__icon, .fa-skull-crossbones, .fa-toggle-off, .fa-arrow-down { color: var(--red-darius); }

.fa-star { color: var(--favorite-yellow); }

.earnings__logo { color: var(--esport-earnings-blue); }

.fa-code-branch { color: var(--startgg-blue); }

.transparent { display: contents; }

.sr-only {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}

.sm-only {
    display: initial;

    @container page (min-width: 70em) { display: none; }
}

.lg-only {
    display: none;

    @container page (min-width: 70em) { display: initial; }
}