*, *::before, *::after {
    box-sizing: border-box;
}

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

body {
    font-family: var(--font-body);
    background-color: var(--clr-surface);
    color: var(--clr-on-surface);
    overflow-x: hidden;
}

::selection {
    background: var(--clr-secondary-container);
    color: var(--clr-on-secondary-container);
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
    direction: ltr !important;
    unicode-bidi: embed !important;
}

    .material-symbols-outlined.fill-1 {
        font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
    }