* {
    box-sizing: border-box;
    margin: 0rem;
    padding: 0rem;
    font-family: Calibri;
}

section:not(body > section) {
    max-width: 50rem;
    margin: auto;
}

pre code {
    display: block;
    padding: 1rem;
    border-radius: 1rem;
}

code {
    font-family: Consolas;
    background-color: #EEE;
    padding: 0.1rem 0.3rem 0.1rem 0.3rem;
    border-radius: 9999rem;
}

span {
    font-family: inherit;
}

pre {
    white-space: pre-wrap;
}

header {
    display: flex;
    padding: 1rem;
    gap: 1rem;
    align-items: center;
    width: 100%;
}

header * {
    font-family: 'Segoe UI';
}

header h1 {
    flex: 1;
    font-size: 2rem;
}

body {
    background-color: gold;
}

body > section {
    border-radius: 2rem 2rem 0rem 0rem;
    background-color: white;
    flex: 1;
    padding: 1rem;
}

header nav a {
    font-size: 1.3rem;
    color: black;
    letter-spacing: 0.02rem;
    text-decoration-color: transparent;
    transition: text-decoration-color 0.2s;
    text-decoration-thickness: 0.1rem;
}

header nav a:hover {
    font-weight: bolder;
    letter-spacing: -0.02rem;
    text-decoration-color: black;
}

html, body {
    height: 100%;
}

section h1 {
    font-size: 3.0rem;
    font-family: 'Segoe UI';
}

section h2 {
    font-size: 2.3rem;
    font-family: 'Segoe UI';
}

section h3 {
    font-size: 1.6rem;
    font-family: 'Segoe UI';
}

section h1, section h2, section h3, section pre code, section iframe {
    margin: 1rem 0rem 1rem 0rem;
}

section iframe {
    width: 100%;
    height: calc(min(100vw - 2rem,50rem) * 0.5625);
    border-radius: 1rem;
    border: none;
}

section a {
    background-image: url(https://en.wikipedia.org/w/skins/Vector/resources/common/images/link-external-small-ltr-progressive.svg);
    background-position: center right;
    background-repeat: no-repeat;
    padding-right: 0.8rem;
}

body {
    display: flex;
    flex-direction: column;
}