:root {
    /*-------- COLORS -------*/
    --weldin-background-color: rgb(26, 26, 30);
    --weldin-background-color-50: rgba(36, 36, 40, 0.5);
    --weldin-background-color-200: rgba(48, 48, 53, 0.5);
    --weldin-code-editor-background-color: #2424287f;
    --weldin-default-blur: 16px;
    --weldin-default-text-color: var(--weldin-dimmed-text-color);
    --weldin-dimmed-text-color: var(--sl-color-gray-800);
}

body {
    background-color: var(--weldin-background-color);
    color: var(--weldin-default-text-color);
    font-family: var(--weldin-default-font);
}

.body-landing {
    background: linear-gradient(-45deg, var(--weldin-background-color), #0a0e1e, var(--weldin-background-color));
}

.page-content,
.page-content-landing,
.page-content-no-menu {
    position: relative;
}

.page-content-no-menu {
    --weldin-navigation-panel-width: 0px;
}

.page-content {
    margin-top: var(--weldin-page-header-magin);
    margin-left: var(--weldin-navigation-panel-width);
}

@media screen and (max-width: 1200px) {
    .page-content {
        margin-left: 0;
    }
}

sl-button::part(label) {
    font-size: var(--weldin-font-size);
}