@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Rubik+Beastly&family=Source+Code+Pro:ital,wght@0,400;0,500;1,400;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap');

:root {
/*
    --bg0-bright: #fafafa;
    --bg0: #f0f0f0;
    --bg1: #e5e5e5;
    --bg2: #d3d3d3;
    --bg3: #b7b7b7;
    --fg0: #202020;
    --fg1: #282828;
    --fg2: #404040;
    --fg3: #727272;
    --nav-bg: #282828;
    --nav-fg: #f5f5f5;
    --accent: #cf296f;
*/
    --bg0: #1c1f26;
    --bg1: #262a33;
    --bg2: #303540;
    --bg3: #393f4d;
    --fg0: #eceff4;
    --fg1: #e5e9f0;
    --fg2: #d8dee9;
    --fg3: #7e838c;
    --nav-bg: #13151a;
    --nav-fg: #eceff4;
    --accent: #f01957;
    --sans-serif: "Quicksand", "Segoe UI", "Cantarell", sans-serif, Arial;
    --serif: "Source Serif Pro", serif;
    --content-gap: 36px;
    --h4-gap: 16px;
    --small-gap: 8px;
}

.navbar {
    display: flex;
    background-color: var(--nav-bg);
    color: var(--nav-fg);
    padding: 16px;
    margin-bottom: 0;
    font-size: 28px;
}

.navbar .logo {
    background-color: inherit;
    color: inherit;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0;
    font-weight: 800;
    margin: 8px;
}

.navbar > .navbar-left {

}

nav.navbar > div {
    display: inline-block;
}

nav.navbar > div.navbar-right {
    float: right;
    text-align: right;
    flex-grow: 1;
}

div.navbar-right a, div.navbar-right span {
    margin: 8px;
    font-weight: 300;
    background-color: transparent;
    color: var(--fg3);
    text-decoration: none;
}

div.navbar-right a.active {
    color: var(--accent);
    font-weight: 400;
    text-shadow: 1px 0px 8px;
}

div.navbar-right a:hover {
    color: var(--fg0);
}

.accent {
    color: var(--accent);
}

body {
    background-color: var(--bg0);
    color: var(--fg0);
    font-family: var(--sans-serif);
    margin: 0;
}

article *::selection {
    background-color: var(--fg0);
    color: var(--bg0);
}

article {
    background-color: var(--bg0);
    max-width: 768px;
    margin: auto;
    padding: 2px 32px 32px 32px;
}

article > header {
    margin-bottom: var(--content-gap);
}

article > header > h1 {
    margin-bottom: var(--content-gap);
}

article img {
    max-width: 100%;
}

small i {
    font-family: var(--serif);
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    margin-bottom: var(--h4-gap);
}

h2, h3 {
    margin-bottom: var(--content-gap);
}

p {
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: var(--content-gap);
}

figure {
    margin: 0;
    margin-bottom: var(--content-gap);
}

figure > img {
    margin-bottom: var(--small-gap);
    width: 100%;
}

figcaption {
    font-weight: 400;
    font-size: 14px;
    color: var(--fg3);
}

blockquote {
    font-family: var(--serif);
    border-inline-start: 3px solid var(--fg1);
    padding-left: 16px;
    margin-left: 0;
}

code {
    font-size: 14px;
}

code, code span {
    background-color: var(--bg1);
    color: var(--fg1);
}

header hr {
    margin-bottom: var(--content-gap);
}

hr {
    color: var(--bg3);
    background-color: var(--bg3);
    height: 1px;
    border: none;
}

a, a:visited {
    color: var(--accent);
    background-color: var(--bg0);
    transition-duration: 200ms;
}

a:hover {
    color: var(--bg0);
    background-color: var(--fg0);
    transition-duration: 200ms;
}

div.single-info .material-icons {
    font-size: 2px;
}

#info-tags a.tag {
    color: var(--fg3);
    margin-right: 0.5rem;
}

#info-tags a.tag:hover {
    color: var(--bg0);
}

div.taglist a.tag {
    background-color: var(--bg1);
    color: var(--fg3);
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--bg2);
    transition-duration: 200ms;
}

div.taglist a.tag:hover {
    background-color: var(--bg2);
    transition-duration: 200ms;
}

a.tag.small {
    color: var(--fg0);
    margin-right: 0.5rem;
    text-decoration: none;
}

a.tag.small:hover {
    color: var(--bg0);
}

a.tag.large {
    color: var(--fg3);
    outline: 2px solid var(--fg3);
    border-radius: 4px;
    padding: 4px;
    margin: 4px;
    line-height: 2.5em;
    text-decoration: none;
}

a.tag.large:hover {
    color: var(--bg0);
    background-color: var(--fg0);
    outline-color: var(--fg0);
}

.single-info td > .bi {
    transform: translateY(2px);
    margin-right: 4px;
}

.single-info {
    margin-bottom: var(--content-gap);
}

.single-info td {
    color: var(--fg3);
    font-size: small;
}

.post {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /*background-color: var(--bg0-bright);*/
    min-height: 128px;
    width: 100%;
}

.post .column {
    padding: 8px;
    box-sizing: border-box;
}

.post .column.right {
    flex: 1;
}

.post .column.thumbnail {
    flex-basis: 128px;
}

.post .column.thumbnail a, .post img {
    width: 100%;
    height: 112px;
    object-fit: cover;
}

.post a.post-title {
    color: var(--fg0);
    font-size: 24px;
    font-weight: 700;
    background-color: transparent;
    text-decoration: none;
}

.post a.post-title:hover {
    text-decoration: underline;
    background-color: transparent;
}

#nextprev > div {
    display: inline-block;
    width: 50%;
}

#nextprev > div.right {
    text-align: right;
}