@import url('https://fonts.googleapis.com/css2?family=Charm:wght@700&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
:root {
		--font-size: 112.5%;
		/* r=3.0, n=3, f0=1.0 */
		--font-scale-sm: 0.6934rem;
		--font-scale-0: 1.0rem;
		--font-scale-1: 1.4422rem;
		--font-scale-2: 2.0801rem;
		--font-scale-3: 3.0rem;
		--typeface:  "Noto Sans", Helvetica, Arial, sans-serif;
		--typeface-alt: "Charm", "Times New Roman", serif;

		--colour-text: #76140D;
		--colour-background: #F0F0E4;
		--colour-accent: #A48550;
		--colour-focus: #50C0DE;
		--colour-headings: var(--colour-text);
		--colour-section: #EFECE7;
		--colour-section_2: #D8D4CE;

		--max-page-width: 42rem;
		--gap: 1rem;
}


*, *::before, *::after { box-sizing: border-box; }
body {
		-webkit-text-size-adjust: 100%;
		-moz-osx-font-smoothing: grayscale;
		text-rendering: optimizeLegibility;
		margin: 0;
}
@supports not (-ms-ime-align: auto) {
		details summary { cursor: pointer; }
		details summary > * { display: inline; }
}
::selection {
		background-color: var(--colour-accent);
		color: white;
}
:focus {
		transition: outline-offset 1s ease;
		outline: 2px solid var(--colour-focus) !important;
		outline-offset: 3px;
}
img { max-width: 100%; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }


html {
		font-size: var(--font-size);
}
body {
		font-family: var(--typeface);
		font-size: var(--font-scale-0);
		line-height: 1.5;
		background-color: var(--colour-background);
		color: var(--colour-text);
		background-image: url("/assets/images/bg.jpg");
		background-repeat: repeat-x;
		background-size: auto 5em;
		padding-top: 5em;
		display: flex;
		flex-direction: column;
		min-height: 100vh;
}
p {
		padding-bottom: 1rem;
}
h1, h2, h3 {
		font-family: var(--typeface-alt);
		line-height: 1;
		color: var(--colour-headings);
		padding-bottom: 1rem;
}
h1 {
		font-size: var(--font-scale-3);
}
h2 {
		font-size: var(--font-scale-2);
}
h3 {
		font-size: var(--font-scale-1);
}
sup {
		font-size: 0.75em;
}


a {
		color: var(--colour-accent);
		text-decoration: none;
		text-decoration-color: var(--colour-accent);
}
a:hover, a[aria-selected="true"] {
		color: var(--colour-text);
		text-decoration-color: var(--colour-text);
}
button, a.btn {
		appearance: none;
		-moz-appearance: none;
		unicode-range:-webkit-appearance: none;
		outline: none;
		border: none;
		cursor: pointer;
		display: inline-flex;
		padding: 1em;
		background-color: var(--colour-accent);
		color: white;
		transition: all 0.5s ease-in-out;
}
button:hover, a.btn:hover {
		transform: scale(1.1);
}

[role="banner"], main, [role="contentinfo"] {
		width: 90%;
		margin: 0 auto;
		max-width: var(--max-page-width);
}
main {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
}
[role="contentinfo"] {
		font-size: var(--font-scale-sm);
		text-align: center;
}

#chakra {
		position: absolute;
		animation: spin 60s infinite;
		opacity: 0.2;
}
@keyframes spin {
		from { transform: rotate(0deg); }
		to { transform: rotate(360deg); } 
}