:root {
    --light-gray:           WhiteSmoke;
    --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;

    --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-table-even:     hsla(210, 10%, 20%, 1);
    --color-table-odd:      hsla(210, 10%, 10%, 1);
    --color-table-hover:    hsla(210, 10%, 30%, 1);

    --color-toast-success:  hsl(140 60% 40%);
    --color-toast-error:    hsl(0 100% 40%);
    --color-toast-warning:  hsl(22 100% 50%);
    --color-toast-info:     hsl(219 100% 66%);

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

* { box-sizing: border-box; }

html {
    container: page / inline-size;

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

fieldset { border: 0; }

body {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    display: grid;
    grid-template-rows: var(--header-height) 1fr var(--footer-height);
    min-height: 100dvh;
    color: white;
    background-size: contain;

    > 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;
    }
}

main {
    margin: auto;
    padding: 1em;
    display: grid;
    gap: 2em;

    @container page (min-width: 70em) { width: max(85vw, var(--responsive-trigger-size)); }
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

ul, ol, li, menu {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.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); }

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

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

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

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

.lg-only {
    display: none;

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