/* ATTENTION! - Don't change anything here unless you know what you're doing */

body{padding:0;margin:0;}

body>.main-content{display:none;}

h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--display-font);}
ol,ul{margin-top:0;}
a{text-decoration:none;color:inherit;}
p{margin-top:0;}

p > a {
    text-decoration:underline;
    color:var(--accent-color);
}

hr.clear{
    margin:0;
    border:0;
    clear:both;
}

p:last-child,ol:last-child,ul:last-child{
    margin-bottom:0;
}

.yt-embed {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%;
    margin-bottom:1rem;

    > iframe {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%!important;
        height: 100%!important;
    }
}

.float-left{float:left;margin:0 0.5rem 0.5rem 0;max-width:280px;}
.float-right{float:right;margin:0 0 0.5rem 0.5rem;max-width:280px;}
@media only screen and (max-width: 650px) {
    .float-left,.float-right{float:none;margin:auto;max-width:none;}
}

::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:800px;
    display: grid;
    grid-template-areas:
    'header header'
    'main nav'
    'footer footer';
    grid-template-columns:2fr 200px;
    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;

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

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

        h3{
            text-align:center;
            position: relative;
            top:-0.5rem;
        }
        nav a{
            display:block;
            padding:8px 16px;
        }
    }

    footer{
        user-select:none; padding:1rem;
        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: 550px) {
    #container{
        display:block;
        min-height:auto;

        #nav h3{display:none;}
        #nav img{
            width:3rem;
            left:0.3rem;
            transform: none;
            position: absolute;
        }
        nav a{
            display:inline-block!important;
        }
        nav a:first-child{margin-left:4rem;}
        main {
            min-height:80vh;
        }
    }
}

#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;

    > a{
        display: block;
        position: relative;
        text-align:center;
        flex:1 25%;
        min-width:130px;
        background-color:rgb(245, 245, 245);
        border-radius:10px;
    }
    
    .blog-item{
        display:grid;
        grid-template-areas:
        'date'
        'img'
        'title'
        'desc';
        padding:1rem;
        position: relative;
        top:50%;transform:translateY(-50%);
    }
    
    .item-title{
        color:var(--accent-color);
        font-weight:bold;
    }
    .item-desc {margin-top:8px;}
    .item-img img{margin:0.5rem 0;}

    a:hover {background-color:var(--accent-color);}
    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;
    }
    
    .blog-item > *:not(.item-img){position: relative;z-index:1;}
    
    .item-title{
        margin-bottom:0.5rem;
        font-size:2rem;
    }
    
    .item-date{
        margin-top:2rem;
        color:var(--accent-color);
    }
    
    .item-desc{margin-bottom:2rem;}
    
    .item-img{
        position: absolute;
        filter: brightness(30%);
        transition:0.2s;
        top:0;left:0;
    }
    
    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;
    }
    
    .item-date{
        font-weight:bold;
    }
    
    .item-date:after{
        content:":";
        padding:0 0.5rem;
    }
    
    .item-desc{
        margin-left:1rem;
    }
    
    .item-img{display:none;}
    
    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);}