/* ADVANCED OPTIONS -- CHANGE AT YOUR OWN RISK */

body {
    text-align: center;
}

#container {
    display: inline-block;
    text-align: center;
    margin: 15px;
    padding: 30px;
}

img {
    max-width: 100%;
}

#banner {
    margin-bottom: 15px;
}

#links-bar {
    margin-bottom: 15px;
    padding: 5px;
    display: flex;
    justify-content: center;
}

a.link-bar-link {
    transition-duration: 0.2s;
}

a.link-bar-link:hover {
    transition-duration: 0.2s;
}

span.link-bar-separator {
    margin: 0 20px;
}

#comic-page {
    margin-bottom: 20px;
}

#navigation-bar {
    display: flex;
    margin: 0 auto 20px auto;
    justify-content: center;
}

a.navigation-button, a.navigation-button-disabled {
    padding: 0 20px;
}

#blurb {
    display: inline-block;
    text-align: left;
    max-width: 100%;
    margin-bottom: 20px;
    padding: 15px 15px 10px 15px;
}

h1#post-title {
    margin-top: 5px;
    margin-bottom: 10px;
}

h3#post-date {
    margin-top: 1em;
    margin-bottom: 0.25em;
}

hr#post-body-break {
    margin: 1em 0;
}

#archives {
    display: inline-block;
    text-align: left;
}

.archive-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.archive-thumbnail {
    width: 100px;
    margin: 10px;
    text-align: center;
}

h2.archive-section {
    text-align: center;
}

.archive-thumbnail-page {
    margin-bottom: 2px;
}

.archive-thumbnail-title {
    font-weight: bold;
    margin-bottom: 5px;
}

.archive-thumbnail-post-date {
    font-style: italic;
    font-size: 0.8em;
}

#jump-to {
    margin-bottom: 15px;
}

a.chapter-links {
    margin-right: 10px;
}

#load-older {
    margin-bottom: 15px;
}

.cast-member {
    max-width: 100%;
    margin: 30px;
}

img.cast-member-picture {
    max-width: none;
    margin: 10px;
}

.cast-member-bio {
    text-align: left;
    margin: 5px;
}

/* Buttons */

.button {
    display: inline-block;
    font-weight: bold;
    padding: 10px 15px;
    border-radius: 1.2em;
    transition: ease 0.2s;
    text-decoration: none;
}
/* Column Layout */
.right-column-layout, .left-column-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
    grid-gap: 1rem;
    grid-template-rows: auto 1fr auto;
}

.right-column-layout .left-column, .left-column-layout .right-column {
    align-self: center;
    justify-self: center;
    grid-column: span 1;
}

.right-column-layout .right-column, .left-column-layout .left-column {
    align-self: center;
    justify-self: center;
    grid-column: span 2;
}

/* Infobox */
.infobox {
    display: block;
    padding: 10px 15px;
    border-radius: 0.2em;
    background-color: #ECF7FB;
}

/* Transcripts */

#transcripts-container {
    width: 100%
}

#transcript-panel {
    padding: 0 10px 10px 10px;
}

.transcript {
    display: none;
}

#language-list {
    vertical-align: top;
    padding: 10px;
}

#language-select {
    width: 100%;
}

/* Media Queries for responsive layouts */
@media screen and (max-width: 875px) {
    .right-column-layout .right-column, .left-column-layout .left-column {
        grid-column: span 1;
    }
}

/*
The CSS settings below are just a copy of the same settings found in your_content/themes/default/css/stylesheet.css
This is so that it's not required that you include a stylesheet.css in every theme. If you're using this file as a 
template to create your own CSS file, feel free to delete the settings below, or reuse them as you want.
 */

body {
    font-family: 'PT Sans', sans-serif;  /* The font of all the text on all pages */
    color: black;  /* The color of the font of most of the text on your website */
    background-color: white;  /* The color of the background behind everything */
    background-image: url("../../your_content/images/background_image.png");  /* The pattern on the background. Delete to change to a solid color
                                                       or replace with your own image to tile across your background. */
}

#container {
    max-width: 1000px;  /* The width of the main box that contains all content on the pages */
    background-color: white;  /* The background color of the main box */
    box-shadow: 5px 5px 10px lightgray;  /* If you change the background color of website, play with this or else it will look bad. */
}

a.link-bar-link {
    color: white;  /* The color of the links in your links bar */
    text-decoration: none;  /* Delete this line to put underlining on the links in your links bar */
}

a.link-bar-link:hover {
    color: black;  /* The color of the links in your links bar while the cursor is hovering over them */
}

a.navigation-button {
    color: rgb(190, 190, 190);  /* Color of the navigation bar hyperlinks */
    font-size: 1em;  /* Size of the navigation bar hyperlinks */
    text-decoration: none;  /* Delete this if you want your navigation links to be underlined */
}

a.navigation-button-disabled {
    color: rgb(69, 69, 69);  /* Color of the disabled navigation bar hyperlinks */
    font-size: 1em;  /* Size of the disabled navigation bar hyperlinks */
    text-decoration: none;  /* Delete this if you want your disabled navigation links to be underlined */
}

#blurb {
    width: 75%;  /* The maximum width of the blurb box. */
}

h1#post-title {
    color: black;  /* Color of the page title */
    font-size: 3em;  /* Font size of the post title */
}