:root {
	--selection-colour: rgba(64, 64, 64, 0.25);
	--background-colour: white;
	--text-colour: black;
	--title-colour: black;
	--extra-colour: rgba(64, 64, 64, 0.25);
	--distinction-colour: rgba(64, 64, 64, 0.25);
	--link-colour: #a9a5ff;
	--highlight-colour: #a9a5ff;
		
	--top: 5%;
	--hr-top: 25%;
}

::selection {
	background-color: var(--selection-colour);
}
::-moz-selection {
	background-color: var(--selection-colour);
}

body {
	margin: 0;
	font-family: "Rufina";
	
	background: var(--background-colour);
	color: var(--text-colour);
	
	line-height: 1.5;
	word-break: normal;
	hyphens: manual;
	font-optical-sizing: auto;
	
	overflow-x: hidden;
}

*, ::before, ::after {
	font-kerning: auto;
	font-variant-ligatures: common-ligatures contextual;
	font-variant-numeric: lining-nums proportional-nums;
	font-weight: 400;
}

#container {
	position: absolute;
	width: 80%;
	left: 10%;
	top: var(--top);
	
	padding-bottom: 10vh;
}


sup:before {
	content: '[';
}
sup:after {
	content: ']';
}
sup {
	font-size: 110%;
	font-style: normal;
}

sup > span {
	display: none;
	
	background: var(--background-colour) !important;
	border: 1px double var(--highlight-colour);
	color: var(--text-colour) !important;
	padding: 5px;
	font-size: 13px;
	max-width: 35vmin;
	
	z-index: 999;
}	

sup:hover > span {
	display: inline;
	position: absolute;
	margin-left: 5px;
	
	animation-name: slide-in;
	animation-duration: 0.2s;
}	
sup:hover {
	text-decoration: underline;
}

@keyframes slide-in {
	0% {margin-top: 20px;}
	100% {margin-top: 5px;}
}

#title {
	font-size: 17px; 
	text-align: left;  
	font-weight: 400;
	color: var(--title-colour);
    border-bottom: 1.5px solid var(--title-colour);
}

#text-container {
	width: 100%;
}

.poembox {
	position: relative;
	width: 80%;
	left: 10%;
	background: rgba(205, 205, 195, 0.25);
	border: 2px solid rgba(160, 160, 160, 0.35);
	
	text-align: center;
	font-style: italic;
	
	padding-top: 1vh;
	padding-bottom: 1vh;
}

span.highlight {
	background: var(--highlight-colour);
	color: black;
	padding-left: 0.5px;
	padding-right: 0.5px;
}

blockquote {
	border-left: 5px double var(--extra-colour);
	padding-left: 10px;
}

a {
	box-shadow: inset 0 0 0 0 var(--extra-colour);
	color: var(--extra-colour);
	padding: 0 .25rem;
	margin: 0 -.25rem;
	transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
a:hover {
  color: #fff;
  box-shadow: inset 700px 0 0 0 #a9a5ff;
}

details {
	border-left: 5px double var(--extra-colour);
	padding-left: 10px;
}

details[open] > summary {
	font-weight: 700;
}

summary:hover {
	cursor: pointer;
	padding-left: 5px;
	text-decoration: underline;
}

details > p {
	border-left: 5px double var(--extra-colour);
	padding-left: 10px;
}

/* Presentational styles */
a {
	color: var(--link-colour);
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
}


h1 {
	margin-top: 0;
}

img {
	max-width: 30vmin;
	border: 5px double var(--extra-colour);
}

figure {
	float: left;
	width: 30%;
	max-width: 30vmin;
}

figure > img {
	width: 100%;
	transition: 0.4s transform;
}
figure > img:hover {
	transform: scale(2.25);
}

figcaption {
	background-color: rgba(205, 205, 195, 0.65);
	border-radius: 5px;
	padding: 5px;
	margin-left: 10px;
	text-align: center;
}