:root {
	--selection-colour: #9ccaff;
	--background-colour: #fffdea;
	--text-colour: #7C444F;
	--title-colour: #FFDCDC;
	--extra-colour: #FFDCDC;
	--link-colour: #E5989B;
	
	--mes-windoes: #f38cc3;
	--mes-text: #831f8a;
	--mes-menu-icons: #e61484;
	--natsuki: #ffa7e3;
	--ivory: #fffdea;
	--sayori: #9ccaff;
	--yuri: #a9a5ff;
	--monika: #afffdc;
}
}

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

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

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

#title-container {
	float: left;	
	background: url(forest.jpg) no-repeat bottom;
	background-size: cover;
	
	height: auto;
	width: 100%;
	
	padding-top: 4vh;
	
	border-bottom: 5px double var(--extra-colour);
}

#title {
	font-size: 10vmin; 
	text-align: center;  
	font-weight: 100;
	color: var(--title-colour);
}

#homebutton {
	position: absolute;
	left: 0;
	top: 0;
	font-size: 100%;
	color: var(--text-colour);
	background-color: var(--background-colour);
	padding: 0.5vh;
	margin-top: 0vh;
	border: 8px double var(--extra-colour);
}

#article-wrapper {
	text-align: center
}

#article-container {
	margin-top: 3vh;
	float: left;
	width: 70%;
	margin-left: 15%;
	padding: 4%;
	padding-top: 2%;
	margin-bottom: 3%;
	
	text-align: left;
	
	border: 5px double var(--extra-colour);
	
	font-size: 20px;
}

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 #54b3d6;
}

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;
}