body
{
background-color: #232e46;
margin: 0;
color: #c0cadf;
font: 18px/1.7 "Arimo", sans-serif;
height: 100%;
}

html
{
height: calc(100% - 50px); /* 50px come from the top margin the header has to move it down from the nav */
}

#all-content
{
min-height: 100%;
position: relative;
}

header
{
position: relative;
margin-top: 50px;
height: 400px;
width: 100%;
background: #3a5da2 url(header-transparent.png) no-repeat center;
}

header h1
{
visibility: hidden;
margin: 0;
}

#content
{
width: 60vw;
margin: 0 auto;
padding-bottom: 6em;  /* Height of the footer (2em) so that the footer won't cover the content when shrunk + some more for spacing */
}

h1, h2, h3, h4, h5, h6, .next
{
font-family: "Fjalla One", sans-serif;
text-align: center;
text-transform: uppercase;
}

h1, h2, h3, h4, h5, h6
{
clear: both;
}

h1
{
font-size: 2.5em;
margin-top: 2em;
}

h2, .next
{
margin-top: 2.25em;
font-size: 1.6em;
}

h1, h2, h3, h4, h5, h6, .next, nav#main-nav > ul
{
text-shadow: 1px 1px 0 #000;
}

/* Emphasis */

i, em, dfn, address, span.placeholder
{
color: #869bc5;
}

dfn
{
font-style: normal;
}

a, .tooltip-hook
{
color: #fff;
}

a:hover, .tooltip-hook:hover
{
-webkit-transition: all 0.1s ease-out; 
-moz-transition: all 0.1s ease-out; 
-o-transition: all 0.1s ease-out; 
transition: all 0.1s ease-out;
}

/* All these things get a dark background: */

blockquote, .gamelist li, .ingredients, .spoilers
{
background-color: #222631;
}

/* Blockquote */

blockquote
{
padding: 1em 2em;
font-size: .9em;
margin: 1.5em 2.5em;
overflow: hidden;
}


blockquote.trait
{
min-height: 3.5em;
}

/* Placeholder text in quotes */

span.placeholder:before
{
	content: '<';
}

span.placeholder:after
{
	content: '>';
}

/* Screenplay */

.dialogue-choices, .dialogue-choices-three
{
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: flex-start;
}

.dialogue-choices ol
{
flex: 50%;
}

.dialogue-choices-three ol
{
flex: 33%;
}

.dialogue-choices ol, .dialogue-choices-three ol
{
padding: 0 1em;
}

.dialogue-choices .speaker, .dialogue-choices-three .speaker
{
flex: 1 1 auto;
}

.dialogue-choices ol:first-of-type, .dialogue-choices-three ol:first-of-type
{
padding-left: 0;
}
.dialogue-choices ol:last-of-type, .dialogue-choices-three ol:last-of-type
{
padding-right: 0;
}

/* List of games in the intro page */

.gamelist
{
list-style-type: none;
padding: 0;
margin: 0 auto;
/* width: 56vw; */
width: 95%;
text-align: center;
clear: both;
}

.gamelist li
{
display: block;
font-size: .7em;
float: left;
/*
width: 10vw;
margin: .5vw;
padding: 1.5vw;
*/
/* set to hold four games across */
width: 20%;
margin: 0.75%;
padding: 1.5%;

}

.three li
{
/* set to hold three across */
width: 28%;
margin: 0.75%;
padding: 1.5%;
}

.gamelist img
{
width: 100%;
display: block;
margin-bottom: 1.25em;
object-fit: cover;
}

.gamelist + p
{
clear: both;
padding-top: 1.5em;
}

.gamelist h1
{
margin: 0 0 0.25em 0;
padding: 0;
}

/* Ingredient lists! */

.ingredients
{
font-size: .9em;
padding: 0 2em;
}

.ingredients div
{
width: 40%;
padding: 1em 2em;
display: inline-flex;
flex-direction: column;
}

.ingredients ul
{
padding-left: 0;
}

.ingredients h3
{
text-align: left;
}

/* Figures */

.tooltip-caption
{
font-size: .85em;
}

figure
{
font-size: .7em;
text-align: center;
margin: 2em auto;
width: 50%;
clear: both;
}

figure.cooking
{
width: 100%;
}

figure.cooking img
{
width: 30%;
}

figure img
{
width: 90%;
border: 5px solid #222631;
}

figure.no-stretch img
{
width: auto;
max-width: 90%;
}

figure.smaller img
{
width: 50%;
}

figure.right + p
/* The text being justified in the next paragraph creates a visual border. Your mileage may vary */
{
text-align: justify;
}

figure figcaption
{
margin: .5em 1em 0;
}

figure.left, figure.right
{
width: 38%;
padding: 0 2%;
margin-top: .75em;
}

figure.left
{
float: left;
margin-right: 2em;
clear: left;
}

figure.right
{
float: right;
margin-left: 2em;
clear: right;
}

figure.trait-icon
{
width: 70px !important;
padding: 0;
margin: 0 1.5em 0 0;
}

figure.trait-icon img, figure.borderless img
{
border: 0;
}


/* Tooltip Hooks */

.tooltip-hook
{
cursor: pointer;
font-size: 1.2em;
line-height: 0;
}


.tooltip_templates
{
display: none;
}

.tooltipster-box
{
background-color: #222631 !important;
padding: .5em;
border: 0 !important;
border-radius: 0 !important;
}

.tooltipster-content
{
color: #c0cadf !important;
text-align: center;
line-height: 1.2 !important;
}

.tooltipster-content *
{
font-size: 13px;
}

.tooltipster-content a
{
color: #fff;
}

.tooltipster-content em
{
color: #fff;
}

.tooltipster-base
{
left: 81vw !important;
margin-right: 1em;
}

.tooltipster-content img
{
max-width: 100%;
}

.tooltipster-arrow
{
display: none;
}

/* Appearances table */

#appearances
{
border-collapse: collapse;
margin: 0 auto;
}

#appearances, #appearances tr, #appearances td 
{
border: 4px solid #191e2c;
padding: .25em 1em;
font-size: .9em;
}

#appearances tr:first-of-type td
{
font-weight: bold;
}

.appearances-yes { background-color: #3a5da2; }
.appearances-cameo { background-color: #304165; }

/* Header nav */

nav#main-nav
{
height: 50px;
width: 100vw;
background-color: #222631;
position: fixed;
top: 0;
z-index: 10000;
}

nav#main-nav ul
{
list-style-type: none;
padding-left: 0;
margin: 0;
}

nav#main-nav > ul
{
display: flex;
margin: 0 auto;
width: 100%;
justify-content: center;
font-family: "Fjalla One", Arial, sans-serif;
font-size: 1.2em;
text-transform: uppercase;
text-align: center;
}

nav#main-nav > ul > li
{
height: 50px;
line-height: 2.3;
width: 15vw;
}

nav#main-nav > ul > li > ul
{
display: none;
}

nav#main-nav > ul > li:hover
{
background-color: #3a5da2;
color: #fff;
cursor: help;
}

nav#main-nav > ul > li:hover > ul
{
position: relative;
display: block;
width: 100%;
font-family: "Arial Narrow", Arial;
font-size: .7em;
letter-spacing: .5px;
text-align: left;
box-shadow: 2px 2px 0 #000;
}

nav#main-nav > ul > li:hover > ul > li a
{
display: block;
background-color: #222631;
padding: .45em 1em;
line-height: 1.2;
text-indent: 0;
text-decoration: none;
text-shadow: none;
}

nav#main-nav > ul > li:hover > ul > li:last-of-type a
{
border-bottom: 0;
}

nav#main-nav > ul > li:hover > ul > li a:hover
{
background-color: #fff;
color: #222631;
}

#backtoindex span
{
visibility: hidden;
}

#backtoindex
{
background: url(ey-small.png) no-repeat center;
}

/* Footer */

footer
{
padding: 1em 20%;
background-color: #222631;
text-align: right;
font-size: .8em;
clear: both;
position: absolute;
bottom: 0;
width: 60%;
height: 2em;  /* Height of the footer */
}

/* Main page */

#indexpage
{
padding-top: 2em;
}

#indexpage img
{
float: right;
margin: 2em 0 0 2em;
}

#lastupdated, .lastupdated
{
font-size: .9em;

}

span.avoidwrap
{
	display:inline-block;
}

/* LINKS PAGE */

dl.sites
{
  list-style-type: none;
  margin: 0;
  padding-left: 0;
}

dt
{
  font-weight: bold;
}

dl.sites dd
{
  margin-bottom: 2.5em;
}

.banners
{
  list-style: none;
}

.banners li
{
  display: inline-block;
  margin: 0 0.5em 0.5em 0.5em;
}



/***** RESPONSIVITY *****/

/* RESPONSIVITY: When the font size changes need to happen - blue mode */

@media all and (max-width: 980px) {
body
{
font-size: 12px;
}

header
{
background-size: 90%;
    height: 35vh;
    background-position: center 80%;
}

#content
{
width: 85vw;
}

nav#main-nav
{
height: auto;
}

nav#main-nav > ul
{
flex-wrap: wrap;
}

nav#main-nav > ul > li
{
height: 40px;
width: 45vw;
}

#backtoindex
{
width: 100% !important;
}

}