@import url('colours.css');
@import url('header.css');
@import url('footer.css');
@import url('tooltip.css');
@import url('tables.css');
@import url('cards.css');
@import url('posts.css');
@import url('text.css');

:root {
    
    --content-max-width: 1800px;

    @media (max-width: 900px) {
        --content-padding: 10px;
    }

    @media (min-width: 901px) {
        --content-padding: 25px 60px;
    }
}

* {
    color: var(--text);
}

body {

    background-color: var(--background);

    /* Disable global scrolling */
    overflow: hidden;

    min-width: 0;

    & > main {

        /* Fill all space between the header and footer */
        width: 100dvw;
        height: 100dvh;
        padding: var(--header-height) 0 var(--footer-height) 0;

        min-width: 0;

        & > .root {

            width: 100%;
            min-width: 0;
            height: 100%;
            
            /* Scrollable region */
            overflow: auto;

            /* Horizontally centre contents */
            display: grid;
            justify-items: center;

            & > .content {
                
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 100%;
                min-width: 0;
                max-width: var(--content-max-width);
                padding: var(--content-padding);
            }
        }
    }
}

hr {
    border-color: var(--navbar-active);
    margin: 30px 0 20px 0;
}