body {
    --theme-color-primary: rgb(255, 255, 255);
    --theme-color-secondary: black;
    --theme-accent: #09448c;
    color: var(--theme-color-secondary);
    background-color: var(--theme-color-primary);
    margin: 0;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    font-size: 18px;
}

svg {
    stroke: var(--theme-accent);
    fill: var(--theme-accent);
}

a,
a:visited,
a:hover {
    color: var(--theme-accent);
}

hr {
    width: 100%;
    color: var(--theme-accent);
    margin-top:25px;
    margin-bottom:25px;
}

@media screen and (prefers-color-scheme:dark) {
    body {
        --theme-color-primary: rgb(0, 0, 0);
        --theme-color-secondary: white;
        --theme-accent: #1291e5;

    }
}

iframe {
    width:100%;
    min-height:25rem;
    height:25vw;
}
img,
video,
iframe,
audio {
    max-width: 90vw;
    max-height: 100%;
}
.gif {
    max-height:50vh;
}
.gallery {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    overflow:hidden;
    max-width:95%;
}

.gallery >*{
    max-width:25vw;
    max-height:20vw;
}

.image-container a{
    height:100%;
}
.image-container img{
    max-height:100%;
}

.gallery > img{
    max-width:600px;
    max-height:400px;
}


header,
footer {
    width: 100vw;
    margin: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}

nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

nav>* {
    margin: 1rem;
}

.icon {
    height: 34px;
    width: 34px;
}

div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}

article {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-left:10px;
    padding-right:10px;
    max-width: 60rem;
    font-size:24px;
}
article img {
    max-width:90%;
}

article p,
article table,
article ul,
article ol,
article h3,
article h4,
article h2 {
    width: 100%;
    text-align: left;
}
article .highlight{
    width:100%;
    align-items: flex-start;
}
article .highlight pre{
    width:100%;
    text-align: left;
}

article h1 {}

.posts {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
}

.post {
    flex-direction: row;
    flex-wrap: wrap;
    display:flex;
    align-items: center;
    margin:1rem;
    background-color:#151515;
    border:2px solid #252525;
    padding:25px;
    border-radius:25px;
    max-width: 90vw;
}

.post>*{
    margin:15px;
}
.post h2{
    text-align: center;
}
.post p{
    max-width: 460px;
}
.post-image{
    width:25rem;
    height:15rem;
    background-position: top center;
    background-size: contain;
    background-repeat: no-repeat;
}
@media screen and (orientation:portrait){
    .post-image{}
}

.post-tags a {
    margin: 5px;
}

.tag {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.highlight pre {
    background-color: transparent !important;
}

article .gallery{
    width: 80vw;
    max-width: 90vw;
}

h3{
    margin:0;
}
article a[href^="https"]:where(:not([href*="{{.Site.BaseURL}}"]))::after {content:"↗️";font-size:20px;margin:5px;text-decoration: none;}
.image-container a::after, .liberapay-container a::after{
    content: "" !important;margin:0 !important;font-size:0;
}