:root { color-scheme: light dark; --color-dark: #1c1b19; --color-dark-alt: #2e2c28; --color-light: #eae0d1; --color-light-alt: #cec4b5; --color-blurple-dark: #352188; --color-blurple-light: #9a91be; --color-green-dark: #165742; --color-green-light: #8db8ab; --color-text: light-dark(var(--color-dark), var(--color-light)); --color-bg: light-dark(var(--color-light), var(--color-dark)); --color-gray: light-dark(var(--color-light-alt), var(--color-dark-alt)); --color-blurple: light-dark(var(--color-blurple-dark), var(--color-blurple-light)); --color-blurple-flipped: light-dark(var(--color-blurple-light), var(--color-blurple-dark)); --color-green: light-dark(var(--color-green-dark), var(--color-green-light)); } * { box-sizing: border-box; margin: 0; padding: 0; } body { color: var(--color-text); background-color: var(--color-bg); width: 65%; max-width: 1400px; margin: 0 auto; font-family: "Fraunces", serif; font-weight: 300; } main { padding-bottom: 2rem; } @media (max-width: 1050px) { body { width: 85% } } @media (max-width: 650px) { body { width: 92%; } } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } h1, h2, h3 { font-weight: 400; } h1 { text-align: center; font-size: 3rem; margin: 3rem auto; } @media (max-width: 650px) { h1 { font-size: 2.4rem; margin-top: 1rem; } } h2 { margin-bottom: .5rem; } h3 { text-transform: capitalize; margin-bottom: .5rem; } p { margin-bottom: 1rem; } a { color: var(--color-blurple); text-decoration-thickness: .1rem; transition: text-decoration-thickness .5s; border-radius: .05rem; } a:visited { color: var(--color-green); } @media (any-hover: hover) { a:hover { text-decoration-thickness: .2rem; } } a:focus-visible { outline: solid var(--color-green); } a:visited:focus-visible { outline-color: var(--color-blurple); } main ul { margin-left: 1rem; margin-bottom: 1rem; } main li { margin-left: 1rem; } /* iframe is on submission page */ iframe { margin: 2rem 0; } .teal { color: var(--color-blurple); }