@font-face {
  font-family: ubuntu;
  src: url(/ubuntu/ubuntu-regular.ttf);
}

:root {
    --primary: #9723C9;
    --primary-variant: #3700B6;
    --secondary: #03DAC6;
    --seconday-variant: #018786;
    --background: #FAF4F0;
    --background: #F7EAE2;
    --surface: #FFFFFF;
    --error: #F56565;
    --success: #53C14A;
    --warning: #F5B665;
    --on-primary: #FFFFFF;
    --on-secondary: #000000;
    --on-background: #000000;
    --on-surface: #000000;
    --on-error: #FFFFFF;

    --border-radius: 0px;
    --padding: 20px;
    --box-shadow: 8px 8px 0 4px black;
    --box-shadow: none;

    /*
    --box-shadow: 10px 10px 0 0 var(--background),
                  15px 15px 0 0 #000000,
                  5px  5px 15px 5px rgba(0, 0, 0, 0);
    */

    --border: 2px solid black;
    --gap: 10px;
    --gap-small: 5px;

    --toastBackground: #2FFF2F;
    --toastColor: black;
    --toastBoxShadow: var(--box-shadow);
    --toastBorder: 2px solid black;
    --toastContainerTop: calc(38px + 10px);
    --toastContainerRight: 10px;
    --toastBarBackground: black;
    --toastBarHeight: 7px;
}

*:not(.switch > *) {
    box-sizing: border-box;
}

html {
    overflow: hidden;
}

html, body {
    background-color: var(--background);
    color: var(--on-background);
    margin: 0;
    padding: 0;
    font-family: ubuntu;
}

.mr { margin-right: var(--gap-small); }
.ml { margin-left: var(--gap-small); }