/**
*  Publish Foundation theme
*  Copyright (c) John Sundell 2019
*  MIT license, see LICENSE file for details
*/

/*
    Colors:
*/

:root {
    --black: #271d2c;
    /* black with 10% opacity */
    --black-shadow: rgba(39, 29, 44, 0.1);
    --white: #fff8ed;
    --gray: #7b6960;
    --red: #e01f3f;
}

@font-face {
    font-family: 'League Spartan';
    src: url('font/LeagueSpartan-VF.woff2') format('woff2');
    font-weight: 100 900;
}

@font-face {
    font-family: 'League Gothic';
    src: url('font/LeagueGothic-Regular.woff2') format('woff2');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: var(--black);
    color: var(--white);
    font-family: 'League Spartan', Helvetica, Arial;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
}

.main-content {
    max-width: 1200px;
    margin: 16px;
    padding: 32px;
    text-align: left;
    background-color: var(--white);
    color: var(--black);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
}

.main-content a {
    color: var(--red);
    font-weight: bold;
    text-decoration: none;
}

.main-content p {
    font-size: 1.5em;
    line-height: 1.5em;
}

.main-content > ul:not(.picker):not(.item-list):not(.feed) > li {
    font-size: 1.5em;
    line-height: 1em;
    margin-left: 0.8em;
    list-style: none;
}

.main-content > ul:not(.picker):not(.item-list):not(.feed):not(.all-tags) > li:before {
    display: inline-block;
    content: "-";
    width: 0.8em;
    font-weight: 900;
    margin-left: -0.8em;
}

.main-content h2 a {
    color: var(--black);
}

.main-content > ol {
    margin-top: 8px;
    margin-bottom: 16px;
    padding-left: 8px;
}

.main-content > ol > li {
    font-size: 1.5em;
    line-height: 1.5em;
    margin-left: 0.8em;
    font-weight: 200;
}

.main-content a:hover {
    text-decoration: underline;
}

.main-content a.tag {
    color: var(--gray);
    font-weight: normal;
}

.main-content:has(.about-section) {
    background-image: url('/img/bwsam.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
}

.byline {
    line-height: normal;
}

.techlist {
    line-height: normal;
    margin-top: 0px;
    display: block;
    font-weight: 200;
    font-size: 0.75em;
}

.about-section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-section h1 {
    color: var(--white);
    display: none;
}

.about-section .wordlist {
    height: 0;
    padding-bottom: 86%;
    position: relative;
    overflow: hidden;
}

.about-section .wordlist::before {
    content: "";
    display: block;
    padding-top: 900px;
}

.main-content aside {
    font-style: italic;
    width: 100%;
    font-size: 2em;
    font-weight: 200;
    line-height: 1.2em;
    color: var(--gray);
    padding: 16px;
    margin: 16px 0 24px;
    background-color: var(--black-shadow);
    border-radius: 8px;
}

.about-section h2 {
    color: var(--white); 
    font-size: 2.5em;
    font-weight: 400;
    margin-top: -8px;
    display: none;
}

.main-content h1 {
    font-size: 4em;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.main-content > h2:not(.wordlist h2) {
    font-size: 3em;
    font-weight: 700;
    margin: 16px 0 24px;
}

.wordlist h2 {
    color: var(--white);
    font-size: 2.5em;
    font-weight: 400;
    margin-top: 8px;
    display: none;
}

.main-content h3 {
    font-size: 2.5em;
    font-weight: 700;
    margin: 16px 0 16px;
}

.main-content h4 {
    font-size: 1.8em;
    font-weight: 700;
    margin: 0 0 8px;
}

.light-text {
    font-weight: 100;
    font-style: italic;
}

.main-content > img.mini {
    width: 40%;
    margin: 32px 32px 32px 0;
}

.main-content > .image-caption {
    width: 40%;
    font-style: italic;
    font-size: 1.2em;
    padding: 16px 32px 16px;
    margin-bottom: 32px;
    font-weight: 200;
    color: var(--gray);
    text-align: center;
    box-shadow: 0 10px 15px -3px var(--black-shadow), 0 4px 6px -4px var(--black-shadow);
    background-color: var(--black-shadow);
    border-radius: 8px;
}

.image-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    margin: 16px 0;
}

.image-row img {
    flex: 1 1 auto;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 24px;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
}

.pixel-screenshot {
    image-rendering: pixelated;
    border-radius: 24px;
    margin-bottom: 16px;
}


.main-content > img:not([class]) {
    border-radius: 24px;
    margin-bottom: 16px;
}

.tooltip {
    /* dotted underline */
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 4px;
    /* finger cursor */
    cursor: pointer;
}
  
/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    background-color: var(--gray);
    color: var(--white);
    font-style: italic;
    font-weight: 100;
    text-align: center;
    padding: 8px 16px 8px;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px var(--black-shadow), 0 4px 6px -4px var(--black-shadow);
    line-height: normal;

    max-width: 300px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext, .tooltip:focus .tooltiptext, .tooltip:active .tooltiptext,
.tooltip:focus-within .tooltiptext {
    visibility: visible;
}

.tooltip:active .tooltiptext {
    visibility: hidden;
}

.picker {
    list-style-type: none;
    display: flex;
    margin: 32px auto 0px;
    gap: 12px;
    /* center the list */
    justify-content: center;
    padding: 12px;
    background-color: var(--black-shadow);
    border-radius: 1024px;
    /* box-shadow: 0 10px 15px -3px var(--black-shadow), 0 4px 6px -4px var(--black-shadow); */
}

.picker a {
    color: var(--gray);
    font-size: 1.5em;
    font-weight: 700;
    text-decoration: none;
}

.picker .selected {
    text-decoration: underline;
    font-weight: 900;
}

header {
    background-color: var(--primary-color);
    margin: 1em 16px 0;
    text-align: right;
}

nav {
    margin: 0 20px;
}

nav a {
    text-decoration: none;
    font-weight: bold;
    font-size: 1.4em;
}

nav ul {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    padding: 0; 
    margin: 0;
    gap: 16px;
}

nav li a.selected {
    text-decoration: underline;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

nav a:hover:not(.selected) {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-style: dotted;
    text-underline-offset: 4px;
}

code {
    background-color: var(--black-shadow);
    padding-left: 4px;
    padding-right: 4px;
    border-radius: 8px;
    font-weight: 100;
    font-family: monospace !important;
    color: var(--red);
}

header .wrapper {
    padding-top: 30px;
    padding-bottom: 30px;
    text-align: right;
    margin-right: 0;
}

header a {
    text-decoration: none;
}

header h3 {
    font-size: 1.5em;
    font-weight: 100;
    color: var(--gray);
}

header .site-name {
    font-size: 3em;
    font-weight: 700;
    margin-bottom: 0.8em;
}

h1 {
    margin-bottom: 20px;
    font-size: 2em;
}

p {
    margin-bottom: 10px;
}

a {
    color: inherit;
}

.item-list {
    list-style: none;
    padding: 0;
}

.item-list > li:not(:has(.feed-item)) {
    display: block;
    border-radius: 20px;
    margin-bottom: 20px;
    list-style: none;
    padding: 16px;
    border-radius: 16px;
    border-width: 2px;
    border-style: dotted;
    border-color: var(--gray);
    box-shadow: 0 10px 15px -3px var(--black-shadow), 0 4px 6px -4px var(--black-shadow);
}

.item-list h1 {
    margin-bottom: 15px;
    font-size: 1.3em;
}

.essay-item p {
    margin-bottom: 0;
}

.tag-list {
    margin-top: 6px;
    margin-bottom: 6px;
}

.tag-list li,
.tag {
    display: inline-block;
}

.tag-list li::after {
    content: ",";
    margin-right: 4px;
}

.tag-list::before {
    content: "#";
    font-weight: 700;
    color: var(--black);
}

.post-metadata > * {
    color: var(--gray);
    display: inline-block;
    font-size: 1em !important;
}

.post-metadata > *::after {
    content: "|";
    margin-left: 4px;
}

.main-content > .post-metadata {
    margin-top: -16px;
}

.post-metadata > *:last-child::after {
    content: "";
    margin-right: 0;
}

.post-metadata > p {
    margin-left: 4px;
}

.tag-list li:last-child::after {
    content: "";
    margin-right: 0;
}

.main-content .byline {
    font-weight: 200;
    font-size: 1.2em;
}

li .feed-item {
    border: 1px solid var(--gray);
    padding: 20px;
    padding-bottom: 8px;
    box-shadow: 0 10px 15px -3px var(--black-shadow), 0 4px 6px -4px var(--black-shadow);
    border-radius: 8px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: row;
}

li .feed-item > article::after {
    background-image: url('/svg/heart.svg');
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    position: relative; /* Change position to relative */
    bottom: -6px; /* Adjust the value to position it after the article */
    left: 0;
    transition: filter 0.3s ease; /* Smooth transition for the filter effect */
}

.feed-item img:not(.feed-avatar) {
    border-radius: 16px;
    margin-right: 16px;
    max-width: 512px;
    max-height: 512px;
    margin-left: auto;
    margin-right: auto;
}

li .feed-item > article:hover::after {
    filter: invert(35%) sepia(100%) saturate(1000%) hue-rotate(-10deg) brightness(90%) contrast(90%);
}

.feed-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 16px;
    border: 2px solid var(--black);
    flex-shrink: 0;
}

.feed-item {
    display: flex;
    list-style: none;
    line-height: 1.2em;
    margin-left: 0;
    font-size: 1.2em;
}

.feed-item > article {
    flex-grow: 1;
    min-height: 64px;
    position: relative;
    margin-bottom: 8px;
}

.feed {
    list-style: none;
    padding: 0 96px 0 96px;
    flex-direction: column;
    display: flex;
}

.feed-item hr {
    background-color: var(--gray);
    height: 2px;
    border: none;
    margin-bottom: 8px;
}


.feed-item > article > p {
    line-height: 1.2em;
    font-size: 1em;
}

.feed-metadata {
    flex-direction: row;
    display: flex;
    align-items: flex-end;
    margin-bottom: 2px;
}

.feed-metadata > h2 {
    font-size: 1.3em;
    font-weight: 700;
    margin-bottom: 0;
}

.feed-metadata > .feed-date {
    font-size: 0.8em;
    font-weight: 200;
    margin-left: 8px;
    margin-bottom: 0;
    line-height: normal;
}

.feed-metadata > .tag-list {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
}

.feed-metadata > .tag-list::before {
    content: "#";
    font-weight: 700;
    color: var(--black);
}

.item-page .tag-list {
    display: inline-block;
}

.content {
    margin-bottom: 40px;
}

.browse-all {
    display: block;
    margin-bottom: 30px;
}

.all-tags li {
    font-size: 1.4em;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 6px 10px;
    list-style: none;
}

.all-tags .tag a {
    color: var(--gray);
    font-weight: 700;
    text-decoration: none;
}

.all-tags .tag a:hover {
    text-decoration: underline;
}

.all-tags li::before {
    display: inline-block;
    content: "#";
    width: 0.8em;
    font-weight: 900;
    margin-left: -0.8em;
}

footer {
    color: var(--gray);
    margin: -8px 32px 16px;
    display: flex;
    justify-content: space-between;
}

footer .left-link {
    display: flex;
    gap: 8px;
    color: var(--red);
}

footer .left-link a:nth-child(4) {
    margin-top: 4px;
}

footer .left-link a img {
    width: 24px;
}

footer .right-link {
    display: flex;
    gap: 16px;
    margin-top: auto;
    margin-bottom: auto;
    align-items: center;
}

a.secret-link {
    text-decoration: none;
}

a.secret-link:hover {
    text-decoration: underline;
}

@media(max-width: 900px) {
    .feed {
        padding: 32px 0 32px 0;
    } 

    .feed-item img:not(.feed-avatar) {
        max-width: 384px;
        max-height: 384px;
    }

    .feed-metadata {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .feed-metadata > h2 {
        font-size: 1em;
        font-weight: 700;
        margin-bottom: 0;
    }
    
    .feed-metadata > .feed-date {
        font-size: 0.6em;
        font-weight: 200;
        margin-left: 0;
        margin-bottom: 0;
        line-height: normal;
    }
    
    .feed-metadata > .tag-list {
        font-size: 0.7em;
        margin-left: 0;
    }
}

@media(max-width: 600px) {
    .feed {
        padding: 0;
    }

    /* Remove all default styling */

    .main-content aside {
        font-size: 1.2em;
        font-weight: 200;
        line-height: 1.1em;
        color: var(--gray);
        padding: 8px;
        margin: 8px 0 16px;
        background-color: var(--black-shadow);
        border-radius: 8px;
    }

    .main-content p {
        font-size: 1em;
        line-height: 1.2em;
    }

    .feed-item > article > p {
        line-height: 1.1em;
        font-size: 0.8em;
    }

    .main-content h1 {
        font-size: 2em;
        font-weight: 800;
        letter-spacing: 0.03em;
        margin-top: 8px;
    }

    .main-content > h2:not(.wordlist h2) {
        font-size: 1.8em;
        font-weight: 700;
        margin: 16px 0 16px;
    }

    .essay-item > h2 {
        font-size: 1.3em;
    }

    .main-content h4 {
        font-size: 1.5em;
        font-weight: 700;
        margin: 0 0 8px;
    }

    nav {
        margin-top: 8px;
        margin-left: 0;
    }
    .wrapper {
        padding: 40px 20px;
    }
    footer .right-link > :last-child {
        display: none;
    }
    .main-content {
        margin-bottom: 16px;
        margin-left: 0;
        margin-right: 0;
        padding: 16px;
        border-radius: 0;
    }

    .feed-item img:not(.feed-avatar) {
        max-width: 192px;
        max-height: 192px;
    }

    .picker {
        margin: 16px auto 0px;
        gap: 6px;
        padding: 12px;
        border-radius: 1024px;

    }
    
    .picker a {
        font-size: 1em;
    }

    .main-content > img.mini {
        width: 100%;
        margin: 16px 16px 16px 0;
    }
    
    .main-content > .image-caption {
        width: 100%;
        font-style: italic;
        font-size: 1em;
        padding: 16px 32px 16px;
        margin-bottom: 32px;
        font-weight: 200;
        color: var(--gray);
        text-align: center;
        box-shadow: 0 10px 15px -3px var(--black-shadow), 0 4px 6px -4px var(--black-shadow);
        background-color: var(--black-shadow);
        border-radius: 8px;
    }

    .post-metadata {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .post-metadata > * {
        display: flex;
        font-size: 0.8em !important;
        flex-wrap: wrap;
    }

    .post-metadata > .tag-list {
        margin-bottom: 0;
        margin-top: 0;
    }

    .post-metadata {
        margin-top: 6px;
    }

    .main-content .byline {
        font-size: 1em;
    }
}

@media(max-width: 360px) {
    footer {
        flex-direction: column;
        gap: 8px;
        justify-content: flex-start;
    }

    .feed-item img:not(.feed-avatar) {
        max-width: 128px;
        max-height: 128px;
    }

    .picker {
        margin: 8px auto 0px;
        gap: 3px;
        padding: 6px;
        border-radius: 1024px;

    }
    
    .picker a {
        font-size: 0.8em;
    }
}