html{
height: 100	%;

}

body{
height: 100%;
background-color: #3a3a3a; /*58 58 58*/
font-family: 'Karla', sans-serif;

color: #eeeeee;

display: flex;
flex-direction: column;
justify-content: space-around;
display: -webkit-flex;
-webkit-flex-direction: column;
-webkit-justify-content: space-around;

margin: 0.5em auto;
padding: 0.5em;
align-self:center;
}
.page-outer{
max-width:45em;
margin: 0 auto;
}
.menu-link::before{
	
	content: "\25B6";
}

.menu-link:hover::before{

 content: "\25B7";
 }
 
 #menu {
 	visibility:hidden;
 	display:inline-block;
 margin: 0 0.5em;
 	
 }
 .header {
 margin: 0 auto;
 -webkit-touch-callout: none; /* iOS Safari */ 
 -webkit-user-select: none; /* Safari */ 
 -khtml-user-select: none; /* Konqueror HTML */ 
 -moz-user-select: none; /* Firefox */ 
 -ms-user-select: none; /* Internet Explorer/Edge */ 
 user-select: none; /* Non-prefixed version, currently */

 }

 .header:hover #menu {
 	visibility:visible;
 }
 
 .footer {
 text-align: right;
 padding: 1em 0.5em 0;
 text-transform: uppercase;
 font-size: 0.9em;
 }
 
 #content:not(:empty) { 
 
 color: #000000;
 background-color: #f2ede3; /*242, 237, 227*/
 padding:0.5em 1.5em;
 text-align: justify;
 margin: 1em auto;
 
 -webkit-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.9), 0 6px 20px 0 rgba(0,0,0,0.4);
-moz-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.9), 0 6px 20px 0 rgba(0,0,0,0.4);

box-shadow: 0 4px 8px 0 rgba(0,0,0,0.75), 0 6px 20px 0 rgba(0,0,0,0.4);


line-height: 1.5em;
display: flex;
flex-direction: column;
justify-content: space-around;
display: -webkit-flex;
-webkit-flex-direction: column;
-webkit-justify-content: space-around;
 }
 
 
 .nav {

 display: flex;
 display: -webkit-flex;
 justify-content: space-between;
 -webkit-justify-content: space-around;
 font-size: 1.5em;
 margin: 0 auto;
 }
 
 p.big {
 font-size:2em;
 line-height:2em;
 font-family: 'Lora' serif;
 }
 
 p.center{
 text-align: center;
 font-size:0.9em;
 }
 
 a {
  color: #b3e2e0;  
 }
 .nav a {
 padding:0 auto;
 }
 #menu a::before{
 content: "|";
 display: inline-block;
 padding: 0 0.2em 0 0;
 }
 
 #menu a:first-child::before{
 content: "";
 }
 
 #content.mirror{
 border: 0.5em solid gray;
 padding: 0.5em 1.5em;
 
 -webkit-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.9), 0 6px 20px 0 rgba(0,0,0,0.4), 0 4px 8px 0 rgba(0,0,0,0.5) inset, 0 6px 20px 0 rgba(0,0,0,0.4) inset;
-moz-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.9), 0 6px 20px 0 rgba(0,0,0,0.4), 0 4px 8px 0 rgba(0,0,0,0.5) inset, 0 6px 20px 0 rgba(0,0,0,0.4) inset;

box-shadow: 0 4px 8px 0 rgba(0,0,0,0.75), 0 6px 20px 0 rgba(0,0,0,0.4), 0 4px 8px 0 rgba(0,0,0,0.5) inset, 0 6px 20px 0 rgba(0,0,0,0.4) inset;
 }
 
 p.right {
 text-align:right
 }
 
 p.quote::before, p.quote::after{
 content: '"';
 }
 #content.mirror-start {
 padding: 0.5em 1.5em;
 }
 .mirror-trans {
    
    background: rgba(58,58,58,0.01);

background: -moz-linear-gradient(top, rgba(58,58,58,0.01) 0%, rgba(58,58,58,0) 0%, rgba(58,58,58,1) 85%, rgba(58,58,58,1) 100%);

background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(58,58,58,0.01)), color-stop(0%, rgba(58,58,58,0)), color-stop(85%, rgba(58,58,58,1)), color-stop(100%, rgba(58,58,58,1)));

background: -webkit-linear-gradient(top, rgba(58,58,58,0.01) 0%, rgba(58,58,58,0) 0%, rgba(58,58,58,1) 85%, rgba(58,58,58,1) 100%);

background: -o-linear-gradient(top, rgba(58,58,58,0.01) 0%, rgba(58,58,58,0) 0%, rgba(58,58,58,1) 85%, rgba(58,58,58,1) 100%);

background: -ms-linear-gradient(top, rgba(58,58,58,0.01) 0%, rgba(58,58,58,0) 0%, rgba(58,58,58,1) 85%, rgba(58,58,58,1) 100%);

background: linear-gradient(to bottom, rgba(58,58,58,0.01) 0%, rgba(58,58,58,0) 0%, rgba(58,58,58,1) 85%, rgba(58,58,58,1) 100%);




    
    
    padding: 170em 0.5em 1em;
    margin:15em 0 1em;
    
    -webkit-box-shadow:  0 4px 8px 0 rgba(242, 237, 227,1) inset, 0 6px 20px 0 rgba(242, 237, 227,1) inset;
-moz-box-shadow: 0 4px 8px 0 rgba(242, 237, 227,1) inset, 0 6px 20px 0 rgba(242, 237, 227,1) inset;

box-shadow: 0 4px 8px 0 rgba(242, 237, 227,1) inset, 0 6px 20px 0 rgba(242, 237, 227,1) inset;
 
color: #f2ede3;  
}

.mirror-end {

padding: 0 0.5em 1em;
    margin:0 0 1em;
    background-color: rgb(53,53,53);

 
color: #f2ede3;  
}

img {
width: 100%;
margin: 0;
padding:0;
}

#content.image {
padding:0;
line-height:0;
max-width:45em;
align-self:center;
}

#content:not(.image) {
max-width:32em;

}



p.miyuki{
border-right: 0.2em solid #727e9c;
padding-right:0.5em;
} 

p.oikawa{
border-left: 0.2em solid #81b9af;
padding-left:0.5em;
}