:root{
    --bg-blue: #335177;
    --bg-darkblue: #10273f;
    --bg-lightblue: #789DCA;
    --lightgold: #fff8e0;
    --darkgold: #EACD6F;
    --darkergold: #7c6e40;
    --maroon: #982749;
}

.container.index {  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows:   [banner_row] auto 
                        [linksbar_row] auto
                        [navbar1_row]auto
                        [title_row] auto
                        [comic-main_row] auto
                        [navbar2_row]auto
                        [copyright_row]auto;
                        
  grid-auto-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
}
        .banner.index { grid-area: 1 1 2 2}
        .linksbar.index { grid-area: 2 1 3 2}
        #navbar1 { grid-area: 3 1 4 2}
        .comic_title { grid-area: 4 1 5 2}
        .comic { grid-area: 5 1 6 2} 
        #navbar2 { grid-area: 6 1 7 2 }
        .copyright.index { grid-area: 7 1 8 2}
        .comic_section{grid-area: 4 1 6 2}


.container.archive {  display: grid;
  grid-template-columns: 0.6fr 1.8fr 0.6fr;
  grid-template-rows: auto auto auto auto;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "banner banner banner"
    "linksbar linksbar linksbar"
    ". middle_block ."
    ". copyright .";
}
        .banner.archive         {grid-row: 1 / 2; grid-column: 1 / -1}
        .linksbar.archive       {grid-row: 2 / 3; grid-column: 1 / -1}
        .middle_block.archive   {grid-row: 3 / 4; grid-column: 2 / 3}
        .copyright.archive      {grid-row: 4/ -1; grid-column: 2 / 3}

.container.about {display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, auto);
    gap: 0px;
}
        .banner.about           {grid-row: 1 / 2 ;}
        .linksbar.about         {grid-row: 2 / 3 ;}
        .about_body             {grid-row: 3 / 4 ;}
        .copyright.about        {grid-row: 4 / 5 ;}

body {
    background-color: var(--bg-blue);
    color: white;
    font-family: 'Roboto', 'Futura', 'Helvetica', sans-serif;
}

.comic_title {
    text-align: center;
    justify-content: center;
    color: var(--lightgold);
    font-style: italic; }

.post-title{
   text-shadow: #00000078 2px 2px 2px;
}

.comic {
    text-align: center;
} 

.copyright{
    font-size: 12px;
    display: block;
    text-align: center;
    color: var(--bg-lightblue);
     text-shadow: #000000 2px 2px 2px;
    }

.comic_section{
    border:10px var(--bg-darkblue) solid;
    border-radius: 20px;
    padding:20px;
    grid-row: 4/6;
}


* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  }
.banner {
    background-color: var(--bg-lightblue);
    border-radius: 20px;
}

.linksbar {
    border-radius: 20px;
    background-color: var(--bg-darkblue);
    text-align: center;
    font-weight: bold;
    padding: 10px;
}

blockquote {
    background-color: var(--bg-darkblue);
    border-radius: 20px;
    line-height: 1.5;
    display: block;
    padding: 2em;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 80px;
    margin-right: auto;
    font-style: italic;
    max-width: 50vw;
    text-align: left;

}

span.citation {
    color: var(--bg-lightblue);
    font-weight: 100;
    font-style: normal;
    font-size: 0.8em;
    text-align: right;
}
span.citation::before{
    content: "-";
}

a {
    text-decoration: none;
}


.date {
    text-align: center;
}


a.outlink {
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
}

img.banner {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

.navbarstyle {
    margin: 5px;
    display: block;
    text-align: center;
    /*background: var(--maroon);*/

}

.navbarstyle a:visited {
    color: var(--darkgold)
}

a:link {
    color: var(--darkgold);
}

a:visited {
    color: var(--darkergold);
}

img.comic_img {
    margin-left: auto;
    margin-right: auto;
    max-width: 80vw;
    box-shadow: 10px 10px 42px 5px #00000078;
}

.middle_block {
    background-color: var(--bg-darkblue);
    width: 90vw;
    line-height: 1.2em;
    text-indent: 0em;
    border-style: solid;
    border-color: var(--darkergold);
    border-radius: 20px;
    border-width: 3px;
    padding: 10px;
}

.archive_sublist {
    background-color: var(--maroon);
}

.testclass {
    background-color: red;
}

.about_image_container{
    padding: 50px;
}

.about_image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 400px;
    transform: rotate(-8deg);
    box-shadow: #00000078 10px 10px 10px;
}