/* @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=IBM+Plex+Sans:wght@400;700&family=IBM+Plex+Serif:ital@0;1&family=Pacifico&display=swap'); */
@import url(normalize.css);
@import url(prism.css);

html, body {
    height: 100%;
    font-size: 16px;
}

body {
    font-family: 'IBM Plex Serif', serif;
    font-weight: 400;
    line-height: 1.5rem;
}

body > footer {
    position: sticky;
    top: 100vh;
}

header, main, footer {
    padding: 1rem 4rem 1rem 4rem;
}

header {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 5rem;
    background-color: #ffeb3b;
    box-shadow: 0 2px 3px rgb(0 0 0 / 20%);
}

header img {
    display: block;
    margin: 0;
    width: 3rem;
}

header > h1 {
    margin: 0 0 0 1rem;
}

header > h1 > a {
    color: #000;
    font-family: 'Pacifico', cursive;
    font-weight: 400;
    text-decoration: none;
}

header > h1 > a:hover {
    text-decoration: none;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
}

article {
    min-width: 20rem;
    max-width: 60rem;
}

footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1rem 0 0 0;
    background-color: #f5f5f5;
    font-family: 'IBM Plex Sans';
    font-weight: 400;
}

h1, h2, h3, h1 > a, h2 > a, h3 > a, h1 > a:visited, h2 > a:visited, h3 > a:visited {
    color: #000;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    text-decoration: none;
}

h2, h3 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

code[class*=language-], pre[class*=language-] {
    font-family: 'IBM Plex Mono', monospace;
}

code, pre {
    font-family: 'IBM Plex Mono', monospace;
    overflow: hidden;
}

a {
    color: #0095dd;
    text-decoration: underline;
}

a:hover {
    color: #006496;
    text-decoration: underline;
}

.lesson blockquote {
    padding: 1rem 2rem;
    margin: 2rem 0;
    display: block;
    border: 1px solid #eee;
    border-left-width: calc((1rem/16)*10);
    border-left-color: #aaa;
    border-radius: calc((1rem/16)*3);
    background: #f0f0f0;
    font-family: 'IBM Plex Sans', sans-serif;
}

.lesson .goals {
    padding: 1rem 2rem;
    margin: 2rem 0;
    display: block;
    border: 1px solid #eee;
    border-left-width: calc((1rem/16)*10);
    border-left-color: #aaa;
    border-radius: calc((1rem/16)*3);
    background: #f0f0f0;
    font-family: 'IBM Plex Sans', sans-serif;
}

.lesson blockquote.reference {
    border-left-color: #558abb;
    background: #dde4e9;
}

.lesson blockquote.reference h3 {
    color: #1b809e;
}

.lesson blockquote.reference ul {
    list-style: none;
    padding-left: 0;
}

.lesson blockquote.reference a {
    color: #0095dd;
    text-decoration: none;
}

.lesson blockquote.reference a:hover {
    color: #0095dd;
    text-decoration: underline;
}

.lesson blockquote.info {
    border-left-color: #558abb;
    background-color: #dde4e9;
}

.lesson blockquote.note {
    border-left-color: #ffe070;
    background-color: #fff4cc;
}

img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: calc(1rem/16);
}

img.alignright {
    float: right;
    margin-left: 1rem;
}

img.alignleft {
    float: left;
    margin-right: 1rem;
}

p.aligncenter {
    text-align: center;
}

body.landing {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    background-color: #202020;
    overflow: hidden;
}

body.landing > img.logo {
    width: 50%;
    margin-bottom: 5rem;
}