html { background-color: #330011; }

body { 
    max-width: 33em;
    background-color: #fff8d8;
    margin: auto;
    font-family: 'Asap', sans-serif;
}

h1 {
    font-size: 2em; 
    font-family: 'Coustard', serif;
}

h2 {
    font-size: 1.5em;
    font-family: 'Coustard', serif;
    margin-left: -0.45em;
}

h3 { 
    font-weight: bold;
    font-family: 'Coustard', serif;
}

p, blockquote { 
    text-align: justify; 
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    hyphens: auto;
}

aside { 
    display: block;
    width: 9em;
    background-color: #e8e0c8;
    line-height: normal;
    position: absolute;
    padding: 0.2em;
    left: -11em;
    top: 4em;
    font-size: 80%;
}

nav {
    display: block;
    background-color: #663344;
    color: white;
    width: 6em;
    padding: 0.2em;
    position: fixed;
    top: 1em;
    right: 1em;
    z-index: 10;
}

blockquote {
    border-left: 0.5em solid #e8e0c8;
    padding-left: 1em;
}

#resume {
    position: relative;
    display: block;
}

#resume  a.download, #games a.playgame {
    display: block;
    color: white;
    background-color: #663344;
    margin-bottom: 1.618em;
    max-width: 15em;
    padding: 0.25em;
    text-align: center;
    text-decoration: none;
    box-shadow: 0.25em 0.25em 0.1em 0.1em #666666;
    behavior: url(css/PIE.htc);
}

#resume  a.download:hover, #games a.playgame:hover {
    position: relative;
    top: 0.1em;
    left: 0.1em;
    box-shadow: 0.15em 0.15em 0.1em 0.1em #666666;
    behavior: url(PIE.htc);
}

#games ul, #writing ul { margin-left: 0; }

#games li , #writing li {
    list-style: none;
    margin-left: 0;
}

#games .screenshot { 
    float: right;
    margin-left: 0.5em;
    width: 12em;
    height: 24em;
    overflow: hidden;
    position: relative;
}

#games .screenshot img { 
    min-width: 400px;
    min-height: 400px;
    width: 100%;
    /*display: block;*/
    position: absolute;
    bottom: 0;
    right: 0;
    border: none;
}

#games #passing .screenshot img { right: -85px; }
#games #beneath .screenshot img { right: -75px; }

#games span.nogame { display: none; }

/* "Baby-bear" narrow screen layout
-----------------------------------*/
@media screen and (max-width: 30em) {

#games .screenshot {
    float: none;
    margin: auto;
    width: 100%;
    height: 10em;
    max-width: 400px;
    
    /*height: auto;*/
}

#games #looming .screenshot img { bottom: -65px; }
#games #passing .screenshot img { bottom: -95px; right: 0;}
#games #beneath .screenshot img { bottom: -120px; right: 0; }

nav {
    width: auto;
    padding: 0.2em;
    margin: auto;
    margin-bottom: 1em;
    position: static;
    text-align: center;
}

nav ul li { display: inline; }

nav ul li::after { content: " §"; }
nav ul li:last-child::after { content: ""; }

}

/* "Papa-bear" wide screen layout
-----------------------------------*/
@media screen and (min-width: 63.236em) {

body { max-width: 48em; }

#games li, #writing li {
    position: relative;
}

#games .screenshot {
    float: none; 
    position: absolute;
    left: 31em;
    top: 0;
    width: 22em;
    height: 18em;
}

#games #looming .screenshot img { bottom: -30px; }
#games #passing .screenshot img { bottom: -50px; right: -25px;}
#games #beneath .screenshot img { right: 0; }

}

/* Bending the rules for Goldilocks a bit, this moves asides into the main content if there's not enough room for them and hides games.
-----------------------------------*/
@media screen and (max-width: 48em) {

aside {
    position: static;
    width: 100%;
    margin-bottom: 1em;
}

blockquote {
    border-left: 0.5em solid #e8e0c8;
    padding-left: 0.25em;
    margin-left: -0.5em;
}

#cboxOverlay, #colorbox { display: none !important; } /* Makes games not appear in semi-narrow layout. */
#games a.playgame { display: none; }
#games .screenshot a { cursor: pointer; }
#games span.nogame { 
    display: inline; 
    font-style: italic;
}
}


/* Latex logo styling from Edward O'Connor at http://edward.oconnor.cx/2007/08/tex-poshlet
-----------------------------------*/
.latex sub, .latex sup {
  text-transform: uppercase;
}

.latex, .tex sub, .latex sub {
  font-size: 1em;
}

.latex sub {
  vertical-align: -0.5ex;
  margin-left: -0.1667em;
  margin-right: -0.125em;
}

.latex sup {
  font-size: 0.85em;
  vertical-align: 0.15em;
  margin-left: -0.36em;
  margin-right: -0.15em;
}