@charset "utf-8";

/*
-----
filename: style_william.css
-----
*/

@supports (--will-theme: gray)
{
	:root
	{
		--will-text: #000;
		--will-anchor: #5A5A5A;
		--will-light: #6F6F6F;
		--will-faded: #CCC;
		--will-link: #949494;
		--will-active: #F00;
		--will-field: #FEFEFE;
		--will-dimension: 1rem;
	}
}

:focus { outline: 1px dashed #333; }
::selection { background-color: #DDD; }

/*
-----
Styles which should be suitable for modern user agents
-----
*/

html
{
	background-color: var(--will-field);
	block-size: 100%;
	color: var(--will-text);
	font-family: 'Nimbus Roman No9 L', 'Times New Roman', Times, sans-serif;
	font-size: calc(1.1 * var(--will-dimension));
	inline-size: 100%;
}

body
{
	margin: auto;
	max-inline-size: calc(40 * var(--will-dimension));
	padding: var(--will-dimension);
	writing-mode: horizontal-tb;
}

h1
{
	text-align: start;
	text-transform: uppercase;
}

body.sitehome h1 { text-align: center; }

h1 a
{
	color: var(--will-text);
	text-decoration: none;
}

h2
{
	text-align: start;
	padding-block-end: var(--will-dimension);
}

p
{
	line-height: calc(1.3 * var(--will-dimension));
	padding-block-end: var(--will-dimension);
	text-decoration-thickness: from-font;
	text-underline-offset: calc(0.16 * var(--will-dimension));
}

a
{
	font-weight: bold;
	text-decoration-line: underline;
	text-decoration-thickness: from-font;
}

article a:link { color: var(--will-anchor); }
article a:visited { color: var(--will-light); }
article a:hover { color: var(--will-faded); }
article a:active { color: var(--will-active); }
article img, figure img { block-size: auto; inline-size: 100%; }
figure { margin-block: var(--will-dimension); }
section { padding-block-end: var(--will-dimension); }
figcaption { background-color: var(--will-text); color: var(--will-field); inline-size: 100%; margin-block-start: -5px; padding-block: calc(0.4 * var(--will-dimension)); padding-inline: calc(0.3 * var(--will-dimension)); }
figcaption a:link { color: var(--will-link); }
figcaption a:hover { color: var(--will-faded); }
figcaption, footer { font-size: calc(0.8 * var(--will-dimension)); }

table { border: 1px var(--will-text) solid; inline-size: 100%; margin: 0 auto 1rem auto; max-inline-size: 300px; }
table td { text-align: center; }

footer a
{
	color: var(--will-text);
	font-weight: normal;
	text-decoration: none;
}

footer a:hover { text-decoration: underline; }

footer p { text-align: center; }

@font-face {
	font-display: swap;
    font-family: 'Nimbus Roman No9 L';
    font-style: normal;
    font-weight: normal;
    src: local('Nimbus Roman No9 L Regular'), url('fonts/Nimbus Roman No9 L/NimbusRomNo9L-Reg-webfont.woff') format('woff');
    }
@font-face {
	font-display: swap;
    font-family: 'Nimbus Roman No9 L';
    font-style: italic;
    font-weight: normal;
    src: local('Nimbus Roman No9 L Regular Italic'), url('fonts/Nimbus Roman No9 L/NimbusRomNo9L-RegIta-webfont.woff') format('woff');
    }
@font-face {
	font-display: swap;
    font-family: 'Nimbus Roman No9 L';
    font-style: normal;
    font-weight: bold;
    src: local('Nimbus Roman No9 L Bold'), url('fonts/Nimbus Roman No9 L/NimbusRomNo9L-Med-webfont.woff') format('woff');
    }
@font-face {
	font-display: swap;
    font-family: 'Nimbus Roman No9 L';
    font-style: italic;
    font-weight: bold;
    src: local('Nimbus Roman No9 L Bold Italic'), url('fonts/Nimbus Roman No9 L/NimbusRomNo9L-MedIta-webfont.woff') format('woff');
    }

@media (prefers-color-scheme: dark)
{
	:root
	{
		--will-text: #FEFEFE;
		--will-anchor: #919191;
		--will-light: #9F9F9F;
		--will-faded: #DDD;
		--will-active: #F00;
		--will-field: #333;
	}
	figcaption { background-color: var(--will-field); color: var(--will-text); }

}