body
{
margin: 0;
background-color: #000;
color: #fff;
font: 23px/1.3 "Playfair Display", Georgia, serif;
letter-spacing: -1px;
text-align: center; /* later make sure that the .caption in non-image posts is properly aligned and dealt with */
}

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

a
{
color: #000;
text-decoration: underline;
}

a:hover, .question a:hover, .tagpageinfo a:hover, a:focus
{
color: #f00;
}

p
{
margin: 1.2em 0;
}

strong, b, h1, h2, h3, h4, h5, h6, nav a, p a, .question a
{
font-weight: 900;
letter-spacing: -1.5px;
}

nav a, .archive a
{
text-decoration: none;
}

nav, article .caption, footer
{
background-color: #fff;
color: #000;
}

nav ul
{
padding: 0.75em .15em .5em;
margin: 0 auto;
list-style-type: none;
text-align: center;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: center;
align-content: space-between;
max-width: 85vw;
}

nav li
{
/*display: inline-block;*/
padding: 0 2vw;
font-size: 1.2em;
flex: 0 0 auto;

/* this is to make sure a row of one item
 * with justify content as
 * space-between or space-around
 * still gets centered
*/
margin: 0.1em auto;

}

footer ul
{
list-style-type: none;
text-align: center;
padding: 0;
margin: 0;
}

footer li
{
display: inline-block;
margin: .25em .75em 1em;
}

footer a, .tagpageinfo a
{
color: #fff;
}

header strong, #extras-header span
{
visibility: hidden;
}

header strong
{
display: block;
width: 100%;
height: 100%;
}

header
{
background: url(tgod-titlelettering-withname.png) no-repeat center;
background-size: cover;
height: 30vmin; /* the logo will shrink based on width/height of the window, whichever is smaller, within these parameters... */
width: 30vmin;
max-height: 180px;
max-width: 180px;
min-height: 140px;
min-width: 140px;
margin: 0.8em auto;
}

#extras-header
{
background: url(tgod-titlelettering-extras.png) no-repeat center;
background-size: cover;
width: 150px;
height: 37px;
margin: -.5em auto 1.25em;
}

.gallery-thumbnail
{

	max-height: 200px;
}

.gallery-wrapper {
    width: 70vw;
    margin-left: -5vw;
}

.extras-container .extra
{
max-height: 100vh;
width: auto !important;
margin: 2em auto 4em;
}

.photoset-wrapper img
{
margin-bottom: 1em;
}

article img
{
max-width: 60vw;
height: auto !important;
}

#picturepost-wrapper, #textpost-wrapper
{
position: relative;
}

#picturepost-wrapper
{
margin-bottom: 2em;
}

/* NAV ARROWS */

a#prev, a#next, a#chapter-jump-ahead, a#chapter-jump-back
{
display: block;
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;
width: 10vw;
height: 60px;
position: absolute;
bottom: 0;
}

a#prev span, a#next span, a#chapter-jump-ahead span, a#chapter-jump-back span
{
visibility: hidden;
}

#picturepost-wrapper a#prev, #picturepost-wrapper a#chapter-jump-ahead { background-image: url(arrow-next.png); }
#picturepost-wrapper a#next, #picturepost-wrapper a#chapter-jump-back { background-image: url(arrow-prev.png); }

#textpost-wrapper a#prev { background-image: url(arrow-next-black.png); }
#textpost-wrapper a#next { background-image: url(arrow-prev-black.png); }

a#next, a#chapter-jump-back
{
left: 0;
margin-left: 5vw;
}

a#prev, a#chapter-jump-ahead
{
right: 0;
margin-right: 5vw;
}

a#next:hover, a#chapter-jump-back:hover { margin-left: 4vw; }
a#prev:hover, a#chapter-jump-ahead:hover { margin-right: 4vw; }

a#chapter-jump-ahead, a#chapter-jump-back
{
bottom: 135px;
}

a#chapter-jump-ahead:before, a#chapter-jump-back:before
{
    content: "";
    display: block;
    width: 100%;
    height: 29px;
    background-repeat: no-repeat;
    margin-top: -30px;
    margin-left: 4px;
}

a#chapter-jump-back:before { background-image: url(prevchap.png); }
a#chapter-jump-ahead:before { background-image: url(nextchap.png); }

#textpost-wrapper a#prev, #textpost-wrapper a#next
{
top: 3em;
}




/* COMIC PAGE CAPTION TREATMENT */

*::selection
{
background-color: #000;
color: #fff;
}

*::-moz-selection
{
background-color: #000;
color: #fff;
}

h1
{
font-size: 1.5em;
margin-top: .5em;
padding-bottom: .5em;
border-bottom: 4px solid;
}

h1:not(:first-of-type)
{
margin-top: 3em;
}

blockquote + p
{
border-top: 3px solid;
padding-top: 1em;
}

/* OTHER JUNK */

article .caption
{
padding: 3em 20vw;
margin-top: 1em;
}

h2
{
margin: 1.5em 0 0;
}

.date, .byline, .tags, footer, .logged-in-as
{
font-style: italic;
font-size: .6em;
letter-spacing: 0;
}

.tags
{
padding: .75em 0;
}

#taglist
{
padding: 0;
margin: 0;
display: inline-block;
list-style: none;
}

#taglist li
{
display: inline;
}

#taglist li:after
{
content: ", ";
}

#taglist li:last-of-type:after
{
content: ".";
}

.extra img {
    max-height: 100vh;
}

.date + blockquote
{
margin-top: 2em;
}

/* I think this CSS was specific to Tumblr

.viewnotes, #archives-back
{
font-size: 1.15em;
font-weight: 900;
}

.viewnotes a, #archives-back
{
display: inline-block;
text-decoration: none;
border-bottom: 3px solid;
}

.viewnotes:first-letter, #noteslist h2:first-letter
{
text-transform: uppercase;
}
*/

footer
{
background-color: #000;
color: #fff;
padding: 1em;
}

footer *::selection
{
background-color: #fff;
color: #000;
}

footer *::-moz-selection
{
background-color: #fff;
color: #000;
}

/* NOTES */

/* I think this CSS was specific to Tumblr

ol.notes
{
padding-left: 0;
list-style-type: none;
font-size: .75em;
}

#noteslist h2:only-child:before
{
content: 'Currently there are no ';
}

#noteslist h2:only-child:after
{
content: '.';
}

ol.notes li
{
width: 100%;
text-align: left;
margin: .6em 0;
position: relative;
}

ol.notes .avatar
{
width: 25px;
height: 25px;
border-radius: 3px;
margin: 0 .75em 0 0 !important;
float: left;
}

*/


#disqus_thread
{
margin-top: 3em;
}

/* ARCHIVE */

.archive-container, .archive-main-container
{
display: inline-flex;
flex-direction: column;
}

.archive-container
{
width: 46%;
margin: -.5em 2% 0;
}

.archive-container h2
{
margin-top: .5em;
}

.archive-main-container
{
width: 100%;
}

.archive-container h2 strong
{
display: block;
font-size: .65em;
}

.archive, .archive-main
{
list-style-type: none;
padding: 0;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.archive.standalone-archive
{
width: 45%;
}

.archive li, .archive-main li
{
display: inline-block;
}

.archive li a
{
font-family: "Old Standard TT", "Times New Roman", serif;
font-weight: bold;
display: inline-block;
background-color: #000;
color: #fff;
width: 50px;
padding: 10px 0;
margin: 5px 3px;
}

.archive li a:hover
{
background-color: #fff;
color: #f00;
}

.archive-main li
{
margin: .5em;
}

.archive-main li img
{
width: 15vw;
}

.archive-main li img:hover, img.gallery-thumbnail.extras:hover
{
transform: scale(1.05);
}

img.gallery-thumbnail.extras
{
margin: .5em;
}

h2 + .archive
{
margin-top: 1em;
}

.archive-main .cover
{
width: 13vw;
min-width: 200px;
}


/* OTHER THINGS */

.about-illust
{
float: left;
width: 40%;
margin-right: 4%;
margin-top: 0 !important;
margin-bottom: 1em;

}

.about-illust-container-text
{
text-align: left;
font-size: .95em; /* this is almost imperceptible but looks right next to the picture */
margin-left: 44%;
}

.about-illust-container-text + h2
{
clear: both;
margin-top: 1em;
}

.illust-container-small + p
{
margin-left: 34%;
}

.illust-nonround
{
border-radius: 0 !important;
width: 30% !important;
}

#aboutquote
{
clear: both;
background-color: #000;
color: #fff;
font-size: .85em;
font-style: italic;
margin: 3.5em 0 0;
padding: 2.5em;
}

#aboutquote p
{
margin: 0;
}

/* I think this CSS was specific to Tumblr

.caption.text iframe
{
width: 100%;
}

.caption.text img
{
margin-top: 1em;
}

.question
{
background-color: #000;
color: #fff;
margin-top: 1em;
padding: 1em;
font-size: .75em;
}

.question a
{
color: #fff;
}

.tagpageinfo
{
width: 40vw;
font-size: .75em;
margin: 0 auto;
}

.tagpageinfo + article.photo, .tagpageinfo + article.photoset
{
margin-top: 1em;
}

.likereblog *
{
fill: #000;
float: left;
width: 1.5em;
}

.likereblog
{
height: 1em;
margin: .2em auto;

width: 4.7em;
}

.permalink-button
{
font-family: Verdana, Georgia;
font-size: 1.25em;
font-weight: 900;
margin-left: .65em;
margin-top: -.4em;
text-decoration: none;
width: auto;
}

blockquote p:first-child
{
margin-top: -1em;
}
*/


/***** SUPPORT PAGE *****/

#support-container div
{
display: inline-flex;
flex-direction: column;
font-size: .8em;
width: 25%;
margin-top: 1em;
}

#support-container div:not(:last-of-type)
{
margin-right: 9%;
}

#support-container img
{
width: 100%;
}

/** 404 **/

#error-page-wrapper
{
width: 45vw;
margin: 1em auto 0;
}

#error-back a
{
color: #fff;
font-weight: bold;
text-decoration: none;
}

#error-back a:hover
{
color: red;
}

/**** SUBSCRIBE FORM ****/

#subscribe-page
{
background-color: #d3c3b4;
color: #000;
}

#subscribe-page-wrapper
{
width: 85vw;
margin: 0 auto;
}

#subscribe-page img, #error-page img
{
width: 100%;
margin: 0 auto;
}

#subscribe-page h2
{
margin-top: 0;
}

#mc_embed_signup
{
width: 80vw;
margin: 0 auto;
}

#mc_embed_signup label
{
display: block;
margin-bottom: 1em;
font-weight: normal;
}

#mc_embed_signup .email, input, textarea
{
font: 18px/1.3 "Playfair Display",Georgia,serif;
}

#mc_embed_signup .email
{
border: 0;
padding: .5em 1em;
width: 50vw;
text-align: center;
}

input::selection, textarea::selection
{
background-color: #000;
color: #fff;
}

input::-moz-selection, textarea::moz-selection
{
background-color: #000;
color: #fff;
}


#mc-embedded-subscribe
{
color: #fff;
background-color: #000;
font: bold 20px/1.3 "Playfair Display",Georgia,serif;
border: 0;
padding: .7em 2em;
cursor: pointer;
margin-top: 1.25em;
}

#mc-embedded-subscribe:hover
{
outline: 4px solid #000;
outline-offset: 4px;
}

#mc-embedded-subscribe:active
{
outline: 4px solid #fff;
background-color: #fff;
color: #000;
}

#subscribe-back
{
margin-top: 2.5em;
font-size: .7em;
}

#subscribe-back a:hover
{
color: #000;
}

#book-mobile
{
display: none;
}

/* LATEST UPDATES */

#latestupdates
{
position: absolute;
top: 90px;
text-align: left;
font-size: 15px;
letter-spacing: -.1px;
padding-left: 1.75em;
}

#latestupdates a
{
color: #fff;
text-decoration: none;
}

#latestupdates a:hover
{
border-bottom: 1px solid #fff;
}

#latestupdates h1
{
border-bottom: 0;
letter-spacing: 0;
margin-bottom: 0;
}

#latestupdates ol
{
padding-left: 1em;
margin-top: .25em;
list-style-type: square;
}

#latestupdates li
{
margin-bottom: .2em;
}


/****** UNDER COMIC AND SIDEBARS *******/

#under-comic
{
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: stretch;
	
background: #FFF;
color: #000;
padding: 3vw 3vw 1vw;
}

.side
{
flex: 0 0 14vw;
font-size: .6em;
letter-spacing: -.5px;
}

#side-left
{
order: 1;
}

#caption
{
flex: 0 0 59vw;
order: 2;
padding: 1em;
}

#side-right
{
order: 3;
}

.side img
{
width: 95%;
margin-bottom: .5em;
max-width: 45vw !important;
max-height: 90vh !important;
object-fit: contain; /* preserve the aspect ratio within the constraints above */
}

.side img:hover, .side img:focus
{
outline: 4px solid #000;
outline-offset: 4px;
}

.side img.no-hover:hover, .side img.no-hover:focus
{
outline: none;
}

.sidebar-intro
{
margin: 0.7em 0 2.5em;
}

.sidebar-intro b
{
letter-spacing: -.5px;
}

.side ul
{
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-left: 0;
list-style-type: none;
}

.side .buttons-large img
{
	box-sizing: border-box;
}

.side-left-buttons-wrapper p
{
margin-bottom: .5em;
}

.side-left-buttons-wrapper b
{
letter-spacing: -.5px;
}


.side-left-buttons-small
{
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 auto;
width: 95%;
}

.side-left-buttons-wrapper
{
margin: 1em 0 2.4em;
}

.side-left-buttons-small a
{
display: inline-block;
background-color: #000;
color: #fff;
text-decoration: none;
padding: 0 .5em .1em;
margin: .25em;
line-height: 1.5;
font-weight: bold;
}

.side-left-buttons-small a:hover
{
color: red;
background-color: #fff;
}

.side-mobile
{
display: none;
}

#side-right p
{
margin-top: .5em;
}

#side-right p a
{
font-weight: normal;
letter-spacing: -.5px;
}

.side-right-cons
{
border-bottom: 4px double;
padding-bottom: 1em;
margin-bottom: 2em;
text-align: left;
}

.side-right-book
{
margin: 0.5em auto 0;
max-width: 300px;  /* set based on the size of the image */
}

.side-cons-mobile h2
{
margin-top: -.5em;
}

.store-wrapper img
{
float: left;
margin-top: 0 !important;
margin-right: 2.5em;
width: 30%;
}

.store-wrapper
{
text-align: left;
margin: 2em 0 5em;
}


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


/* RESPONSIVITY: Changes that always happen when the window is smaller - pink mode */


@media all and (max-width: 1115px) {

#under-comic
{
/* background-color: pink; */
flex-flow: row wrap;
}

article img
{
max-width: 95vw !important;
}

a#prev, a#next
{
bottom: 0em !important;
margin-bottom: -4.5em !important;
width: 30vw;
height: 100px;
margin-top: 2px;
}

a#chapter-jump-ahead
{
display: none;
}

#picturepost-wrapper
{
margin-bottom: 5em !important;
}

.archive-container, .standalone-archive
{
width: 100% !important;
}

.archive-container
{
margin: 0 !important;
}


article .caption
{
/* this reduces the empty space in the archive, so to fit more chapters */
padding: 3em 5vw;
margin-top: 0;
}

#caption
{
flex: 1 1 auto;
order: 1;
}

.side
{
flex: 0 1 48%;
}

.side, .date, .byline, .tags, footer, .logged-in-as, #taglist a, footer li
{
font-size: 0.8em;
}

#side-left
{
order: 2;
}

#side-right
{
order: 3;
}

.side-right-cons
{
text-align: center;
}

.about-illust
{
float: none;
width: 60%;
}

.about-illust-container-text
{
margin-left: 0;
}

.side-mobile
{
display: inline-block;
}

.side-desktop
{
display: none;
}

nav ul
{
/* Now that the windows is narrower
 * there is less need for space on
 * the outer sides of
 * the menu (padding covers it instead)
 * and it can take the full width
 */
justify-content: space-between;
max-width: 100vw;
}

.gallery-thumbnail
{
max-height: 300px;
}

.archive-main li img
{
width: 35vw;
}

.archive li a
{
width: 100px;
padding: 20px 0;
font-size: 1.2em;
}

footer li
{
margin-bottom: 0em;
}


}

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

@media all and (max-width: 880px) {

/*
#under-comic
{
	background-color: lightblue;
}
*/

body
{
font-size: 1.2em !important;
}

nav li
{
font-size: 1.0em !important;

/* this lets the dividers be centered between items */
flex: 1 1 auto;
position: relative;
text-align: center;
}

nav li + li
{
	/* this adds the divider between items */
	/* use alpha channel for sneaky trick */
	border-left: 1px solid rgba( 0, 0, 0, 0.3);
}

nav ul
{
	/* this sneakily hides the unneeded border on new lines */
	box-shadow: inset 5px 5px 0px black, inset -5px 0px 0px black;
	/*outline: 5px solid black;
	outline-offset: -5px;*/
}

/* RESPONSIVITY Changes that always happen when the window is super tiny - green mode */

@media all and (max-width: 500px) {

/*
#under-comic
{
	background-color: lightgreen;
}
*/

.side {
    flex: 0 0 100%;
}

.side ul.buttons-large li
{
flex: 1 0 50%;
}


.side-right-cons
{
border-top: 4px double; /* Since something is above it, it needs a top border now */

}

}