// Preferred Themes
:root {
    .light {
        --body-background: #dce0e8;
        --box-background: #eff1f5;
        --link: #1e66f5;
        --text: black;
    }
    .dark {
        --body-background: #232634;
        --box-background: #303446;
        --link: #8caaee;
        --text: white;
    }
}
.light {
    .theme-light {
        display: inherit;
    }
    .theme-dark {
        display: none;
    }
}
.dark {
    .theme-light {
        display: none;
    }
    .theme-dark {
        display: inherit;
    }
}

// Fonts
@font-face {
    font-family: 'Mona Sans';
    src:
      url('/fonts/Mona-Sans/Mona-Sans.woff2') format('woff2 supports variations'),
      url('/fonts/Mona-Sans/Mona-Sans.woff2') format('woff2-variations');
    font-weight: 200 900;
    font-stretch: 75% 125%;
}

// Master
html, body {
    height: 100%;
    font-family: 'Mona Sans';
}

body {
    background: var(--body-background);
    transition: 0.6s background, 0.6s color;
    margin: auto;
    max-width: 1200px;
    padding: 0px 12px;
    color: var(--text);
    .disabled-items {
        opacity: 0.3;
        pointer-events: none;
    }
    a {
        color: var(--link);
        transition: 0.6s color;
    }
    ::selection {
        background: gray;
        color: white;
    }
}