*, html {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root {
    --p1: #F7E44B;
    --p2: #FEBE11;
    --p3: #841528;
    --p4: #c6202c;
    

    --d0: #000000;
    --n0: #888888;
    --l0: #FFFFFF;

    font-family: Inter, sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
    --p-font: Inter, sans-serif;
}

html {
    height: 100%;
    --unit: 10rem;
}

body {
    height: 100%;
    background-color: var(--p3);
}

button {
    font-family: var(--p-font);
}

nav {
    position: absolute;
    display: flex; gap: .5rem;
    bottom: 1rem; right: 1rem;
    color: color-mix(in srgb, var(--p3) 75%, var(--l0));
    z-index: 99;

    button {
        color: inherit;
        background-color: transparent;
        border: none;
        font-weight: 700;
        transition: .25s ease;
        cursor: pointer;

        &:hover {
            color: color-mix(in srgb, var(--p3) 50%, var(--l0));;
        }
    }

    span {
        color: inherit;
        user-select: none;
    }
}

main {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    gap: 1rem;

    .add {
        height: var(--unit); width: var(--unit);
        border-radius: calc(var(--unit)/8);
        border: none;
        background-color: transparent;
        opacity: .75;
        color: var(--l0);
        font-size: calc(var(--unit)/3);
        transition: .25s ease;
        cursor: pointer;

        &:hover {
            background-color: color-mix(in srgb, var(--l0) 15%, transparent);
        }
    }

    .item.column {
        border: 1px solid var(--p1); border-width: 0 1px 0 0;
        min-height: calc(var(--unit) * 2); min-width: calc(var(--unit) * 2);
    }
}