body{
	font-family: futuraPT;
}

main{
	width:90%;
	margin-left:auto;
	color:#313131;
	font-size:1rem;
}

.left_article{
	float:left;
	width:60%;
	margin:auto;
}

.left_article h1{
	font-family: edoFont;
	background-color:RGB(200,65,49);
	color:white;
	border-radius: 1rem;
	text-align: center;
	margin-right: auto;
	font-size: 2rem;
	width:50%;
	margin-left:1rem;
}

.left_article p{
	padding-right: 1rem;
	padding-left: 1rem;
	color: #313131;
}

.right_article{
	float:left;
	width:40%;
	margin:auto;
}

.right_article img{
	width:100%;
	height:100%;
}

.page_head{
	width:95%;
	margin-left:auto;
	margin-right:auto;
}

.page_head h1{
	font-family:edoFont;
	font-size:2rem;
	background-color:#313131;
	color:white;
	padding:0.3rem;
	text-align:center;
	border-radius:1rem;
	margin-bottom:0;
}

.buttoncontainer{
	margin-top:1rem;
	margin-bottom:1rem;
	display:flex;
}

.buttoncontainer p{
	margin-left:auto;
	margin-right:auto;
}

.buttoncontainer span{
	display:inline-block;
	margin-left:0.2rem;
	margin-right:0.2rem;
	margin-bottom:1rem;
	border-radius:1rem;
	background-color:#313131;
	color:white;
	text-align:center;
	align-self: center;
	padding:0.4rem;
	transition: scale 0.2s;
}

.buttoncontainer span:hover{
	cursor:pointer;
	scale:105%;
}

.buttoncontainer .active{
	background-color:white;
	color:#313131;
	box-shadow: 0 0 5px 5px #313131;
}

.story_prog{
	border-radius:1rem;
	padding-left:0.5rem;
	padding-right:0.5rem;
	background-color:royalblue;
	color:white;
	font-weight:bold;
	display:inline;
}

.substory_prog{
	border-radius:1rem;
	padding-left:0.5rem;
	padding-right:0.5rem;
	background-color:RGB(130,49,43);
	color:white;
	font-weight:bold;
	display:inline;
}

.received_item{
	border-radius:1rem;
	background-color:darkslategrey;
	color:white;
	font-weight:bold;
	padding-left:0.5rem;
	padding-right:0.5rem;
}

.substory_complete{
	border-radius:1rem;
	background-color:darkgoldenrod;
	color:white;
	font-weight:bold;
	padding-left:0.5rem;
	padding-right:0.5rem;
}

.substory_finished{
	border-radius:1rem;
	background-color:mediumvioletred;
	color:white;
	font-weight:bold;
	padding-left:0.5rem;
	padding-right:0.5rem;
}

.divide{
	border-top-color:#313131;
	border-top-style:solid;
	border-top-width:thick;
	margin-top:1rem;
}

.dialogueoption{
	background-color:darkblue;
	border-radius:1rem;
	padding-left:0.5rem;
	padding-right:0.5rem;
	font-weight:bold;
	color:white;
}

@media (max-width:1400px){
	main{
		width:100%;
	}
}


@media (max-width:1000px){
	.right_article{
		display:none;
	}
	
	.left_article{
		width:100%;
	}
	
	.left_article h1{
		text-align: center;
		margin-right: auto;
		margin-left:auto;
	}
}

.fx-shadow{
	box-shadow: 2px 2px 5px 1px black;
}



@-webkit-keyframes genericfade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes genericfade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.kenzanfade {
  -webkit-animation-duration: 1s;
  -webkit-animation-name: genericfade;
  animation-duration: 1s;
  animation-name: genericfade;
}


.button_x{
	content:url("/kenzan/graphics/buttons/x.png");
	width:20px;
}

.button_circle{
	content:url("/kenzan/graphics/buttons/circle.png");
	width:20px;
}

.button_triangle{
	content:url("/kenzan/graphics/buttons/triangle.png");
	width:20px;
}

.button_square{
	content:url("/kenzan/graphics/buttons/square.png");
	width:20px;
}

.button_l1{
	content:url("/kenzan/graphics/buttons/l1.png");
	width:20px;
}

.button_l2{
	content:url("/kenzan/graphics/buttons/l2.png");
	width:20px;
}

.button_r1{
	content:url("/kenzan/graphics/buttons/r1.png");
	width:20px;
}

.button_r2{
	content:url("/kenzan/graphics/buttons/r2.png");
	width:20px;
}