:root{
    --accent: #ffd755;
}

body {
    font-family: "IBM Plex Mono", "Fira Code",Monaco,Consolas,Ubuntu Mono,monospace;
}

h1 {
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-feature-settings: "liga","case","calt","zero","locl","calt";
}

.logo svg {
    height: 25px;
    fill: rgb(33, 32, 44);
}
@media only screen and (min-width : 685px) {
    .logo svg {
        height: 36px;
    }
}

.front-container {
    display: flex;
    flex-wrap: wrap;
    max-width: 1440px;
}

.front-item {
    float: left;
    position: relative;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    flex-grow: 1;
}
@media only screen and (max-width : 420px) {
    .front-item:nth-child(1) {
        border-bottom: 3px dotted var(--accent);
    }
    .front-item:nth-child(2) {
        border-top: 3px dotted var(--accent);
        border-bottom: 3px dotted var(--accent);
        margin: 2px 0 2px 0;
    }
    .front-item:nth-child(3) {
        border-top: 3px dotted var(--accent);
    }
}
@media only screen and (min-width : 420px) and (max-width : 610px) {
    .front-item {
        width: 50%;
    }
    .front-item:nth-child(1) {
        border-right: 3px dotted var(--accent);
        border-bottom: 3px dotted var(--accent);
        border-top: none;
        margin-right: -4px;
    }
    .front-item:nth-child(2) {
        border-left: 3px dotted var(--accent);
        border-bottom: 3px dotted var(--accent);
        border-top: none;
        margin-left: -4px;
    }
    .front-item:nth-child(3) {
        border-bottom: none;
        border-top: none;
    }
}
@media only screen and (min-width : 610px) {
    .front-item {
        width: 33%;
        border-top: none!important;
        border-bottom: none!important;
    }
    .front-item:nth-child(1) {
        border-right: 3px dotted var(--accent);
    }
    .front-item:nth-child(2) {
        border-left: 3px dotted var(--accent);
        border-right: 3px dotted var(--accent);
        margin: 0 2px 0 2px!important;
    }
    .front-item:nth-child(3) {
        border-left: 3px dotted var(--accent);
    }
}

#selfie {
    max-height: 250px;
    max-width: 250px;
}

#selfie img {
    border-radius: 50%;
}

ul ul {
    margin-top: 0;
}

.front-item a, .post-content a {
    color: var(--accent);
}

.post-cover {
    border-width: 10px;
    max-width: 100%;
}

.posts {
    display: flex;
    flex-wrap: wrap;
    max-width: 1440px;
}
.posts .post {
    float: left;
    position: relative;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    flex-grow: 1;
}
@media only screen and (min-width : 420px) {
    .posts .post {
        width: 50%;
    }
}
@media only screen and (min-width : 610px) {
    .posts .post {
        width: 33%;
    }
}

.post {
    max-width: 1440px!important;
    margin-left: 0;
}

.post-content p {
    font-family: "IBM Plex Serif", Georgia, 'Times New Roman', Times, serif;
    font-feature-settings: "liga","case","calt","locl","calt";
}

#cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: rgb(33, 32, 44); z-index:9999; 
    font-size: 60px; text-align: center; padding-top: 200px; color: var(--accent);
}

asciinema-player {
    border: 10px solid var(--accent);
    background: transparent;
    padding: 20px!important;
    position: relative;
    display: inline-block;
}

.on-list .post-cover {
    max-height: 350px;
}

.smallcaps {
    font-variant: small-caps;
}