:root {
  --text-horizontal-align-layout-cover: left;
  --text-vertical-align-layout-cover: center;
  --text-horizontal-align-layout-title: left;
  --text-vertical-align-layout-title: center;
  --text-horizontal-align-layout-section: left;
  --text-vertical-align-layout-section: center;
  --text-horizontal-align-layout-default: left;
  --text-vertical-align-layout-default: center;
  --text-horizontal-align-layout-caption: left;
  --text-vertical-align-layout-split: center;
  --text-vertical-align-layout-3-column: center;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("IBMPlexSans-VariableFont_wdth,wght.ttf")
        format("truetype-variations");
    font-weight: 100 700;
    font-style: normal;
}

@font-face {
    font-family: "IBM Plex Sans Italic";
    src: url("IBMPlexSans-Italic-VariableFont_wdth,wght.ttf")
        format("truetype-variations");
    font-weight: 100 700;
    font-style: italic;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("IBMPlexMono-Regular.ttf");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("IBMPlexMono-Italic.ttf");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("IBMPlexMono-Bold.ttf");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("IBMPlexMono-BoldItalic.ttf"):
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: "IBM Plex Serif";
    src: url("IBMPlexSerif-Regular.ttf");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "IBM Plex Serif";
    src: url("IBMPlexSerif-Italic.ttf");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "IBM Plex Serif";
    src: url("IBMPlexSerif-Bold.ttf");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "IBM Plex Serif";
    src: url("IBMPlexSerif-BoldItalic.ttf");
    font-weight: 700;
    font-style: italic;
}

/* style blockquotes */
blockquote, blockquote * {
    font-family: "IBM Plex Serif" !important;
    font-style: italic;
    > h1,h2,h3,h4,h5,h6,strong,b {
        font-weight: 600 !important;
    }
}

blockquote {
    footer, header {
        font-family: "IBM Plex Sans" !important;
        font-style: normal;
        text-align: left;
        color: white;
        margin: .5em 0; /
    }
    footer::before, header::after {
        content: "—"
    }
}

/* Style code elements */
section.light code, section.dark code {
    background: transparent !important;
    font-family: "IBM Plex Mono" !important;
    padding: 0;
}


/* Font Size */
section > :not([class*="layout-"]) h1,
[class*="layout-"] > div h1 {
    line-height: 1;
    font-size: 2.986em;
}
section > :not([class*="layout-"]) h2,
[class*="layout-"] > div h2 {
    line-height: 1.1;
    font-size: 2.488em;
}
section > :not([class*="layout-"]) h3,
[class*="layout-"] > div h3 {
    line-height: 1.2;
    font-size: 1.728em;
}
section > :not([class*="layout-"]) h4,
[class*="layout-"] > div h4 {
    line-height: 1.2;
    font-size: 1.2em;
}
section > :not([class*="layout-"]) h5,
[class*="layout-"] > div h5 {
    font-weight: 300;
}
section > :not([class*="layout-"]) h6,
[class*="layout-"] > div h6 {
    font-size: 1em;
    line-height: 1.4;
}

.layout-title > :not([class*="layout-"]) > h1 + h2,
.layout-cover > :not([class*="layout-"]) > h1 + h2,
.layout-caption > :not([class*="layout-"]) > h1 + h2,
.layout-title-image > :not([class*="layout-"]) > h1 + h2,
.layout-section > :not([class*="layout-"]) > h1 + h2:nth-child(2):last-child,
.layout-default > :not([class*="layout-"]) > h1 + h2:nth-child(2):last-child,
.layout-title > :not([class*="layout-"]) > h2 + h3,
.layout-cover > :not([class*="layout-"]) > h2 + h3,
.layout-caption > :not([class*="layout-"]) > h2 + h3,
.layout-title-image > :not([class*="layout-"]) > h2 + h3,
.layout-section > :not([class*="layout-"]) > h2 + h3:nth-child(2):last-child,
.layout-default > :not([class*="layout-"]) > h2 + h3:nth-child(2):last-child,
.layout-title > :not([class*="layout-"]) > h3 + h4,
.layout-cover > :not([class*="layout-"]) > h3 + h4,
.layout-caption > :not([class*="layout-"]) > h3 + h4,
.layout-title-image > :not([class*="layout-"]) > h3 + h4,
.layout-section > :not([class*="layout-"]) > h3 + h4:nth-child(2):last-child,
.layout-default > :not([class*="layout-"]) > h3 + h4:nth-child(2):last-child,
.layout-title > :not([class*="layout-"]) > h3 + h5,
.layout-cover > :not([class*="layout-"]) > h3 + h5,
.layout-caption > :not([class*="layout-"]) > h3 + h5,
.layout-title-image > :not([class*="layout-"]) > h3 + h5,
.layout-section > :not([class*="layout-"]) > h3 + h5:nth-child(2):last-child,
.layout-default > :not([class*="layout-"]) > h3 + h5:nth-child(2):last-child,
.layout-title > :not([class*="layout-"]) > h4 + h6,
.layout-cover > :not([class*="layout-"]) > h4 + h6,
.layout-caption > :not([class*="layout-"]) > h4 + h6,
.layout-title-image > :not([class*="layout-"]) > h4 + h6,
.layout-section > :not([class*="layout-"]) > h4 + h6:nth-child(2):last-child,
.layout-default > :not([class*="layout-"]) > h4 + h6:nth-child(2):last-child,
.layout-title > :not([class*="layout-"]) > h5 + h6,
.layout-cover > :not([class*="layout-"]) > h5 + h6,
.layout-caption > :not([class*="layout-"]) > h5 + h6,
.layout-title-image > :not([class*="layout-"]) > h5 + h6,
.layout-section > :not([class*="layout-"]) > h5 + h6:nth-child(2):last-child,
.layout-default > :not([class*="layout-"]) > h5 + h6:nth-child(2):last-child,
.layout-title > :not([class*="layout-"]) > h3 + p,
.layout-cover > :not([class*="layout-"]) > h3 + p,
.layout-caption > :not([class*="layout-"]) > h3 + p,
.layout-title-image > :not([class*="layout-"]) > h3 + p,
.layout-section > :not([class*="layout-"]) > h3 + p:nth-child(2):last-child,
.layout-default > :not([class*="layout-"]) > h3 + p:nth-child(2):last-child {
    margin-top: 0.1em;
}
.layout-title > :not([class*="layout-"]) > h1 + h3,
.layout-cover > :not([class*="layout-"]) > h1 + h3,
.layout-caption > :not([class*="layout-"]) > h1 + h3,
.layout-title-image > :not([class*="layout-"]) > h1 + h3,
.layout-section > :not([class*="layout-"]) > h1 + h3:nth-child(2):last-child,
.layout-default > :not([class*="layout-"]) > h1 + h3:nth-child(2):last-child,
.layout-title > :not([class*="layout-"]) > h2 + h4,
.layout-cover > :not([class*="layout-"]) > h2 + h4,
.layout-caption > :not([class*="layout-"]) > h2 + h4,
.layout-title-image > :not([class*="layout-"]) > h2 + h4,
.layout-section > :not([class*="layout-"]) > h2 + h4:nth-child(2):last-child,
.layout-default > :not([class*="layout-"]) > h2 + h4:nth-child(2):last-child,
.layout-title > :not([class*="layout-"]) > h2 + h5,
.layout-cover > :not([class*="layout-"]) > h2 + h5,
.layout-caption > :not([class*="layout-"]) > h2 + h5,
.layout-title-image > :not([class*="layout-"]) > h2 + h5,
.layout-section > :not([class*="layout-"]) > h2 + h5:nth-child(2):last-child,
.layout-default > :not([class*="layout-"]) > h2 + h5:nth-child(2):last-child,
.layout-title > :not([class*="layout-"]) > h3 + h6,
.layout-cover > :not([class*="layout-"]) > h3 + h6,
.layout-caption > :not([class*="layout-"]) > h3 + h6,
.layout-title-image > :not([class*="layout-"]) > h3 + h6,
.layout-section > :not([class*="layout-"]) > h3 + h6:nth-child(2):last-child,
.layout-default > :not([class*="layout-"]) > h3 + h6:nth-child(2):last-child,
.layout-title > :not([class*="layout-"]) > h2 + p,
.layout-cover > :not([class*="layout-"]) > h2 + p,
.layout-caption > :not([class*="layout-"]) > h2 + p,
.layout-title-image > :not([class*="layout-"]) > h2 + p,
.layout-section > :not([class*="layout-"]) > h2 + p:nth-child(2):last-child,
.layout-default > :not([class*="layout-"]) > h2 + p:nth-child(2):last-child {
    margin-top: 0.2em;
}
.layout-title > :not([class*="layout-"]) > h1 + h4,
.layout-cover > :not([class*="layout-"]) > h1 + h4,
.layout-caption > :not([class*="layout-"]) > h1 + h4,
.layout-title-image > :not([class*="layout-"]) > h1 + h4,
.layout-section > :not([class*="layout-"]) > h1 + h5:nth-child(2):last-child,
.layout-default > :not([class*="layout-"]) > h1 + h5:nth-child(2):last-child,
.layout-title > :not([class*="layout-"]) > h1 + h5,
.layout-cover > :not([class*="layout-"]) > h1 + h5,
.layout-caption > :not([class*="layout-"]) > h1 + h5,
.layout-title-image > :not([class*="layout-"]) > h1 + h5,
.layout-section > :not([class*="layout-"]) > h1 + h5:nth-child(2):last-child,
.layout-default > :not([class*="layout-"]) > h1 + h5:nth-child(2):last-child,
.layout-title > :not([class*="layout-"]) > h2 + h6,
.layout-cover > :not([class*="layout-"]) > h2 + h6,
.layout-caption > :not([class*="layout-"]) > h2 + h6,
.layout-title-image > :not([class*="layout-"]) > h2 + h6,
.layout-section > :not([class*="layout-"]) > h2 + h6:nth-child(2):last-child,
.layout-default > :not([class*="layout-"]) > h2 + h6:nth-child(2):last-child,
.layout-title > :not([class*="layout-"]) > h1 + p,
.layout-cover > :not([class*="layout-"]) > h1 + p,
.layout-caption > :not([class*="layout-"]) > h1 + p,
.layout-title-image > :not([class*="layout-"]) > h1 + p,
.layout-section > :not([class*="layout-"]) > h1 + p:nth-child(2):last-child,
.layout-default > :not([class*="layout-"]) > h1 + p:nth-child(2):last-child {
    margin-top: 0.3em;
}
.layout-title > :not([class*="layout-"]) > h1 + h6,
.layout-cover > :not([class*="layout-"]) > h1 + h6,
.layout-caption > :not([class*="layout-"]) > h1 + h6,
.layout-title-image > :not([class*="layout-"]) > h1 + h6,
.layout-section > :not([class*="layout-"]) > h1 + h6:nth-child(2):last-child,
.layout-default > :not([class*="layout-"]) > h1 + h6:nth-child(2):last-child {
    margin-top: 0.4em;
}

@media (max-width: 639px) {
    section > :not([class*="layout-"]) h1,
    [class*="layout-"] > div h1 {
        line-height: 1;
        font-size: 2.074em;
    }
    section > :not([class*="layout-"]) h2,
    [class*="layout-"] > div h2 {
        line-height: 1.1;
        font-size: 1.728em;
    }
    section > :not([class*="layout-"]) h3,
    [class*="layout-"] > div h3 {
        line-height: 1.2;
        font-size: 1.44em;
    }
    section > :not([class*="layout-"]) h5,
    [class*="layout-"] > div h5 {
        font-weight: normal;
    }
    section > :not([class*="layout-"]) h6,
    [class*="layout-"] > div h6 {
        font-size: 1em;
        line-height: 1.4;
    }
}