/* REPLACEMENTS & PRIMS */

* {
	box-sizing:border-box;
}


html {
	font-size: 16px; 
}

img {
	max-width:100%;
	height:100%;
	padding:1rem;
	display:block;
	margin-left:auto;
	margin-right:auto;
}

/* COLOUR SCHEME */

:root {
	--bgcolor:#7da2a9;
	/* 	--contrastfont:#7da2a9; inaccessible! */
	--contrastfont:#3D575C;
	--font:black;
	--headers:#253032;
	--border:#324043;
	--boxbg:#f7f7f7;
}

/* Standard */

body {
	height:100%;
	background-color:var(--bgcolor);
	color:var(--font);
	font-family: 'Crimson Text', serif;
	font-size:1.25rem;
	line-height:1.5;
}

h1,h2,h3,h4 {
	color:var(--headers);
}

h1 {
	font-size:3rem;
	font-style:italic;
	text-align:left;
}

h2 {
	font-style:italic;
	font-size:2.8rem;
	margin-top:-3rem;
	font-weight:bold;
	padding:1rem;
}

h3 {
	text-align:right;
	font-style:italic;
	font-size:2rem;
	margin-top:-4.5rem;
	font-weight:normal;
	padding-right:1rem;
}

h4 {
	text-align:right;
	font-style:italic;
	font-size:1.8rem;
	margin-left:0;
	margin-top:0;
	padding-top:0;
	background-color:var(--border);
	color:var(--boxbg);
	padding-right:0.5rem;
	
}

footer {
	font-size:3rem;
	text-align:center;
}

p {
	text-indent: 2rem;
}

/* Pretty Quote Typography */

q:before {
	content:"‘";
}

q:after {
	content:"’";
}

q {
	font-style:italic;
}


/* LINK DECOR */

/* Mostly, accessible, except in contexts where it's sufficiently obvious */

a, a:visited {
	font-weight:bold;
	text-decoration:none;
}

a {
	color:var(--contrastfont);
}

article a {
	text-decoration-line:underline;
	text-decoration-style:dotted;
	text-decoration-color:var(--contrastfont);
	text-decoration-thickness:2px;
}

.goback a {
	text-decoration:none;
}


/* GENERAL BEHAVIOURS */

/* the stack */

main > * + *{
	margin-block-start:5rem;
	display: flex;
	flex-direction:column;
	justify-content: flex-start;

}


main article {
	padding:0 rem 1.8rem 1.8rem 1.8rem;
	max-width:80ch;
	margin-left:auto;
	margin-right:auto;
}


.goback {
	text-align:center;
	font-size:1.5rem;
	border-top:2px solid var(--contrastfont);
	border-bottom:2px solid var(--contrastfont);
	width:60%;
	margin-left:auto;
	margin-right:auto;
}


/* DECOR FOR BOXES */

article {

	border-color:var(--border);
	border-width:0.5rem;
	border-radius:1rem;
	border-style:solid;
	/*background-color:#f7f7f7;*/
	background-color:var(--boxbg);
	max-width:100%;
}


section {
	margin-bottom:10%;
	margin-left:5%;
	margin-right:5%;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
}


div {
	padding:2rem;
}

section div p:first-of-type {
    text-indent: 0;
}

section div p:first-of-type:first-letter {
    float: left;
    font: 700 3em/0.65 'Playfair Display', sans-serif;
    padding: 0.15em 0.15em 0 0;
    text-transform: uppercase;
	color:var(--headers);
}