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

@supports (font-variation-settings: normal) {
    :root {
        font-family: InterVariable, sans-serif;
    }
}

:root {
    --overlay-color: #B1B1B155;
    --overlay-color-darker: #B1B1B1AA;
    --text-accent: #3DAF2C;
    --accent: #7BE76B;
    --squircle: 10px;
    --cirqule: 25px;
    height: 100vh;
}

body {
    display: flex;
    margin: 0;
    height: 100%;
    width: 100vw;
}

main {
    padding: 20px 40px;
    overflow-y: auto;
}

main>*>* {
    overflow-x: auto;
}

button,
[role=button] {
    border: none;
    background-color: transparent;
    cursor: pointer;
    transition: background-color 150ms;
}

button:hover,
[role=button]:hover {
    background-color: var(--overlay-color);
}

button:active,
[role=button]:active {
    background-color: var(--overlay-color-darker);
}

a {
    transition: all 150ms;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    color: var(--text-accent);
}

a:hover {
    text-decoration-color: var(--overlay-color-darker);
}