/* Font import */

@font-face {
	font-family: 'Abel';
	src: url('fonts/abel-v7-latin-regular.ttf') format('truetype');
}

@font-face {
	font-family: 'Francois One';
	src: url('fonts/FrancoisOne-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Earwig Factory';
	src: url('fonts/earwig factory rg.ttf') format('truetype');
}
@font-face {
	font-family: 'Roboto';
	src: url('fonts/Roboto-Regular.ttf') format('truetype');
}

/* Local */

body {
	background-color: #111;
	color: #FFF;
	font-family: 'Francois One', sans-serif;
	font-size: 100%;
}

h1 {
	font-size: 2.5em;
}

h2 {
	font-size: 1.875em;
}

p {
	font-size: .875em;
}

/* Links */

a {
	color: #FFF;
	text-decoration: none;
}
a:visited {
	color: #DDD;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

.site {
  display: flex;
  min-height: 95vh;
  height: 100%;
  width: 80%;
  max-width: 1050px;
  margin: auto;
  flex-direction: column;
}

.site-content {
	flex: 1;
}

/* Images */

img {
	height: auto;
	width: 100%;
	max-width: 512px;
	vertical-align: bottom;
}

.mementos_all_response img {
	width: 50%;
}

/* Footer Links */

div.footerlinks {
	margin-top: 3em;
	margin-bottom: 1em;
	padding-top: 0;
	text-align:center;
}

/* Dialogue Formatting */

.mementos_all_initiator, .mementos_all_response {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	overflow: hidden;
	justify-content: space-between;
	margin-top: 3em;
	margin-bottom: 0em;
	border: 0.25em solid white;
	background-color: black;
	background: rgba(0,0,0,0.85);
	font-family: 'Abel', sans-serif;
}
.mementos_all_response {
	width: 90%;
	margin-left: auto;
	margin-right: 0;
	margin-top: -.25em;
}
.mai_comment, .mar_comment {
	font-size: 1.25em;
	width: 75%;
	align-items: stretch;
	vertical-align: center;
	padding-left: 2.5em;
	margin-top: auto;
	margin-bottom: auto;
}
.mar_comment {
	font-size: 1em;
}
.mai_portrait, .mar_portrait {
	width: 20%;
	text-align: right;
}
.mai_audiofiles, .mar_audiofiles {
	margin-top:0.25em;
	text-align: center;
	display: flex;
	overflow: hidden;
	flex-direction: column;
	justify-content: center;
	width:3em;
}
.mai_audiofiles_en, .mai_audiofiles_ja, .mai_audiofiles_identifier, .mar_audiofiles_en, .mar_audiofiles_ja, .mar_audiofiles_identifier {
	width:5%;
	max-width:5em;
	margin-left:auto;
	margin-right:auto;
}

/* Navbar */
ul.navbar {
	font-family: 'Abel', sans-serif;
    list-style-type: none;
    margin: 0;
    padding: 0;    
    overflow: hidden;    
    width: 7.5%;
    height: 100%;
    position: fixed;
    right: 0;
}
.navbar li a {
    display: block;
    color: #999;
    padding: 1em 1em;
}
.navbar li a:hover {
    background-color: #555;
    color: white;
    text-decoration: none;
}