@charset "utf-8";

:root {
    /* Prevents long words from overflowing the viewport. */
    overflow-wrap: break-word;

    line-height: 1.25;
    font-family: sans-serif;
}

*, *::before, *::after {
    box-sizing: border-box;

    /*
     * Prevents flexbox items with an intrinsic size wider than the viewport
     * from overflowing.
     *
     * Logical CSS values are used to accomodate all writing directions.
     */
    min-inline-size: 0;
}

/*
 * There's already a built-in style for this, but it's surprisingly easy to
 * accidentally override.
 */
[hidden] {
    display: none !important;
}

/* Useful to screen readers. */
.visually-hidden:not(:focus):not(:active) {
    position: absolute;
    block-size: 1px;
    inline-size: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
}

body {
    margin: 0;
}

/*
 * Default spacing is inconsistent and often dependent on the font size of the
 * element.
 */

h1, h2, h3, h4, h5, h6,
p, blockquote, pre, figure, hr,
ul, ol, menu, dl {
    margin-block: 1rem;
}

:is(ul, ol, menu) :is(ul, ol, menu) {
    margin-block: 0;
}

blockquote, figure, dd {
    margin-inline: 0;
}

blockquote, ul, ol, menu, dd {
    padding-inline-start: 2.5rem;
}

fieldset, legend {
    margin: 0;
    padding: 0;
}

/* Prevents viewport overflows. */

img {
    block-size: auto;
    max-inline-size: 100%;
}

pre {
    overflow: auto;
}

button, select, input, textarea {
    font: inherit;
    color: inherit;
}