/*
Standard CSS file for use with the Redux template (adapted from the default Standard template).
*/

/*
Here are the default variables.
*/

:root {
  --redux-system-font-stack: system-ui, sans-serif;
}

/*
This is how auto dark mode is set.
*/

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}

/*
This section was originally uncommented.
*/

:root {
  font-family: var(--redux-system-font-stack);
  font-size: 100%;
  -webkit-text-size-adjust: none;
}

.container {
  margin: 2em auto auto auto;
}

/*
Paragraph features defined here apply without distinction to blurb and
source paragraphs. 
*/

p {
  font-size: 1em;
  line-height: 1.4;
}

/*
Here we get rid of underlining for links, and provide a more subdued 
color scheme than the bright-blue HTML standard. 

Best color schemes are likely to vary depending on cover art.
*/

a,
a:link {
  text-decoration: none;
}

a {
}

a:hover {
}

a:visited {
}

.coverimage {
  width: 12.6em;
  margin: 2em auto auto 1em;
  float: left;
  clear: left;
  text-align: right;
}

.coverimage img {
  width: 100%;
}

/*
Here we make invisible the one-pixel border that currently goes around
the cover image. 
*/

.coverimage a {
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  color: transparent;
}

/*
The introduction formatting applies to the title, author name, and release
number, here presented at the top of the page. 

To change the appearance of specific elements, tweak

	h1 for the title
	h2 for the author name
	.bibliography for the release information
*/

.introduction {
  padding: 2.4em 0 0 0;
  margin: auto auto auto 15.4em;
  width: 33em;
  line-height: 1;
  text-align: left;
}

/*
These set the sizes for the title (h1) and the author name (h2). 

The ideal font-size for h1 may vary quite a bit depending on how long the 
game's title is: larger for one-word titles, smaller for longer titles.

Should we wish to remove the title entirely and allow the cover art alone
to represent the game, we need only add the line "display: none;" to the
definition of h1.
*/

h1 {
  font-size: 2em;
}
h2 {
  font-size: 1em;
  line-height: 0.25;
}

/*
The about formatting applies to blurb information.
*/

.about {
  margin: 2.8em auto auto 15.4em;
  width: 33em;
  text-align: left;
}

/*
By setting about p and about p + p, we instruct the first paragraph of the
blurb to be unindented but subsequent paragraphs to be indented a small 
distance. 
*/

.about p {
  margin: auto auto 0 auto;
}

.about p + p {
  text-indent: 1.4em;
  margin: 0 auto auto auto;
}

/*
Playinfo affects the paragraph at the bottom of the home-page that supplies
the IFID for the game and suggests interpreters for the author to use.
*/

.playinfo {
  margin: 1em 0 0 15.4em;
  width: 33em;
}

.playinfo p {
  font-size: 0.75em;
}

/*
The links formatting applies to the story file and auxiliary links found
on the home page, and to the Contents, Next, and Previous links on the 
source pages. Here we arrange for them to appear in a column at the left
side of the page. 
*/

.links {
  width: 13em;
  float: left;
  clear: left;
  text-align: right;
  margin: 2.8em auto auto auto;
}

.links li {
  list-style-type: none;
  list-style-position: default;
  padding: 0.4 em;
}

/*
The filetype id applies only to the little (blorb), (pdf), and similar
denotations found on the links. Here we make these appear smaller than the 
surrounding text. In order to get rid of them entirely, we would add 
"display: none;" to our filetype definition. 
*/

span.filetype {
  font-size: 0.5em;
}

/*
Source formatting applies to the source text on generated pages. 
*/

.source {
  margin: 1.4em auto auto 15.4em;
  width: 33em;
  line-height: 1.4;
}

.sourceintroduction {
  margin: auto auto auto 15.4em;
  width: 33em;
}

.sourceintroduction h1 {
  padding: 2.8em 0 0 0;
  font-size: 1em;
  line-height: 1;
  text-align: right;
  text-decoration: none;
  font-weight: normal;
  font-style: italic;
}

.sourceintroduction h2 {
  display: none;
}

.sourcecoverimage {
  width: 12.6em;
  margin: 2em auto auto 1em;
  float: left;
  clear: left;
  text-align: right;
}

.sourcecoverimage img {
  width: 100%;
}

/*
Here we make invisible the one-pixel border that currently goes around
the cover image. 
*/

.sourcecoverimage a {
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  color: transparent;
}

.sourcebibliography {
  display: none;
}

span.quote {
}

span.comment {
}

span.substitution {
  font-variant: small-caps;
}

span.i6code {
  font-family: monospace;
}

span.columnhead {
  font-style: italic;
  font-size: 1em;
}

span.heading {
  font-weight: bold;
}

.source td {
  padding: 0.7em 1.4em 0.7em 0;
  font-size: 0.75em;
  text-align: left;
  vertical-align: top;
}

/*
We could alter the following in order to make the footnote links in the source
text appear different from other links, but otherwise they will be the same
color as other links -- which is fine as a default.
*/

span.notecue {
  font-size: 0.75em;
  vertical-align: super;
}

/*
Here we tell the elements of the table of contents not to be listed with
bullets because this tends to produce considerable visual clutter especially
with large project files. 
*/

.source li {
  list-style-type: none;
  list-style-position: default;
}

/*
Notes applies to footnotes on the source text. 
*/

.notes {
  margin: auto auto auto 16.8em;
  width: 33em;
}

.notes p {
  text-indent: -1.4em;
  font-size: 0.75em;
}

.notesheading {
  font-style: italic;
}

p.indent0 {
  margin: 0 0 0 0;
}

p.indent1 {
  padding: 0 0 0 2.8em;
  text-indent: -0.7em;
  margin: 0 auto 0 auto;
}

p.indent2 {
  padding: 0 0 0 5.6em;
  text-indent: -0.7em;
  margin: 0 auto 0 auto;
}

p.indent3 {
  padding: 0 0 0 8.4em;
  text-indent: -0.7em;
  margin: 0 auto 0 auto;
}

p.indent4 {
  padding: 0 0 0 11.2em;
  text-indent: -0.7em;
  margin: 0 auto 0 auto;
}

p.indent5 {
  padding: 0 0 0 14em;
  text-indent: -0.7em;
  margin: 0 auto 0 auto;
}

p.indent6 {
  padding: 0 0 0 16.8em;
  text-indent: -0.7em;
  margin: 0 auto 0 auto;
}

p.indent7 {
  padding: 0 0 0 19.6em;
  text-indent: -0.7em;
  margin: 0 auto 0 auto;
}

p.indent8 {
  padding: 0 0 0 22.4em;
  text-indent: -0.7em;
  margin: 0 auto 0 auto;
}

p.indent9 {
  padding: 0 0 0 25.2em;
  text-indent: -0.7em;
  margin: 0 auto 0 auto;
}

/*
Styles for play.html
*/

.play .coverimage {
}

.play .metadata {
  text-align: center;
}

.play .links .download li:before,
.play .links .auxiliary li:before {
  content: "|";
}

.play .links {
  display: inline-block;
  width: unset !important;
  float: unset !important;
  clear: unset !important;
  text-align: unset !important;
  margin-block: 0;
}

.play .links ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-inbetween;
  margin: 0;
  padding: 0;
}

.play .interpretercredit {
  inset: auto 50% 1ch auto;
  font-size: 75%;
  position: fixed;
}

.play #gameport {
  inset: 8ch 0 3ch 0;
  line-height: 1.4;
  margin: 0;
  position: absolute;
}

/*
Styles for mobile browsers: change to a one-column layout.
*/

@media screen and (max-device-width: 480) {
  .coverimage,
  .introduction,
  .links,
  .about,
  .playinfo,
  .source,
  .sourceintroduction,
  .sourcecoverimage,
  .notes {
    float: none;
    margin: auto auto auto 1em;
    text-align: left;
  }

  .play .metadata,
  .play .coverimage,
  .play .links,
  .play .interpretercredit {
    display: none;
  }

  .play #gameport {
    inset: auto auto auto 0;
    width: auto;
  }
}