:root {
    --primary-surface: #ccbbdd;
    --glass-surface: #8836ff4a;
    --primary-text: #000000;
    --ui-surface-bg: #ffffff;
    --ui-hover-fg: #220251;
    --ui-hover-bg: #d2b6e8;
    --ui-visited-fg: #670eea;
    --ui-active-bg: #ff9ca0;
    --ui-active-fg: #600707;
}

.pad-20 {
    padding: 20px;
}

.inset-20-10 {
    margin: 20px;

    @media all and (max-width: 400px) {
        margin: 10px;
    }
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: sans-serif;
    color: var(--primary-text);
}