* { box-sizing: border-box; }
body { background: #0d0d0d; font: 11px/16px 'Libre Baskerville', serif; color: #fff; }
header { margin: auto; text-align: center; }
main { display: flex; justify-content: center; }
aside { width: 294px; }
section { max-width: 700px; flex: 1 1 700px; }

nav { display: flex; justify-content: space-evenly; flex-wrap: wrap; }
nav > div { 
	text-align: center;
	background: #1e1e1e;
	padding: 7px 13px;
	font: 14px/normal 'Caudex', serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: 0.3s;
	position: relative;
}
nav > div:hover { background: #2f2f2f; }
nav > div:hover > .hidden-menu { opacity: 1; }
nav .hidden-menu { 
	opacity: 0; 
	position: absolute; 
	left: 0;
	background: #1e1e1e;
	font-size: 11px; 
	width: 100%; 
	padding: 5px 0; 
	transition: 0.3s; 
}
nav .hidden-menu a { display: block; padding: 5px 0; }
nav .hidden-menu a:hover { display: block; background: #2f2f2f; }



article { padding: 10px 20px; height: 770px; overflow-y: scroll; }

strong {font-weight: 700;}

h1 {
	font-family: georgia;
	font-size: 14pt;
	font-weight: normal;
	padding: 0px;
	margin: 0px;
	text-align: center;
}

h2 {
	font: 18px/normal 'Caudex', serif;
	text-align: center;
	letter-spacing: 2px;
	color: silver;	
}

h3 { 
	background: #3a3a3a;
	text-align: center;
	padding: 10px 0;
	font-weight: normal;
 }

h4 {
	font: 18px/normal 'Libre Baskerville', serif;
	text-align: center;
	letter-spacing: 2px;
	color: silver;	
}

h5 {
	display: inline;
	font-size: 14px;
	margin: 0 0 0 20px;
}


a {
	color: #aaa;
	text-decoration: none;
}

#bg {
	margin: auto;
	background-image: url('pics/SWm_Layout.jpg'); 
	background-repeat: no-repeat; 
	background-attachment: scroll; 
	width: 1280px; 
	height: 800px; 
	background-position: center top;
}

#tod {
	position: relative;
	top:-35px;
	left: 5px;
	width: 87px; 
	height: 138px; 
}

#leben {
	position: relative;
	top:-20px;
	left: 190px;
	width: 124px; 
	height: 165px; 
}

#pad {
	position: relative;
	top: -2px;
	left: -1px;
	margin: auto;
	padding: 10px;
	height: 743px;
	overflow: auto;
}

.interview {
	margin: auto;
	padding: 10px;
}
.interview > div {
  opacity: 0; height: 0;
  overflow: hidden;
  transition: opacity 1s ease-in, height 1s step-start;
}
.interview > div.active {
  opacity: 1; height: auto;
  transition-timing-function: ease-out, step-end;
}
.pagination { 
	display: flex; 
	flex-wrap: wrap; 
	background: #1e1e1e; 
}
span.char_btn { 
	display: inline-block;
	flex: 1 1 9%;
	font: 10px/normal 'Libre Baskerville';
	cursor: pointer;
	padding: 5px;
	text-align: center;
}

.rpg {
	display: table;
	margin: auto;
	border: 1px solid #fff;
}
.rpg > a {
	font-size: 14px;
}
.plot { display: flex }
.plot h5 { flex: 0 0 90px; }
.plot > div { flex: 1; }

.nrpg { margin: 0 10px 15px 0px; }
.nrpg a, .nrpg { 
	display: block;
	color: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
	font-size: 12px;
}

.roleplay p { text-align: justify; }

.memberarea { background-image: url('pics/texture.jpg'); text-align: center; color: #000; font-size: 15px; padding: 10px 0; }


img { max-width: 100%; }

@media (max-width: 900px) {
	
	main { display: block; }
	aside { display: none; }
	nav { flex-direction: column; }
	span.char_btn { min-width: 135px; padding: 10px 0; }
	article { height: auto; overflow: hidden; }

	.plot { display: block; }
	.plot h5 { float: left; margin-right: 10px; }
	.nrpg { margin: 0 20px 15px 20px; }
}