/* Fonts */

.heading-l {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: 5px;
    color: white;
}

.heading-m {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 0.9375rem;
    color: white;
}

.heading-s {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--grey-400);
    letter-spacing: 2px;
}

.body-m {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 0.8125rem;
    color: var(--grey-400);
}

.markdown-code {
    font-family: 'Roboto Mono', monospace;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.5rem;
    color: var(--grey-400);
}

.p-h1, .p-h2, .p-h3, .p-h4, .p-h5, .p-h6, .p-para, .p-blockquote {
    margin: 0;
    padding: 0;
}

.p-h1 {
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
    font-size: 2rem;
    color: white;
    margin: 17px 0;
}

.p-h2 {
    font-family: 'Roboto Slab', serif;
    font-weight: 300;
    font-size: 1.75rem;
    color: white;
    margin: 17px 0;
}

.p-h3 {
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: white;
    margin: 12px 0;
}

.p-h4 {
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: white;
    margin: 12px 0;
}

.p-h5 {
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
    font-size: 1rem;
    color: white;
    margin: 12px 0;
}

.p-h6 {
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--orange);
    margin: 12px 0;
}

.p-para {
    font-family: 'Roboto Slab', serif;
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--grey-400);
    line-height: 1.5rem;
}

.p-blockquote {
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
    font-size: 0.875rem;
    color: white;
    background-color: var(--grey-800);
    padding: 22px 20px;
    line-height: 1.5rem;
    border-radius: 4px;
    border-left: var(--orange ) 4px solid;
    margin: 8px 0;
}

.p-code-wr {
    padding: 22px 20px;
    margin: 8px 0;
    border-radius: 4px;
    background-color: var(--grey-800);
}

.p-ol, .p-ul {
    margin-left: 30px;
    line-height: 1.75rem;
    color: var(--grey-400);
    font-family: 'Roboto Slab', serif;
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--grey-400);
}

.p-ul li::marker{
    color: var(--orange);
}



li, .p-ol li {
    padding-left: 10px;
    margin-left: 10px;
    vertical-align: center;
}

.p-link, .p-link:visited {
    color: white;
}

.p-link:hover {
    color: var(orange);
}

.p-inline-code {
    color: white;
}

.p-codeblock {
    background-color: var(--grey-800);
    padding: 20px;
    border-radius: 4px;
}

.p-code {
    text-wrap:wrap;
    word-wrap: break-word;
}

/* Colours */
:root {
    --grey-200: #F5F5F5;
    --grey-300: #E4E4E4;
    --grey-400: #C1C4CB;
    --grey-500: #7C8187;
    --grey-600: #5A6069;
    --grey-700: #35393F;
    --grey-800: #2B2D31;
    --grey-900: #1D1F22;
    --grey-1000: #151619;
    --orange: #E46643;
    --orange-hover: #F39765;
}