/*

Museum

By: Colin Devroe
http://cdevroe.com


My portfolio theme inspired by the world's best museum websites. I wrote this 
stylesheet myself - which is why it is an absolute mess.

Version: 20221215
*/

body {
    overflow-x: hidden;
    background-color: #fff;
    color: #000;
    font-size: 1em;
    font-family: Arial, Helvetica, sans-serif;
}

a, a:visited {
    color: #2C497F;
}

.tags a {
    color: #6d6d6d;
    text-decoration: none;
}

/* Layout */
main {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.content {
    margin-top: 50px;
    
}

footer {
    margin-top: 50px;
    padding: 30px;
    background-color: #7dd256;
    color: #fff;
}
.footer-content {
    max-width: 1200px; margin: 0 auto;
}
.footer-content a, .footer-content a:visited { color: #fff; }

header ul, ul.sub-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
header ul li, ul.sub-menu li {
    display: inline;
    padding-right: 20px;
    font-weight: bold;
}

ul.sub-menu li {
    font-size: 1.5em;
}

ul.sub-menu li a, ul.sub-menu li a:visited {
    text-decoration: none;
    color: #000;
}

ul.sub-menu.filter-by li {
    font-size: 1.1em;
}

header ul.topMenu {
    position: relative;
    top: 10px;
}

header ul li a {
    text-decoration: none;
}

header ul li a.active {
    text-decoration: underline;
}

.home .about {
    padding: 50px;
    background-color: #2C497F;
    color: #fff;
}

.home .about h2 {
    font-size: 3.5em;
    line-height: 1em;
    margin: 0px;
}

.home .about p {
    max-width: 60%;
    font-size: 1.5em;
}

@media screen and (max-width: 480px) {
    .home .about {
        padding: 25px;
    }
    
    .home .about h2 {
        font-size: 2em;
    }
    
    .home .about p {
        max-width: 100%;
    }
}

.home section.featured-podcast { margin-bottom: 100px; }

.home section .featured-podcast-grid {
    display: grid;
    grid-template-columns: .5fr 1fr;
    grid-template-rows: 1fr;
    column-gap: 50px;
}

.featured-podcast-grid h3 {
    font-size: 2em;
}

@media screen and (max-width: 480px) {
   
    .featured-podcast-grid h3 {
        font-size: 1.25em;
    }

    .featured-podcast-grid figure {
        max-width: 100%;
        width: 120px;
        margin: 5px;
    }
}

.posts {
    margin-top: 100px;

}
.post-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.post {
    max-width: 800px;
}

img {
    max-width: 100%;
    height: auto;
}
@media screen and (max-width: 480px) {
    img {
        max-width: 350px; /* TODO: Do I have to specify a pixel count? */
    }
    .post-grid img {
        max-width: 100%;
    }
}

/* Style */
header h1 {
    font-size: 3.5em;
}
    @media screen and (max-width: 480px) {
        header h1 {
            font-size: 2.5em;
        }
    }
header ul li {
    font-size: 1.5em;
}

    @media screen and (max-width: 480px) {
        header ul li {
            font-size: 1.5em;
        }

    }
.content h2 {
    font-size: 3.75em;
    max-width: 800px;
}
@media screen and (max-width: 480px) {
   .content h2 {
       font-size: 2em;
       max-width: 100%;
   }
}
.single-post .content h2 {
    margin-bottom: 50px;
}

.number_of_comments {
    display: block;
    font-size: 0.75em;
    color: #6d6d6d;
}

.status-date {
    font-size: 0.75em;
}
.single-post .status-date {
    font-size: 1.1em;
}

.post {
    font-size: 1.5em;
    line-height: 1.3;
}
@media screen and (max-width: 480px) {
    .post {
        font-size: 1.35em;
    }
}
.post-date {
    font-size: 1.5em;
    color: #808080;
}

.post-meta-grid {
    margin-top: 100px;
}

.post h2 {
    clear: both;
    padding-top: 100px;
    padding-bottom: 0px;
    margin-bottom:0px;
    font-size: 1em;
    width: 100%;
    max-width: 100%;
}

h2.sub-title {
    font-size: 2em;
    margin: 100px 0px;
}

.single-portfolio h2 {
    font-size: 1.5em;
    margin-bottom: 0px;
}

.content h2.page-title, .content h2.page-title {
    font-size: 3em;
    width: 100%;
    max-width: 100%;
}

.date-created {
    font-size: 0.9em;
    font-style: italic;
}

.single-portfolio .post, .post-type-archive-portfolio .post {
    width: 100%;
    max-width: 100%;
    margin-bottom: 200px;
}

.blog .post, .archive .post, .search-results .post {
    margin-bottom: 150px;
}

.content.single-post {
    margin-top: 100px;
}
.content.single-post .post {
    margin-top: 100px;
    margin-bottom: 200px;
}

@media screen and (max-width: 480px) {
    .content.single-post {
        margin-top: 50px;
    }
    .content.single-post .post {
        margin-top: 0px;
    }
}
.single-format-standard .content .post {
    margin-top: 100px;
}

/* Use Grid for Images too */
.post-grid {
    display: grid;
    align-items: start;
    grid-template-columns: repeat(6, 160px);
    column-gap: 40px;
    row-gap: 100px;
    grid-template-rows: repeat(1fr);
}
.post-grid figure {
    max-width: 160px;
    margin: 0px;
}
@media screen and (max-width: 480px) {
    .post-grid {
        display: grid;
        align-items: start;
        grid-template-columns: repeat(2, 160px);
        column-gap: 20px;
        row-gap: 100px;
        grid-template-rows: repeat(1fr);
    }

    .post-grid figure {
        max-width: 100%;
        margin: 0px;
    }
    
}
/* End use Grid */

.post-grid figure.is-type-video {
    width: 640px;
    max-width: 640px;
}

.post-grid.show-large {
    display: block;
}

.page .post figure, .blog .post figure, .single-post .post figure, .post-grid.show-large figure, figure.show-large {
    max-width: 800px;
    margin: 0 auto 60px auto;
}
.featured-portfolio img, .featured-podcast img {
    max-width: 100%;
}
/* .page .post img {
    width: 100%;
    max-width: 100%;
} */

.post figure:first-child, .post figure:first-child {
    margin-left: 0;
}
.post figure.show-large:first-child  {
    margin: 0 auto 60px auto;
}

.image_count {    font-size: 15px;
    color: #6d6d6d;
    font-style: italic;
}

/* .post figure figcaption, .page-template-page-podcast .episodes figure figcaption {
    font-size: 0.8em;
    font-weight: bold;
    color: #000;
} */

figcaption, .single-portfolio .post p {
    line-height: inherit;
    font-size: 16px;
    color: #6d6d6d;
    font-weight: normal;
}

blockquote {
    font-size: 0.9em;
    line-height: 1.3em;
}

.post-meta {
    padding-top: 1em;
}

.post-meta .section {
    margin-bottom: 30px;
}

.post-meta h6 {
    font-size: 0.9em;
    font-weight: 300;
    margin: 10px 0px;
    padding: 0;
}

.post-meta p {
    color: #6d6d6d;
    margin: 0;
    padding: 0;
    font-size: 0.9em;
}

.post-controls {
    text-align: right;
}
.post-controls a {
    margin: 0px 5px;
}

#searchForm {
    display: none;
    margin-top: 40px;
}

#searchForm input {
    font-size: 18px;
}

.post-meta-grid {
    display: grid;
    grid-template-columns: .5fr 1fr;
    column-gap: 50px;
    grid-template-rows: 1fr;
}

.excerpt p, .excerpt ul li {
    font-size: 1.2em;
    color: #6d6d6d;
    line-height: 1.5;
}

footer span.site-title {
    font-size: 3.5em;

}

footer ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
footer ul li {
    display: inline;
    padding-right: 20px;
    font-size: 1.25em;
    font-weight: bold;
    color: #fff;
}

footer ul li a, footer ul li a:visited {
    color: #fff;
    text-decoration: none;
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
  
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
  
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
  
    /* Support for IE. */
    font-feature-settings: 'liga';
  }

  /*Comments */
#comments {
    max-width: 600px;
    margin-top: 75px;
}
.webmention {
    margin: 50px;
}

ul.commentlist {
    margin: 0;
    padding: 0;
}
   ul.commentlist .comment {
        margin-bottom: 50px;
   }
        ul.commentlist .comment .comment-author {
            font-weight: 700;
        }
        ul .comment-meta {
            margin-left: 45px;
        }
        .webmention .comment-meta {
            margin: 5px 0px;
        }
        ul .comment-meta a {
            text-decoration: none;
            color: #6d6d6d
        }
        ul.commentlist .comment .comment-author img {
                vertical-align: text-top;
        }
        ul.commentlist .comment .comment-author cite.fn {
            padding-left: 10px;
            font-weight: bold;
        }
        .webmention .fn {
            font-weight: bold;
        }
        
        ul.commentlist .comment.depth-2, ul.commentlist .comment.depth-3 {
            margin-left: 75px;
        }

        ul.commentlist .comment .comment-author .comment-meta {
            font-size: 14px;

            padding-left: 40px;
            margin-bottom: 20px;
            
        }
        ul.commentlist .comment .reply {
            font-size: 14px;
            margin-bottom: 15px;
            margin-left: 40px;
        }
        ul.commentlist .comment p {
            margin-left: 40px;
            font-size: 18px;
            line-height: 24px;
        }
            ul.commentlist .comment p a {
                text-decoration: underline;
            }

.comment-notes {
    font-size: 14px;
}

.comment-form input {
        border: 1px solid #000;
        font-size: 18px;
}
.comment-form textarea {
    border: 1px solid #000;
    width: 50%;
    font-size: 18px;
}



    .comment-form label {
        padding-right: 10px;
    }
        .comment-form label[for="comment"] {
            display: none;
        }

.social {
    margin-top: 30px;
}

.social p a {
    color: #fff;
    font-size: 32px;
    margin-right: 12px;
}


@media screen and (max-width: 480px) {
    main {
        width: 375px;
    }

    .social p a {
        font-size: 24px;
    }
}

ul.mastodon-favorites {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 600px;
}

@media screen and (max-width: 480px) {
    ul.mastodon-favorites {
        max-width: 375px;
    }
}

ul.mastodon-favorites li {
    font-size: 0.8em;
    padding-bottom: 30px;
    margin: 10px 0px;
}

ul.mastodon-favorites li p.media-attachments {
    font-size: 0.7em;
    color: #808080;
}

ul.mastodon-favorites li span.date-published {
    font-size: 0.6em;
    color: #808080;
}

ul.mastodon-favorites li p {
    margin-left: 10px;
}

/* @media (prefers-color-scheme: dark) {
    body {
        background-color: #000;
        color: #dadada;
    }
    a, a:visited {
        color: #5284e3;
    }
    ul.sub-menu li a, ul.sub-menu li a:visited {
        text-decoration: none;
        color: #6d6d6d;
    }
    .excerpt p, .excerpt ul li {
        color: #c0c0c0;
    }
    footer {
        background-color: #6d6d6d;
    }
    .post-controls svg {
        fill: #fff;
    }
} */

code {
    background-color: #eee;
}

/* Manually selected dark mode */
body.dark {
    background-color: #000;
    color: #dadada;
}
body.dark a, body.dark a:visited {
    color: #5284e3;
}
body.dark ul.sub-menu li a, body.dark ul.sub-menu li a:visited {
    text-decoration: none;
    color: #6d6d6d;
}
body.dark .excerpt p, body.dark .excerpt ul li {
    color: #c0c0c0;
}
body.dark footer {
    background-color: #6d6d6d;
}
body.dark footer a, body.dark footer a:visited {
    color: #fff;
}
body.dark .post-controls svg {
    fill: #fff;
}

.darkmode-label {
    font-size: 0.8em;
}
.darkmode-toggle {
    float: right;
 }
 .darkmode-toggle input {
   position: absolute;
   opacity: 0;
 }
 .darkmode-toggle input + label {
   padding: 7px;
   float:left;
   cursor: pointer;
 }
 .darkmode-toggle input:checked + label {
   border-bottom: 4px solid #808080;
 }