/*Grid stuff below sets up the grid layout: 3 columns (half the width taken up by the main content and banner, and the other half
by the two sidebars), and 3 automatically sized rows.*/
body {
    background-image: url(/images/warrensofhonkbackground.png);
    color: black;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto auto auto
}

.top {
    color: black;
    margin: 0 auto;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    width: 100%;
  }

.item {
    margin: auto
}

img[src="/images/thewarrens.png"] {
    display: flex;
    width: 100%;
  }

.navbar {
    width: auto;
    background-color: black;
    display: flex;
    padding: 10px 0;
    text-transform: uppercase;
    margin-top: 0;
}

/*Removes the underlines beneath the links in the navigation bar.*/
a,
.navbar {
    text-decoration: none
}

.item
a {
    color: white
}

.item
a:hover {
    text-decoration: underline
}

/*Grays out works-in-progress.*/
.wip {
    color:gray
}

main {
    background-color: white;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
}

article {
    outline-style: solid;
    outline-offset: -3px;
    padding: 25px 25px 25px 25px;
    margin-top: 0px;
    text-align: justify;
    line-height: 1.5;
    font-size: .9375em;
}

/*Makes the article title nice and chunky and adds a cool little border (that sort of breaks when you resize the browser window).
Padding on the span increases the space on either end of the border between it and the beginning/end of the article title.*/

/*Note: I've removed the border for now because it looks terrible. If future me wants to put it
back or, better yet, modify it, he can remove the comment characters to do so.*/

/*article
h1
span {
    padding: 0px 10px 0px 10px;
    border-style: solid;
    border-width: 0px 0px 2px 2px
}*/

/*Note to self: I've changed the line-height below from 1 to 1.2 as of 22/12/2024 in order to
make the headers look better. It has been many months since I've messed with this code and so
have no idea if this will break any headers elsewhere, even though they shouldn't because h1
only occurs within articles in one specific spot (the title). If they do break, though, change 
the value below back to 1. You dumbass.*/

article
h1 {
    margin-top: 0;
    font-size: 2.5em;
    line-height: 1.2;
    text-align: left;
    text-shadow: 2px 2px #8eaece
}

.description {
    color: gray;
    font-size: smaller
}

/*Article image parameters: 
Resizes (via max-width and height) and centers (via margin-left and margin-right) images contained within the article.
Also, grays out, centers, and resizes the image captions. Line-height affects (in this case, increases) the space between the caption lines.*/
figure
img {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
  display: flex
}

figure
figcaption {
  color: gray;
  text-align: center;
  font-size: 80%;
  line-height: 2;
}

/*The thing below adds some padding above the comment box so it doesn't look squished against the
category list.*/
.commentbox {
    padding-top: 25px
}

aside {
    font-size: smaller
}

aside .gray {
    background-color: rgb(0, 0, 0, .33);
    padding: 15px 25px 10px;
    color: white;
}

aside .gray strong {
    font-size: 1.1em
}

.left {
    order: -1;
    margin-top: 10px;
    text-align: center;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
}

.left
span {
    font-size: 1.4em;
    padding: 0px 5px 0px 5px;
    border-style: solid;
    border-width: 0px 0px 1px 1px
}

.left
img {
    display: flex;
    margin: 0 auto;
    max-width: 200px;
}

.right {
    margin-top: 10px;
    padding: 25px;
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
}

.right
a {
    color: white;
    text-decoration: underline
}

.right
a:hover {
    text-decoration: none
}

.right
a:visited {
    color: lightgray
}

footer {
    color: gray;
    margin: 10px auto;
    text-align: center;
    font-size: smaller;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;
}

/*The media query below is for mobile. When the viewport is < 1024px it moves both of the sidebars 
to the bottom of the page and resizes each element to take up 100% of the screen's width.*/

@media (max-width: 1023px) {
    * {
        max-width: auto
    }

    body {
        display: grid;
        grid-template-columns: 0fr 1fr 0fr;
        grid-template-rows: auto auto auto auto auto
    }

    .top {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
    }

    .navbar {
        font-size: medium;
        display: flex;
        margin: 0 auto;
    }

    img[src="/images/thewarrens.png"] {
        width: 100%;
        height: auto;
        display: flex;
    }

    main {
        display: flex;
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 3;
        outline-style: none;
        max-width: 100%;
    }

    /*The original margin value makes the navigation unusable when the media query triggers. The margin value below fixes that.*/

    article {
        outline-style: none;
        margin: 0 auto
    }

    article
    h1 {
        padding-top: 0px;
    }

    .aside {
        font-size: medium;
    }

    .left {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 3;
        grid-row-end: 4;
    }

    .right {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 4;
        grid-row-end: 5;
    }

    footer {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 5;
        grid-row-end: 6
    }
}

/*This section sets up the archive page list.*/

.postlist {
    display: grid;
    grid-template-rows: auto auto auto auto auto auto;
}

.post {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    grid-template-rows: auto auto;
    margin: 10px 0;
    padding: 5px 0;
    border-style: solid;
    border-width: 1px 0;
}

.post
strong {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 3;
    font-size: 1.2em;
    text-align: left
}

.post
img {
    display: flex;
    justify-content: center;
    max-width: 250px;
    height: auto;
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 2
}

.post
p {
    text-align: left;
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3;
    margin-left: 10px;
}

.signpost {
    grid-row-start: 6;
    grid-row-end: 7;
    margin: 0 auto;
}

.signpost
ul {
    display: flex;
    list-style-type: none;
    margin: 0 auto; 
    padding: 0;
}

.signpost
li {
    margin: 0 5px;
}

/*The stuff below is for the 404 page only.*/

.block {
    display: block
}

.notfound {
    text-align: center;
    font-size: 3em;
    color: red;
}

.notfoundtext {
    margin: 0 auto;
    font-size: 2em;
    text-align: center
}

.notfoundimg {
    margin: 0 auto;
    display: flex
}