@import url(./../meta/main.css);
@import url(./../meta/comment-widget.css);

:root {
    --body-font:Arial, Helvetica, sans-serif;
    --display-font:grandstander;
    --accent-color:#5177a9;
}

body{
    background-image: url(./../art/img/bg.png);
    background-color:var(--accent-color);
    font-family:var(--body-font);
    min-width: 300px;
}

.sign-off {max-width: 200px;}

#container{background-color:white;}

.justified-gallery{margin-bottom: 0.5rem;}
.justified-gallery img, .main-content > img{border-radius:8px;}
.main-content > img{margin-bottom:0.5rem;}

figure { color: gray; margin: 0;text-align: center; }
figure > img {margin-bottom: 0.5rem}

#nav{background-color:lightgray;}

nav {
    margin:0 0.5rem;
    text-align: center;
}

nav > a{
  color:var(--wheat);
  background-color:var(--dark-brown);
  display:inline-block;
  padding:5px 8px;
  border-radius:30px;
  margin-bottom:5px;
}

#nextprev-dup{margin-top: 0.5em;}

footer{
    background-color:var(--accent-color);
}

#nextprev{margin-top:1rem;}
#c_widget{margin-top:4rem;}

.micro{
    article{
        border-radius: 5px;
        background-color: rgb(245, 245, 245);
        border:2px solid black;
        &:nth-of-type(1n){transform: rotate(-1deg)  translateX(-5px);}
        &:nth-of-type(2n){transform: rotate(1deg) translateX(8px);}
    }
    article > div{
        overflow-y:auto;
        padding:1rem;
        padding-top:0.5rem;
        max-height:320px;
    }

    article:nth-of-type(3n-2){--main-color:var(--dark-blue);}
    article:nth-of-type(3n-1){--main-color:var(--yellow);}
    article:nth-of-type(3n){--main-color:var(--brown);}
    h3{
        background-color:var(--main-color);
        padding:1rem;
    }

    h4{
        color:var(--main-color);
        margin-bottom:0.5rem;
    }
    div > span{
        display: block;
        font-size: 0.7rem;
        color: grey;
        text-align:right;
    }
}

img.center{
    display:block;
    margin-right:auto;
    margin-left:auto;
}

::selection{
    background-color:var(--accent-color);
    color:white;
}

/*=== PAGE LAYOUT STYLING ===*/
#container header{grid-area:header;}
#container #nav{grid-area:nav;}
#container main{grid-area:main;}
#container footer{grid-area:footer;}

#container{
    margin: auto;
    max-width:830px;
    display: grid;
    grid-template-areas:
    'header header'
    'main nav'
    'footer footer';
    grid-template-columns:2fr 230px;
    grid-template-rows:auto 1fr auto;
    min-height:100vh;
}

header {user-select:none;}
header img{
    width:100%;
    object-fit:cover;
    display:block;
}

#nav{
    user-select:none;
    position: relative;
}

#nav > div{
    position:sticky;
    top:2rem;right:0;
}

#nav img{
    display:block;
    width:100%; max-width:150px;
    position: relative;
    top:-1rem ;left:50%;
    transform:translateX(-50%);
}

#nav h3{
    text-align:center;
    position: relative;
    top:-0.5rem;
}

footer{
    user-select:none; padding:1rem;
}
footer a{color:inherit;}

.main-content{padding:0 1rem;}
.main-content:first-child{padding-top:1rem;}
.main-content:last-child{padding-bottom:1rem;}

.main-content img{width:100%;}

#blog-date{color:var(--accent-color);}

@media only screen and (max-width: 600px) {
    #container{
        display:block;
        min-height:auto;
        margin-top: 5rem;
    }
    main{min-height:90vh;}
    #nav img {
        float: left;
        max-width:100px;
        margin-right: 0.5rem;
        left: unset;
        transform: none;
    }
    nav{padding: 0.5rem;text-align:left;}
    #nextprev-dup{display: none;}
}

#nextprev {text-align:center;user-select:none;}

/*=== BLOG LIST STYLING ===*/
/* Use these tags to hide certain elements in the blog list */
.no-title .item-title{display:none;}
.no-date .item-date{display:none;}
.no-desc .item-desc{display:none;}
.no-img .item-img{display:none;}

.item-img img{display: block;}
.item-img img[src='./']{display:none;}

.item-title{grid-area:title;}
.item-date{grid-area:date;}
.item-desc{grid-area:desc;}
.item-img{grid-area:img;}

.card{
    display:flex;
    flex-wrap: wrap;
    gap:5px;
}

.card > a{
    display: block;
    position: relative;
    text-align:center;
    flex:1 25%;
    min-width:130px;
    background-color:rgb(245, 245, 245);
    border-radius:10px;
}

.card .blog-item{
    display:grid;
    grid-template-areas:
    'date'
    'img'
    'title'
    'desc';
    padding:1rem;
    position: relative;
    top:50%;transform:translateY(-50%);
}

.card .item-title{
    color:var(--accent-color);
    font-weight:bold;
}

.card .item-desc {
    margin-top:8px;
}

.card .item-img img{
    margin:0.5rem 0;
}
/**
.card a:hover {
    background-color:var(--accent-color);
}

.card a:hover .item-title{
    color:black;
}
**/
.cinematic .blog-item{
    display: grid;
    grid-template-areas:
    'date'
    'title'
    'desc'
    ;
    position: relative;
    overflow:hidden;
    padding:0 2rem;
    background-color:rgba(0, 0, 0, 0.9);
    color:white;
}

.cinematic .blog-item > *:not(.item-img){position: relative;z-index:1;}

.cinematic .item-title{
    margin-bottom:0.5rem;
    font-size:2rem;
}

.cinematic .item-date{
    margin-top:2rem;
    color:var(--accent-color);
}

.cinematic .item-desc{
    margin-bottom:2rem;
}

.cinematic .item-img{
    position: absolute;
    filter: brightness(30%);
    transition:0.2s;
    top:0;left:0;
}

.cinematic a:hover .item-img{
    filter:brightness(20%);
}
.compact .blog-item{
    display:grid;
    grid-template-areas:
    'date title img'
    'desc desc img';
    grid-template-columns:auto 1fr auto;
    grid-template-rows:auto 1fr;
}

.compact .item-date{
    font-weight:bold;
}

.compact .item-date:after{
    content:":";
    padding:0 0.5rem;
}

.compact .item-desc{
    margin-left:1rem;
}

.compact .item-img{display:none;}

.compact a:hover .blog-item{
    background-color:var(--accent-color);
}

#blog-archive, #blog-recent {user-select:none;}
.item-title,.item-date{font-family: var(--display-font);}