@font-face {
	font-family: 'Monotype Corsiva';
	src: url(./fonts/MonotypeCorsiva.ttf);
}

* {
	margin: 0; padding: 0; box-sizing: border-box;

	--textcolor: white;
	--bgcolor: black;
	--highlight: #ff8040;
	--atrus: #00FF00;
	--rage: red;
}

body {
	color: var(--textcolor);
	background: var(--bgcolor);
	position: relative;

	max-width: 100vw;
	max-height: 100vh;

	image-rendering: pixelated;
}

a { color: var(--highlight); cursor: pointer; }

a:hover { text-decoration:none; }

p { margin-block: 0.5em; width: 100%;}

h1, h2 { margin-block: 1em }

h3 { margin-bottom: 0.5em; margin-top: 1em }

main {
	display: flex;
	justify-content: center;
}

section {
  /* ! Everything below is needed ! */
  display: none;
  position: absolute;
  background: var(--bgcolor);
  height: 100vh;
  max-width: 680px;
}

section:target { /* Show section */
  display: block;

  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
}

section#home { /* Show #home by default */
  display: flex;
  flex-flow: column;
  justify-content: start;

  padding: 1em;

  font-family: 'Georgia', serif;
  font-size: 1.15em;

  text-align: center;
}

section:not(#home) { z-index: 2; }
section:not(#home, #about, .book, .text)::before { content:""; display: block; width: 100vw; height: 100vh; position: absolute; background: black; z-index: -1;}

section.book, section.text {
	padding-block: 3em;
	height: fit-content;

	align-items: start;
	justify-content: start;

	font-family: 'Monotype Corsiva', 'Garamond', serif;
	font-size: 24px;
	line-height: 30px;
	word-break: break-word;
}

section.book p, section.text p { width: 60ch; margin-inline: auto; }

section.book img, section.text img { margin-inline: auto; margin-block: 0.5em; }

section.book a, section.text a {margin-inline: auto;}

#library .books { 
	max-height: 100%; 
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
}

#library img { margin-top: 0;margin-bottom: 0px !important; vertical-align: bottom;}
#library a { display: block; height:}
#library a > img { max-width: 100%; }
#library a:hover { /*opacity: 0.9;*/ cursor: pointer;}
#library a:active { opacity: 0.8;}
#library li { display:block; list-style-type: none; background: black;}
#library::marker { display: none; }

.rage { color: var(--rage); }
.atrus { color: var(--atrus); }

.librarymenu { position: relative; margin-top: 2em;  }
.librarymenu div { position: relative;z-index: 2 }
.librarymenu p { display: block; font-family: 'Georgia', serif; max-width: 500px !important; position: absolute; top:0;  overflow: clip;}

.credits {font-family: 'Georgia', serif; font-size: 16px; text-align: center; width: 100%}

#home hr { width: 80%; border: 0; border-top: 1px dashed var(--highlight); margin-block: 1.5em; margin-inline: auto;}

.disclaimer { 
	background-color: #121212;
	color: #bfbfbf; 
	padding: 1em;
	font-size: 0.9em;
	line-height: 1.4em;
	width: 90%; margin-inline: auto;
}

#about { 
	padding-block: 3em; padding-inline: 4em; 
	max-width: 720px; height: fit-content;
	justify-content: start; align-items: start; 
	font-size: 1.2em;
	line-height: 1.4em;

	background-color: #121212;
	color: #bfbfbf;
}

#about i { color: var(--highlight) }

#about ul { padding-left: 2em; }

#about > ul { list-style-type: square; }

#about > ul li { padding-bottom: 0.5em }

#about .dinkus { text-align:center; color: var(--highlight); }

#about hr { width: 100%; border: 0; border-top: 1px dashed var(--highlight); margin-block: 1.5em; }


@media screen and (max-width: 800px) { 
	section { width: 100%; }
	section img { max-width: 100%; }

	section.book p, section.text p { padding-inline: 1em; font-size: clamp(0.98em, 1vw, 2em); max-width: 100%; }
	#about { padding-inline: 1.3em; font-size: clamp(1.1em, 1vw, 2em); line-height: clamp(1.5em, 1vw, 2em)}

	#library, #library .books { width: 100%; }

	.librarymenu { overflow: clip; }
}