/* the following code is pulling two fonts from Google fonts. I've picked one (Lato) that I find more readable than the Ink default. The second one (Quattrocento) is the default Ink title font */
@import url('https://fonts.googleapis.com/css?family=Lato:wght@400;700|Quattrocento:700');



/* the way this style sheet is organized treats light mode as the default. in this section, you'll set your light mode colors as well as choosing fonts, text size, etc. Dark mode colors have their own section below */


body {
    background: #feffc8; 			/* background color of the page */
    color: black;				/* main text color */
    overflow: hidden;
}

.container {					/* this is for the area of the page where the body text appears */
    display: block;
    max-width: 600px; 				/* increase or decrease this to make the portion of the page where the main text appears wider or narrower */
    margin: 0 auto;
    padding: 20px;
    padding-top: 4em;
    background: #feffc8;			/* changes the color behind your text. you can make it the same or different as your main background color */
}

h1,
h2 {						
    text-align: center;				/* this sets the alignment of the title and byline */
    margin: 0;
    padding: 0;
}

h1 { 						/* this is styling for the game's title. the color currently defaults to the body text color, but you can set a different one by adding a "color" element to this list */
    font-family: 'Quattrocento', serif;
    font-size: 30pt;
    margin-bottom: 10px;
}

h2 {						/* this is for any headings you include in your game (by wrapping the text in <h2> and </h2>). this styling will also apply to your byline... */
    font-family: 'Lato';
    font-size: 16pt;
}

.byline {					/* ...unless you override it by adding different styling here */
    font-style: italic;
    font-size: 14pt;
    color: #2E2E2E;
}

p {						/* this is for styling the body text */
    font-family: 'Lato', sans-serif; 		
    font-size: 14pt;
    font-weight: 300;
    line-height: 1.7em;
}

a {						/* this is for links */
    font-weight: 700;
    color: #bf0000;
    font-family: 'Lato', sans-serif;
    transition: color 0.6s;
    text-decoration: none;
}

a:hover {					/* link hover styling */
    color: #d76464;
    transition: color 0.1s;
}

.end {						/* styling for the ending text */
    text-align: center;
    font-weight: bold;
    color: black;
    padding-top: 20px;
    padding-bottom: 20px;
}

.written-in-ink {				/* styling for the bar at the top of the screen and the "written in Ink" text */
    z-index: 3;
    font-size: 9pt;
    font-family: sans-serif;
    text-align: center;
    font-weight: 700;
    position: fixed;
    display: block;
    width: 100%;
    background: #feffc8;				/* sets the color of the bar */
    transition: color 0.6s, background 0.6s;
    margin: 0;
    padding-top: 6px;
    padding-bottom: 6px;
    height: 14px;
    top: 0;
}

#controls {					/* styling specifically for the restart, save, load, and theme buttons. their color currently defaults to the main link color, but you can set a specific one by adding a "color" element to this list */
    z-index: 4;
    font-size: 9pt;
    text-align: center;
    padding-bottom: 6px;
    position: fixed;
    right: 14px;
    top: 4px;
    user-select: none;
    background: #feffc8;				/* if you change the color of the top bar, make sure to change this too */
    transition: color 0.6s, background 0.6s;
}

#controls [disabled] {				/* sets the color of the "load" button when there's nothing to load */
    color: #ccc;
}



/* set dark mode colors here */


body.dark {
    background: black;				/* page background */
    color: #E4E4E4;				/* main text color */
}

.dark .container {				/* area of the page where the body text appears */
    background: black;
}

.dark .byline {					/* byline */
    color: #ACACAC;
}

.dark p {					/* body text */
    color: #E4E4E4;
}

.dark a {					/* links */
    color: #f6f972;
}

.dark a:hover {					/* link hover */
    color: #B5F8FC;
}

.dark .written-in-ink {				/* color of the top bar */
    background: black;
}

.dark .end {					/* ending text */
    color: white;
}

.dark #controls {				/* background of the restart, save, load, and theme buttons */
    background: black;
}

.dark #controls [disabled] {			/* color of the "load" button when there's nothing to load */
    color: #444;
}



/* for the purposes of this template, ignore everything below here. I've left all this as the Ink defaults */



body.switched {
    transition: color 0.6s, background-color 0.6s;
}

.header {
    padding-top: 3em;
    padding-bottom: 3em;
}

.outerContainer {
    position: absolute;
    display: block;
    margin: 0;
    padding: 0;
    -webkit-overflow-scrolling: touch;
    overflow: scroll;
    overflow-x: hidden;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    margin-top: 24px;
    background-size: cover;
    background-repeat: no-repeat;
}

@media screen and (max-width: 980px) {
    .outerContainer {
        margin-top: 44px;
        background-size: cover;
        background-repeat: no-repeat;
    }
}

.switched .container {
    transition: background-color 0.6s;
}

strong {
    font-weight: bold;
}

img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

.container .hide {
    opacity: 0.0;
}

.container .invisible {
    display: none;
}

.container>* {
    opacity: 1.0;
    transition: opacity 1.0s;
}

/*
  Class applied to all choices
  (Will always appear inside <p> element by default.)
*/
.choice {
    text-align: center;
    line-height: 1.7em;
}

/* 
  Class applied to first choice
*/
:not(.choice)+.choice {
    padding-top: 1em;
}

/*
  Class applied to choice links
*/
.choice a {
    font-size: 15pt;
}

#controls>*:not(:last-child):after {
    content: " | ";
}

@media screen and (max-width: 980px) {
    #controls {
        z-index: 2;
        padding-top: 24px;
        top: 0;
        left: 0;
        right: 0;
    }
}