@import "../theme/css/debug.css";

:root {
    --line-height: 1.75em;
}

p {
    line-height: var(--line-height);
    text-align: left;
    font-size: 1.00em;

    /* border: 1px dotted hotpink; */
}

img + em {
    font-size: 0.85em;
    display: block;
    /*line-height: 0.0em;*/
    margin-left: 0.5em;
    margin-right: 0.5em;
}

.min-lines-2 {
    min-height: calc(2em + var(--line-height));
}

.min-lines-3 {
    min-height: calc(3em + var(--line-height));
}

.min-lines-4 {
    min-height: calc(4em + var(--line-height));
}

@media screen and (max-width: 736px) {
    .image.fit {
        margin: 0.5rem 0;
    }
}
.image.fit {
    display: block;
    margin: 0.75rem 0;
    width: 100%;
}

section.post div.image {
float:none;
width: auto;

margin-left: auto;
margin-right: auto;
display: block;
}

section.post p img {
    object-fit: contain;
    /* object-fit: scale-down; */
    max-width:100%;

}

.image.left, .image.right {
    max-width: 35%;
}

.image.left {
    margin: 0 1.3rem 1.3rem 0;
    top: 0.5rem;
}

.image.right {
    margin: 0 0 1.3rem 1.3rem;
    top: 0.5rem;
}

#main .page-section {
    border: none;
    /* padding-top: 0; */
    /* padding: 0; */
    padding-top:0;
    padding-bottom:0;


}

/* //#main .page-section { */
    /* border: none;
    padding-bottom: 1.5em;
    border-bottom: 2px dotted hotpink; */
/* } */

/* #main .page-section:last-of-type {
    border-bottom: 5px dotted hotpink;
} */

.page-section > *:first-child {
    border-top: 0;
}
.page-section > * {
    /* padding-bottom: 0; */
    border-bottom: none;
    margin-bottom: 0;
    
    &:last-child {
        padding-bottom: 1em;
        /* margin-bottom: 1em; */
        border-bottom: 1px dotted hotpink;
    }
}





.image img {
    max-width: 100%;
    margin: auto;
    object-fit: scale-down;
}

div.image {
    padding: 2px;
}

.image.main {
    margin: calc(1.5 * var(--line-height)) 0;
}

.box {
    clear: both;
}

header > h1 + p {
    font-size: 1.1rem;
    margin-top: -0.5rem;
    line-height:  var(--line-height);
}

header.major {
    margin: 0 0 calc(1.5 * var(--line-height)) 0;
}



#main > .posts > * {
    padding: 2rem;
}

@media screen and (max-width: 980px) {
    #main > .posts > * {
        padding: 1.25rem;
    }
}

@media screen and (max-width: 736px) {
    #main > .posts > * {
        padding: 1rem;
    }
}



#wrapper > .bg {
    --gradient-start-color: rgba(255, 167, 14, 0.07);
    --gradient-start-color2: rgba(255, 157, 208, 0.1);
    --gradient-end-color: rgba(161, 78, 86, 0.05);
    --gradient: linear-gradient(180deg, var(--gradient-start-color2) 0%,  rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.1) 60%, var(--gradient-end-color) 90%);

    /* fix for the gradient jumping suddenly when window is resized */
    height: 100vw;

    background-image:
        url("/theme/images/overlay.png"),
        var(--gradient),
        url("/images/bg-mpnk.jpg");

    filter: blur(3px);
}

article.tile {
    img {
        float:none;
        width: auto;
        height:10em;
        margin-left: auto;
        margin-right: auto;
        display: block;
        /* padding: 1em; */
    }
}

:root {
    --besley: "Besley";
    /* Needs letter spacing to be zero to make connected letters */
    --playwrite-england: "Playwrite GB J";
    --titillium-web: "Titillium Web";
}


h1, h2, h3, h4, h5, h6 {
    font-family: var(--titillium-web), cursive;
     /* "Source Sans Pro", Helvetica, sans-serif; */
    font-weight: 100;
    /* font-optical-sizing: auto; */
    line-height: 1.5;
    letter-spacing: 0.1em;
    text-transform: none;
}

#intro h1 {
    font-size: 5rem;
    @media screen and (max-width: 736px) {
        font-size: 4rem;
    }
} 

h2 {
    margin: 0 0 1.0rem 0;
}

header > .date {
    margin: 0 0 0.7rem 0;
}

#header .logo {
    text-transform: none;
    font-family: var(--titillium-web);
    font-weight: 100;
    border-width: 0.07em;
    border-top: none;
    border-left: none;
    border-right: none;
}

@layer { 
    #header .logo { border-width: 0.07em !important; } 
 }


#main > .post {
    padding: 6rem 6rem 6rem 6rem;
}

@media screen and (max-width: 1280px) {
    #main > .post {
        padding: 4rem 4rem 4rem 4rem;
    }
}

@media screen and (max-width: 736px) {
    #main > .post {
        padding: 2rem 2rem 2rem 2rem;
    }
}


#main section.tiles {
    padding-left: 0.25em;
    padding-right: 0.25em;
}


#main section.posts section.tile {
    display: grid;
    grid-template-columns: 1fr;
    background-color: rgb(255, 255, 255);
    padding: 0.5em;
}

section.tile .stacked {
    border-radius: 0.5em;
    grid-area: 1 / 1 / last-line / end;
    /* border: 4px dotted rgba(255, 255, 0, 0.37); */
    z-index: 100;
    display: block;
    color: whitesmoke;
    padding: 0;
}

section.tile .stacked {
    h1, h2, h3, h4, h5, h6 {
        color: whitesmoke;
        font-weight: 290;
    }
}




section.tile .stacked.background {
    overflow-y: hidden;
    overflow-x: hidden;
    width: auto;
    object-fit: fill;
    object-position: center;
    z-index: 0;
    min-height:max-content;
    max-height: min-content;
    padding: 0;
}



section.tile  .stacked.background img {
    --ambient-color:  rgba(202, 187, 187, 0.458);
    filter: blur(15px);
    background-color:var(--ambient-color);
    max-width: 138%;
    max-height: 10em;
    margin-left: auto;
    margin-right: auto;
    transform: scale(4.0) translate(0, 20%);
}

section.tile  .stacked.background.overlay {
    /* display: none; */
    z-index: 10;
    min-height: fit-content;
    background-color: #00000022;
    mix-blend-mode: hard-light;
}

section.tile .stacked {
    padding: 0em 1em;

}


section.tile .stacked.tile {

        /* mix-blend-mode:luminosity;
        mix-blend-mode:normal;
        mix-blend-mode:hard-light;
        mix-blend-mode:lighten; */

    .image {
        /* mix-blend-mode: var(--mode); */
        img { 
            /* mix-blend-mode: var(--mode); */

        }
    }
}