@import (inline) '~@apollo/space-kit/reset.css';

html {
    font-size: 100%;
    line-height: 1.45;
    overflow-y: auto;
}

body {
    color: @color-text2;
}

@default-margin: 24px;

h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul,
img,
div.mermaid {
    margin: 0;
    margin-bottom: @default-margin;
}

h4,
h5 {
    margin-bottom: 1.0875rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.1;
    color: @color-text1;
}

h1,
h2,
h3,
h4,
h6 {
    font-weight: 400;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 1.73286rem;
}

h3 {
    font-size: 1.4427rem;
}

h4,
p,
li {
    font-size: 1.125rem;
}

h5 {
    font-size: 1rem;
}

h6 {
    font-size: 0.875rem;
}

p,
li {
    line-height: 1.7;
}

li li {
    line-height: 1.4;
    font-size: 1.05rem;
}

ul,
ol {
    margin-left: @default-margin;
    padding: 0;
}

li {
    margin-bottom: @default-margin / 2;
    > ul,
    > ol {
        margin-top: @default-margin / 2;
    }
}

blockquote {
    margin-left: 0;
    padding: 12px 20px;
    border-left: 2px solid @color-primary;
}

blockquote > p, blockquote > ul, blockquote > ol {
    font-size: inherit;
    &:last-child {
        margin-bottom: 0;
    }
}

blockquote li, td li {
    font-size: inherit;
    line-height: 1.1;
}

form {
    margin-bottom: 0;
}

hr {
    height: 1px;
    margin-bottom: calc(@default-margin - 1px);
    border: none;
    background-color: @color-divider;
}

img.screenshot {
    box-shadow: 0 0 0 1px rgba(18, 21, 26, 0.04),
        0 1px 4px 0 rgba(0, 0, 0, 0.08);
    border-radius: 8px;
}