style.css

:root {
    --font: Roboto, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande,
        sans-serif;
    --font-code: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
    --shadow: 59, 66, 82;
    --primary: 94, 129, 172;
    --secondary: 129, 161, 193;
    --radius: 4px;
    --line-width: 1px;
    --neutral: 46, 52, 64 !important;
    --solid: 76, 86, 106 !important;
    --line: 216, 222, 233 !important;
    --background: 236, 239, 244 !important;
    --surface: 255, 255, 255 !important;
}

[data-theme='dark'] {
    --neutral: 236, 239, 244 !important;
    --solid: 216, 222, 233 !important;
    --line: 67, 76, 94 !important;
    --background: 37, 41, 50 !important;
    --surface: 46, 52, 64 !important;
}

html {
    width: 100%;
    min-height: 100vh;

    @mixin scrollbar;
}

body {
    margin: 0;
    height: 100%;
    min-height: 100vh;
    background: palette(background);
    font-family: var(--font);
    transition: all 0.4s ease-in-out;
}

#app {
    height: 100%;
    min-height: 100vh;
    display: flex;
    width: 100%;
    height: 100%;
}

.milkdown {
    @mixin query 72rem {
        max-width: 72rem;
        min-height: auto;
        border-radius: var(--radius);
        width: 100%;
    }
    transition: all 0.4s ease-in-out;

    .editor {
        @media only screen and (min-width: 72rem) {
            max-width: 57.375em;
            padding: 3.125em 7.25em !important;
        }
    }
}

.loading {
    padding: 3.125rem 1.25rem;
    @mixin query 72rem {
        padding: 3.125rem 7.25rem;
    }
}

.milkdown-menu-wrapper {
    max-width: 72rem !important;

    .milkdown {
        .editor {
            overflow: auto;
            height: calc(100vh - 11.5rem - 110px);
        }
    }

    position: relative;
}