:root {
    --windowWidth: 100vw;
    --viewportMin: 600;
    --viewportMax: 1112;

    --layoutWidthMax: 1200px;
    --gutterWidth: 16px;

    --sectionPaddingTop: 60px;
    --sectionPaddingLeft: 32px;
    --sectionPaddingRight: 32px;
    --sectionPaddingBottom: 40px;
    --sectionPadding: var(--sectionPaddingTop) var(--sectionPaddingRight) var(--sectionPaddingBottom) var(--sectionPaddingLeft);

    --logoHeight: 22px;
    --logoLetterSpacing: -1px;
    --logoInnerMargin: calc(var(--logoHeight) / 3);

    --textColor: #0a2540;
    --textColorAlways: #0a2540;
    --textColorLighter: #32325d;
    --textColorLightest: #425466;
    --textColorGray: #8898aa;
    --accentColor: #874fa9;
    --accentColorAlways: #874fa9;
    --accentBackgroundColor: #f6f9fc;
    --whiteColor: white;
    --whiteColorAlways: white;
    --transparentBackgroundColor: rgba(0, 0, 0, 0.5);
    --dialogBackgroundColor: white;
    --dialogTextColor: var(--textColor);
    --dialogInputBorderColor: black;
    --menuBorderColor: #eff0f3;
    --headerColor: white;

    --fontFamily: "sohne-var", "Helvetica Neue", Arial, sans-serif;
    --fontWeightBold: 500;
    --fontWeightSemiBold: 425;
    --fontWeightNormal: 300;

    --fontSize: 16px;
    --fontSizeSmall: 14px;

    --titleWeight: var(--fontWeightBold);
    --titleFontMin: 36;
    --titleFontMax: 60;
    --titleFontSize: calc(var(--titleFontMin)*1px + (var(--titleFontMax) - var(--titleFontMin))*(var(--windowWidth) - var(--viewportMin)*1px)/(var(--viewportMax) - var(--viewportMin)));
    --titleLineHeight: 1.04;
    --titleFont: var(--titleWeight) var(--titleFontSize) / var(--titleLineHeight) var(--fontFamily);

    --subTitleLineHeight: 1.56;
    --subTitleFontSize: 16px;
    --subTitleFont: var(--fontWeightNormal) var(--subTitleFontSize)/var(--subTitleLineHeight) var(--fontFamily);

    --headerPaddingTop: 20px;
    --headerPaddingLeft: var(--sectionPaddingLeft);
    --headerPaddingRight: var(--sectionPaddingRight);
    --headerPaddingBottom: 20px;
    --headerPadding: var(--headerPaddingTop) var(--headerPaddingRight) var(--headerPaddingBottom) var(--headerPaddingLeft);

    --footerPaddingTop: 10px;
    --footerPaddingLeft: var(--sectionPaddingLeft);
    --footerPaddingRight: var(--sectionPaddingRight);
    --footerPaddingBottom: 10px;
    --footerPadding: var(--footerPaddingTop) var(--footerPaddingRight) var(--footerPaddingBottom) var(--footerPaddingLeft);

    --shadow: 0 50px 100px -20px rgb(50 50 93 / 25%), 0 30px 60px -30px rgb(0 0 0 / 30%);
    --menuShadow: var(--shadow), 0 0 10px rgb(0 0 0 / 30%);
    --dialogShadow: 5px 5px 5px var(--transparentBackgroundColor);
}

@media (min-width: 1112px) {
    :root {
        --titleFontSize: calc(var(--titleFontMax) * 1px);
    }
}

blockquote {
    --fontFamily: "Helvetica Neue", Arial, sans-serif;
}

.mainContentSection,
.useCaseContentSection {
    --titleFontSize: 34px;
    --titleLineHeight: 1.294117647;
    --titleLetterSpacing: -0.1px;
    --titleFont: var(--titleWeight) var(--titleFontSize)/var(--titleLineHeight) var(--fontFamily);

    --titlePaddingTop: 0;
    --titlePaddingLeft: 0;
    --titlePaddingRight: 0;
    --titlePaddingBottom: 40px;
    --titlePadding: var(--titlePaddingTop) var(--titlePaddingRight) var(--titlePaddingBottom) var(--titlePaddingLeft);
}

.mainContentSection  li {
    --titleFontSize: 20px;
    --titleLineHeight: 1.6;
    --titleLetterSpacing: 0.2px;
    --titleWeight: var(--fontWeightSemiBold);
    --titleFont: var(--titleWeight) var(--titleFontSize)/var(--titleLineHeight) var(--fontFamily);

    --titlePaddingTop: 0;
    --titlePaddingLeft: 0;
    --titlePaddingRight: 0;
    --titlePaddingBottom: 10px;
    --titlePadding: var(--titlePaddingTop) var(--titlePaddingRight) var(--titlePaddingBottom) var(--titlePaddingLeft);
}

@media (max-width: 600px) {
    :root {
        --titleFontSize: 36px;
        --sectionPaddingTop: 16px;
        --sectionPaddingLeft: 16px;
        --sectionPaddingRight: 16px;
        --sectionPaddingBottom: 16px;

        --logoHeight: 20px;
    }
}

.developersBody {
    --textColor: #00d4ff;
    --textColorLighter: #32325d;
    --textColorLightest: #adbdcc;
    --accentColor: white;
    --accentBackgroundColor: #f6f9fc;
    --whiteColor: white;
    --backgroundColor: #0b233e;
    --codeEditorBackgroundColor: #0c2e4e;
    --codeTerminalBackgroundColor: #06182c;
    --codeTerminalSymbolColor: #6a7ed9;
    --codeTerminalDateColor: #38516a;
    --codeTextColor: #777873;
    --codeOperatorColor: #f0246b;
    --codeStringColor: #dfce68;
    --codeNumberColor: #926ed3;
    --codeCommentColor: #716e5b;
    --buttonDarkColor: #02c5ed;
    --dialogBackgroundColor: #0c2e4e;
    --dialogTextColor: white;
    --dialogInputBorderColor: white;
    --menuBorderColor: #0e2f54;
    --headerColor: #0b233e;

    --codeFontMin: 12;
    --codeFontMax: 13;
    --codeFontSize: calc(var(--codeFontMin)*1px + (var(--codeFontMax) - var(--codeFontMin))*(var(--windowWidth) - var(--viewportMin)*1px)/(var(--viewportMax) - var(--viewportMin)));
    --codeLineHeight: 1.2;
    --codeLetterSpacing: -0.1px;
    --codeWeight: var(--fontWeightNormal);
    --codeFamily: "Source Code Pro";
    --codeFont: var(--codeWeight) var(--codeFontSize)/var(--codeLineHeight) var(--codeFamily);
}

@media (max-width: 600px) {
    .developersBody {
        --codeFontSize: calc(var(--codeFontMin)*1px);
    }
}