/* the following code is pulling two fonts from Google fonts. I've picked one (Lexend) 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=Lexend:wght@100..900');



/* 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: white; 				/* 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: white;				/* 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: "Lexend", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    letter-spacing: 1px;
}
    font-size: 30pt;
    margin-bottom: 10px;
}

.byline {					/* this is styling for your byline */
    font-style: italic;
    font-size: 14pt;
    font-family: 'Lexend';
    color: gray;
}

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

a {						/* this is for links */
    font-weight: 600;
    color: #c76186;
    transition: color 0.6s;
    text-decoration: none;
}

a:hover {					/* link hover styling */
    color: black;
    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: 'Lexend', sans-serif;
    text-align: center;
    font-weight: 700;
    position: fixed;
    display: block;
    width: 100%;
    background: white;				/* 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 (except for the color--see below) */
    z-index: 4;
    font-size: 9pt;
    text-align: center;
    font-family: 'Lexend', sans-serif;
    padding-bottom: 6px;
    position: fixed;
    right: 14px;
    top: 4px;
    user-select: none;
    background: white;				/* if you change the color of the top bar, make sure to change this too */
    transition: color 0.6s, background 0.6s;
    cursor: pointer;
}

#controls a {					/* color of the restart, save, load, and theme buttons */
    color: #c76186;
    font-weight: 500;
}

#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 h2 {					/* byline */
    color: #ACACAC;
}

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

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

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

.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 a {				/* color of the restart, save, load, and theme buttons */
    color: #FFAECA;
}

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


/* dark mode styling ends here */


.choice {					/* styling for choice text. font is inherited from the "p" element */
    text-align: center;				/* default is for choice text to be centered */
    line-height: 1.7em;
}

.choice a {					/* styling for choice links */
    font-size: 15pt;
    font-weight: 500;	
			/* default is for choice link text to be slightly larger than regular text */
}


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


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

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;
}

#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;
    }
}