@font-face {
    font-family: 'formular';
    src: url('./webfonts/formular-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'formular';
    src: url('./webfonts/formular-regularitalic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'formular';
    src: url('./webfonts/formular-bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'formular';
    src: url('./webfonts/formular-bolditalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'formular';
    src: url('./webfonts/formular-medium.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'formular';
    src: url('./webfonts/formular-mediumitalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'formular';
    src: url('./webfonts/formular-black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'formular';
    src: url('./webfonts/formular-blackitalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'formular';
    src: url('./webfonts/formular-ultra.woff') format('woff');
    font-weight: 1000;
    font-style: normal;
}

@font-face {
    font-family: 'formular';
    src: url('./webfonts/formular-ultra-italic.woff') format('woff');
    font-weight: 1000;
    font-style: italic;
}

@font-face {
    font-family: 'formular';
    src: url('./webfonts/formular-light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'formular';
    src: url('./webfonts/formular-lightitalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'formular';
    src: url('./webfonts/formular-extralight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'formular';
    src: url('./webfonts/formular-extralightitalic.woff') format('woff');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'formular-mono';
    src: url('./webfonts/formular-mono.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*@font-face {*/
/*    font-family: 'md-system';*/
/*    src: url('./webfonts/MDSystemTrial-Regular.otf') format('woff');*/
/*    font-weight: normal;*/
/*    font-style: normal;*/
/*}*/

/*@font-face {*/
/*    font-family: 'founders';*/
/*    src: url('./webfonts/founders-grotesk-regular.woff2') format('woff2');*/
/*    font-weight: normal;*/
/*    font-style: normal;*/
/*}*/

/*@font-face {*/
/*    font-family: 'sohne';*/
/*    src: url('./webfonts/Sohne-Buchwoff2.woff2') format('woff2');*/
/*    font-weight: normal;*/
/*    font-style: normal;*/
/*}*/

/*@font-face {*/
/*    font-family: 'the-future';*/
/*    src: url('./webfonts/the-future-regular.woff2') format('woff2');*/
/*    font-weight: normal;*/
/*    font-style: normal;*/
/*}*/

html {
    /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
    font-family:
            formular,
            sans-serif,
            'Apple Color Emoji',
            'Segoe UI Emoji';
    line-height: 1.2; /* 1. Correct the line height in all browsers. */
    -webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
    tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


:root {
    --bg-color-dark: #121211;
    --bg-color-dark-50: rgba(18, 18, 17, 0.8);
    /*--text-color-dark: #E2E1D8;*/
    /*--text-color-dark: #FAEEBD;*/
    --text-color-dark: wheat;
    --md-padding: 20px;
    --md-width: 800px;
    --md-margin: 0;
    --md-font-size: 17px;
    --md-font-size-mobile: 16px;
    --top-padding: 10px;
    --max-body-width: 1920px;
}

body {
    color: var(--text-color-dark);
    background-color: var(--bg-color-dark);
    max-width: var(--max-body-width);
    margin: 0 auto;
}

code,
kbd,
samp,
pre {
    font-family:
            formular-mono,
            monospace; /* 1 */
    font-size: 1em; /* 2 */
}

p {
    font-size: 1em;
}

:target {
    scroll-margin-block: 5ex;
}

h1, h2,
h3, h4 {
    text-wrap: balance;
}

ul[role='list'],
ol[role='list'] {
    list-style: none;
}

hr {
    border: 1px solid var(--text-color-dark);
}



@media (min-width: 1600px) {
    :root {
        --md-margin: calc((100vw - 1600px) / 1.5);
    }
}

@media (min-width: 1920px) {
    :root {
        --md-margin: calc((1920px - 1600px) / 1.5);
    }
}

@media (min-width: 1940px) {
    :root {
        --md-padding: 0;
    }
}

@media (max-width: 1080px) {
    :root {
        --md-width: 600px;

    }
}

@media (max-width: 640px) {
    :root {
        --md-width: 100%;
        --md-padding: 15px;
    }
}