* {
    box-sizing: border-box;
}


/* Layout */

header,
main,
footer {
    max-width: 60ch;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

#body {
    display: grid;
    min-height: 100vh;
    grid-template-rows: auto 1fr auto;
    background-color: hsl(180, 50%, 99%);
    margin-top: 0;
    padding-top: .5rem;
    margin-bottom: 0;
    padding-bottom: .5rem;
}


/* Table with articles at index */

th[scope='row'] {
    padding-right: .5rem;
    color: hsl(0, 0%, 35%);
    font-weight: 400;
    font-size: .85rem;
}


/* Figures on the article pages */

figure {
    margin-left: 0;
    margin-right: 0;
}

img,
figure canvas {
    width: 100%;
}

figcaption {
    font-size: .85rem;
    text-align: center;
    color: hsl(0, 0%, 35%);
}

iframe {
    width: 100%;
    border: none;
}


/* Footnotes on the article pages */

.footnote-ref {
    line-height: 0;
    vertical-align: middle;
    text-decoration: none;
}

.footnotes p {
    margin: 0;
    font-size: .85rem;
}

.footnotes ::marker {
    font-size: .85rem;
}

.footnotes li {
    margin-top: .5rem;
    margin-bottom: .5rem;
}

.footnote-ref:focus {
    font-weight: bold;
}

.footnote-back {
    text-decoration: none;
}


/* Code blocks on the article pages*/

div.sourceCode {
    max-width: 60ch;
    width: calc(100vw - 1rem);
}

p + div.sourceCode {
    margin-top: 2.5rem;
}

[id^="cb"] {
    position: relative;
}

pre {
    background-color: hsl(120, 10%, 94%);
    padding: 1rem;
    overflow-x: auto;
}

pre.html::before {
    content: 'HTML';
}

pre.javascript::before {
    content: 'JavaScript';
}

pre.html::before,
pre.javascript::before {
    display: block;
    content: 'JavaScript';
    position: absolute;
    top: -1.25rem;
    color: hsl(0, 0%, 35%);
}


/* Form on the subscription page */

form #inputs {
    margin-bottom: 2rem;
}

form fieldset {
    border: none;
}

form fieldset + fieldset {
    margin-top: .5rem;
}

form input,
form select {
    padding: .25rem;
}

form #submit {
    margin-left: 1rem;
    margin-right: 1rem;
}


/* Layout on the about page */

#privacy_policy {
    margin-top: 3rem;
}


/* Typography */

html {
    font-family: serif;
    color: hsl(0, 0%, 0%);
}

h1 {
    color: hsl(123.8, 15.8%, 39.6%);
}

main > p,
main > form > p {
    text-align: justify;
    hyphens: auto;
}

h1,
h2,
h3,
#timestamps,
#about > p {
    text-align: left;
}

header {
    text-align: right;
}

footer {
    text-align: center;
}

h1,
h2,
h3,
header,
footer {
    font-family: sans;
}

h2,
h3 {
    color: hsl(200, 5%, 24%);
    margin-top: 2rem;
}

h2 + h3 {
    margin-top: 0;
}

h3 + p {
    margin-top: -.5rem;
}

header nav ul {
    list-style: none;
    display: grid;
    justify-content: end;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 1rem;
}

header nav + p {
    margin-top: -.5rem;
}

header a {
    text-decoration: none;
}

.locale,
#link_index_subscription,
#subscription_terms,
#privacy_policy,
footer {
    font-size: .85rem;
}

a {
    color: purple;
}

ul,
ol {
    padding-inline-start: .75rem;
}

main li {
    margin: 1rem;
    margin-right: 0;
    text-align: justify;
}

.dropcap {
    font-size: 2.95rem;
    font-weight: 700;
    padding-left: .5rem;
    padding-right: .5rem;
    float: left;
    text-shadow: -2px 2px gray;
    color: hsl(200, 5%, 24%);
}