:root {
    --page-horizontal-margin: 20px;
    --sub-app-bar-height: 46px;
    --app-bar-height: 64px;
}

@media (min-width: 640px) {
    :root {
        --page-horizontal-margin: 50px;
    }
}

@media (min-width: 1024px) {
    :root {
        --page-horizontal-margin: 20px;
    }
}

@media (min-width: 600px) {
    :root {
        --page-horizontal-margin: 20px;
    }
}

@media (max-width: 1280px) { /* MD Breakpoint */
    :root {
        --app-bar-height: 64px;
        --sub-app-bar-height: 76px;
    }
}

@media (max-width: 600px) {
    :root {
        /* The 3 pixels are a manual fix. Must be the MudBlazor app bar being places weirdly */
        --app-bar-height: calc(60px - 3px);
    }
}

@media (max-width: 380px) {
    :root {
        --sub-app-bar-height: 71px;
    }
}

.page-horizontal-margin {
    margin-right: var(--page-horizontal-margin);
    margin-left: var(--page-horizontal-margin);
}

.sub-app-bar-height {
    height: var(--sub-app-bar-height);
}

.app-bar-height {
    height: var(--app-bar-height);
}