/* @import url('https://fonts.googleapis.com/css2?family=Reddit+Mono:wght@200..900&display=swap'); */
@import './mio.css';

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


html {
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    font-family: var(--font-family);
    font-size: var(--font-size);
    background-color: var(--bg-pri);
    color: var(--font-color);

    font-weight: 400;
    line-height: var(--line-height);

    overscroll-behavior: none;
    overflow-x: auto;
    overflow-y: auto;

    height: 100dvh;

    /*
    100% width works and won't cause overflow due to the vertival scrollbar. However, as we need to allow
    body to grow, we will no longer have a 100% reference once in body. This is an issue on some browsers
    where the scrollbar is not overlay (such as chrome on ubuntu). So because we cannot use 100vw/dvw on
    such browsers, we switched to container type: inline size. And the body is an inline block, which allows
    it to grow. The reason we let the body grow, is so that sticky left 0 elements will indeed stick to the 
    left. The header then can be 100cqw, which won't cause horizontal scroll. Due to the inline block, 
    the body would naturally shrink, but it can have a min-width 100%. 
    */

    container-type: inline-size;
    container-name: root;

    &.mio-overlay {
        overflow-y: hidden !important;
        overflow-x: hidden !important;
    }
}

body {
    margin: 0;
    display: inline-block;
    min-width: 100%;
}