/* Yakatcha!!! Blog Style - Exact Clone */

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font: normal normal 13px Vollkorn;
    color: #ffffff;
    background: #000000 url(body_background_dark.png) repeat scroll top left;
}

html {
    height: 100%;
}

/* Background Gradient Overlay */
.body-fauxcolumn-outer .cap-top {
    position: absolute;
    z-index: -10;
    height: 300px;
    width: 100%;
    top: -20px;
    background: transparent url(body_gradient_dark.png) repeat-x scroll top left;
}

/* Content Structure */
.content {
    position: relative;
    word-wrap: break-word;
    margin: 0 auto;
    width: 1100px;
}

.content-outer {
    min-width: 0;
    max-width: 100%;
    width: 100%;
}

.content-inner {
    padding: 0;
}

/* Header */
.header-outer {
    margin: 0 0 0 0;
    background: transparent none repeat scroll 0 0;
}

.header-inner {
    margin: 0 16px;
}

.header-inner .widget {
    margin: 0;
    background: transparent;
    border: none;
    padding: 0;
}

.Header h1 {
    font: normal bold 40px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
    color: #ffffff;
    text-shadow: 0 0 -1px #000000;
    margin-top: 20px;
}

.Header h1 a {
    color: #ffffff;
    text-decoration: none;
}

.Header .description {
    font: normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
    color: #ffffff;
    margin: .5em 0 10px;
    padding: 0 2px;
}

/* Main Content */
.main-outer {
    background: transparent;
}

.main-inner {
    padding-top: 30px;
}

.main-inner .column-center-inner {
    padding: 0 5px;
}


/* Blog Posts */
.blog-posts {
    margin: 0;
}

.date-outer {
    margin: 0 0 3em 0;
    background-color: #141414;
    border: 1px solid #222222;
    padding: 0 15px 15px;
}

.date-outer h2.date-header {
    margin: 0 -15px 1px;
    padding: 0.6em 15px 0.5em;
    font: normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
    color: #666666;
    background: transparent none no-repeat scroll top left;
    border-top: 0 solid #222222;
    border-bottom: 1px solid #000000;
    position: static;
    bottom: 100%;
    right: 15px;
    text-shadow: 0 0 -1px #000000;
}

.date-posts {
    margin: 0;
    clear: both;
}

.post-outer {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
}

.post {
    position: relative;
    padding: 15px 15px;
    scroll-margin-top: 40px;
}

.post-title {
    font: normal bold 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
    margin: 0 0 .75em 0;
    color: #ffffff !important;
}

.post-title a {
    color: #ffffff !important;
    text-decoration: none;
}

.post-title a:hover {
    color: #cccccc;
    text-decoration: none;
}

.post-header {
    margin: 0;
    padding: 0;
}

.post-body {
    position: relative;
    width: 100%;
    font: normal normal 13px Vollkorn;
    color: #ffffff;
    line-height: 1.4;
    margin: 0 0 1em;
}

.post-body a {
    color: #888888;
    text-decoration: underline;
}

.post-body a:visited {
    color: #444444;
}

.post-body a:hover {
    color: #cccccc;
    text-decoration: underline;
}

/* Post Footer */
.post-footer {
    margin: 1.5em 0 0 0;
    padding: 0;
    line-height: 1.6;
}

.post-footer-line {
    margin: 0;
    line-height: 1.6;
    font-size: 11px;
}

.post-footer-line > span {
    margin-right: 1em;
}

.post-author {
    color: #666666;
}

.post-author a {
    color: #888888;
    text-decoration: none;
}

.post-author a:hover {
    color: #cccccc;
    text-decoration: underline;
}

.post-timestamp {
    color: #666666;
}

.timestamp-link {
    color: #888888;
    text-decoration: none;
}

.timestamp-link:hover {
    color: #cccccc;
    text-decoration: underline;
}

.post-comment-link {
    color: #666666;
}

.comment-link {
    color: #888888;
    text-decoration: none;
}

.comment-link:hover {
    color: #cccccc;
    text-decoration: underline;
}

/* Anchor behavior */
html {
    scroll-behavior: smooth;
}

/* General Links */
a:link {
    text-decoration: none;
    color: #888888;
}

a:visited {
    text-decoration: none;
    color: #444444;
}

a:hover {
    text-decoration: underline;
    color: #cccccc;
}

/* Responsive Design */
@media screen and (max-width: 1100px) {
    .content {
        width: 100%;
        margin: 0;
        padding: 0 20px;
    }
}

/* YouTube Embed Responsive Styles */
iframe[src*="youtube.com"] {
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

@media screen and (max-width: 768px) {
    .content {
        padding: 0 10px;
    }
    
    .header-inner {
        margin: 0 10px;
    }
    
    .Header h1 {
        font-size: 28px;
    }
    
    .post {
        padding: 10px;
    }
    
    iframe[src*="youtube.com"] {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
}