:root {
    --page-bg-color: #2F2830;
    --post-bg-color: #2D262E;

    --post-flex-direction: row;

    --post-image-width: 16rem;
    --post-image-margin: 0;
    --post-image-filter: initial;
    --html-min-width: 600px;

    --image-banner-min-height: 250px;
    --markdown-image-height: 300px;
    --markdown-image-width: initial;
    
}
@media (min-width: 73rem) {
    body {
        filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
    }
}

@media (max-width: 768px) {
    :root {
        --post-flex-direction: column-reverse;

        --post-image-width: initial;
        --post-image-margin: 12px;
        --post-image-filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.35));

        --html-min-width: 360px;
        --image-banner-min-height: 150px;
        --markdown-image-height: initial;
        --markdown-image-width: 100%;

    }
}

html {
    margin: 0;
    background-color: #1C1C1C;
    min-width: var(--html-min-width);
}

body {
    margin: 0 auto 0 auto;
    min-height: 100vh;
    background-color: var(--page-bg-color);
    color: white;
    font-family: Istok Web;
    max-width: 64rem;
    /* box-shadow: none; */
    /* filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25)); */
}

#main {
    display: inline-block;
    width: 100%;
}

a:link { color: #FB6266; }
a:visited { color: #CB2D31; }
a:hover { color: #FF191F; }
a:active { color: #FF191F; }

.titlebar {
    margin: auto;
    padding: 12px 24px 0 24px;
    display: flex;
    flex-direction: row;
}

.title-spacer {
    flex-grow: 1;
}

.hal9kay-profile {
    margin-right: 12px;
    border-radius: 25%;
    height: 32px;
}

.hal9kay-title {
    font-size: 24px;
    font-weight: 600;
}
.hal9kay-title a:link { 
    text-decoration: none; 
} 
.hal9kay-title a:visited { 
    text-decoration: none;
    color: white;
} 
.hal9kay-title a:hover { 
    text-decoration: none; 
} 
.hal9kay-title a:active { 
    text-decoration: none; 
}

.social-links {
    display: flex;
    flex-direction: row;
    gap: 12px;
}

.social-icon {
    width: 32px;
    height: 32px;
}


.image-banner {
    padding-top: 12px;
    width: 100%;
    object-fit: cover;
    min-height: var(--image-banner-min-height);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}


.tag-date {
    color: #FB6266;
    font-style: italic;
    font-size: 14px;
}

.list-container {
    margin: 24px;
}

.post-list {
    display: flex;
    flex-direction: column;
    padding: 0;
}

.post-text-container {
    padding: 24px;
}

.post-title {
    font-size: 20px;
    font-weight: 600;
    color: #FFE693;
}

.post-content, .p {
    font-size: 14px;
}

.post-single-layout {
    padding: 0 24px 24px 24px;
}

.post-single-banner-hr {
    background: linear-gradient(to left, #9A2750, #FFA559);
    height: 3px;
    border: 0;
}

.post-short-container {
    margin: 18px;
    background-color: var(--post-bg-color);
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.35));
    border-width: 1px;
    border-style: solid;
    border-image: linear-gradient(8deg, #996B3100 20%, #FFB56080) 1;
}

.post-short-container:hover {
    border-width: 3px;
    margin: 16px;
    cursor: pointer;
}

.post-short-layout {
    display: flex;
    flex-direction: var(--post-flex-direction);
}

.post-short-image {
    margin: var(--post-image-margin);
    object-fit: cover;
    width: var(--post-image-width);
    filter: var(--post-image-filter);
}



.markdown-image {
    margin: 0.5rem;
    filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, 0.35));
    height: var(--markdown-image-height);
    width: var(--markdown-image-width);
}







.streaming-container {
    margin-bottom: 36px;
    background-color: #191619;
    padding: 12px;
    border-radius: 10px;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.35));
}

.streaming-layout {
    margin: 12px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 48rem;
}

.streaming-image {
    margin: auto;
    object-fit: cover;
    height: 290px;
}

.streaming-links {
    margin: 6px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 24rem;
}

.streaming-anchor {
/* dummy class for zaraz */
}

.streaming-link {
    margin: 6px;
    background-color: #2F2830;
    display: flex;
    align-items: center;
    border-radius: 4px;
}