:root {
    color-scheme: light dark;
}

* {
    box-sizing: border-box;
}

html {
    background-color: Canvas;
}

header {
    padding: 1rem 0;
    max-width: min(95%, 43.5rem);
    margin: auto;
    font-family: sans-serif;
}

header a::after {
    content: " ↗"
}

details {
    background-color: ButtonFace;
    border: none;
    border-radius: 1rem;
    padding: 1rem;
}

#fairfax {
    margin: auto;
    font-family: 'Courier New', monospace;
    color: CanvasText;
    max-width: min(95%, 43.5rem);
    border: 1px solid ButtonBorder;
    padding: clamp(2%, 2rem, 2rem);
    padding-left: clamp(2%, 4.5rem, 4.5rem);
}

#fairfax:focus {
    outline: none;
}

.fairfax-sceneheading {
    font-weight: bold;
}

.fairfax-character {
    margin-left: clamp(36%, 13rem, 13rem);
    max-width: 21rem;
}

.fairfax-dialogue {
    margin-left: clamp(12%, 8rem, 8rem);
    max-width: clamp(70%, 21rem, 21rem);
}

.fairfax-parenthetical {
    margin-left: clamp(24%, 10.5rem, 10.5rem);
    max-width: 15rem;
}

.fairfax-transition {
    text-align: right;
}

.fairfax-centered {
    text-align: center;
}

.fairfax-bold {
    font-weight: bold;
}

.fairfax-italic {
    font-style: italic;
}

.fairfax-underline {
    text-decoration: underline;
}

.fairfax-boneyard, .fairfax-markup {
    color: GrayText;
}

.fairfax-sectionheading {
    color: AccentColor;
    font-weight: bold;
}

.fairfax-note, .fairfax-synopsis {
    color: AccentColor;
}