:root {
    --body-color-gray: #E8EBF3;
    --body-color-grad-1: #0062E6;
    --body-color-grad-2: #33AEFF;
    --white: #FFFFFF;
    --black: #333333;
    --light-black: #404040;
    --light-gray: #EEEEEE;
    --medium-gray: #B3B3B3;
    --dark-gray: #808080;
    --blue: #007bff;
    --red: #e53935;
    --green: #43a047;
    --light-yellow: #ffe082;
    --material: "Material Icons";
    --font-xxs: .5rem;
    --font-xs: .75rem;
    --font-sm: 1rem;
    --font-md: 1.25rem;
    --font-lg: 2rem;
    --font-xl: 5rem;
    --font-xxl: 8rem;
    --spacer-xxs: 4px;
    --spacer-xs: 8px;
    --spacer-sm: 16px;
    --spacer-md: 24px;
    --spacer-lg: 32px;
    --spacer-xl: 48px;
    --spacer-xxl: 64px;
}

* {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--font-m);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.light {
    background: var(--body-color-gray);
}

body.blue {
    background: linear-gradient(to right, var(--body-color-grad-1), var(--body-color-grad-2));
}

.hidden {
    display: none !important;
}