: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);

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

hr { margin-inline: 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 {
    padding: 1em;
    display: grid;
    align-content: start;
    gap: 2em;

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

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

.earnings__logo { color: var(--esport-earnings-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; }
}

main [popover] {
    inline-size: max-content;
    max-inline-size: calc(100vw - 2rem);
    max-block-size: calc(100dvh - 2rem);
    padding: 0.5rem;

    @supports (position-area: bottom) {
        position-area: block-end span-inline-end;
        position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
        margin: 0.5rem 0 0;
    }
}