/* Font */
@import url("hack.css") screen;
@import url("roboto.css") screen;
@import url("ibm_plex_serif.css") screen;
@import url("myriad_pro.css") screen;
/* Color scheme */
@import url("gruvbox-light.css") screen;
@import url("gruvbox-dark.css") screen and (prefers-color-scheme: dark);

* {
    /*
    font-family: "Hack";
    font-family: "IBM Plex Serif";
    font-family: "Roboto";
    font-family: "Myriad Pro";
    */
    font-family: "Myriad Pro";
    line-height: 1.5;
    letter-spacing: .023em;
    /*
    letter-spacing: .000em;
    letter-spacing: .03em;
    letter-spacing: .1em;
    */
    box-sizing: border-box;
}

body {
    background-color: white;
    color: var(--fg);
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: var(--bg);
        color: var(--fg);
    }
}

img {
    border: 0px;
}

/* .left img {
    width: 200px;
    position: fixed;
    top: 50%;
    transform: translate(0, -50%);
} */

.left img {
    width: 200px;
}

.left .iconbar {
    text-align: center;
    vertical-align: middle;
}

#leftbox {
    width: 200px;
    position: fixed;
    top: 50%;
    transform: translate(0, -50%);
}

.column {
    /*float: left;*/
    text-align: left;
    display: inline-block;
}

.left {
    width: 300px;
    height: 400px;
    line-height: 400px;
}

.right {
    width: 500px;
    /*
     * overflow-y
     * https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y?retiredLocale=de
    overflow-y: scroll;
    */
    overflow-y: auto;
}

.row {
    /*
    text-align: center;
    */
    justify-content: center;    /* Align horizontally */
    /*align-items: center;*/        /* Align vertically */
    display: flex;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    clear: both;
    display: table;
}

/* Content */
/*
.content {
}
*/

/* Blog post */
/*
.post {
}
*/

.post > .headline {
    font-size: 1.4em;
    font-weight: bold;
}

.post > .meta {
    font-size: 0.7em;
    padding-bottom: 24px;
}

.post > .text {
    font-size: 1em;
}

.post img {
  width: 500px;
  text-align: center;
  border-radius: 8px;
}

/* Icon bar and icon (i.e. Feed icon) */

.iconbar {
    width: 200px;
    font-size: 1em;
    /*
    width: 10em;
    font-size: 0.7em;
    float: right;
    text-align: right;
     */
    float: left;
    text-align: center;
}

.icon {
    width: 1.2em;
    height: 1.2em;
    vertical-align: -0.125em;
}


/* Navigation */

.navigation {
    padding-top: 20px;
    width: 100%;
    font-size: 0.7em;
}

.navigation .lnav {
    width: 50%;
    float: left;
}

.navigation .rnav {
    width: 50%;
    float: right;
    text-align: right;
}


/* Links */

.navigation a:link, .headline a:link, .iconbar a:link {
    text-decoration: none;
    color: inherit;
}

.navigation a:visited, .headline a:visited, .iconbar a:visited {
    text-decoration: none;
    color: inherit;
}

.navigation a:hover, .headline a:hover, .iconbar a:hover {
    text-decoration: underline;
    color: inherit;
}

.navigation a:active, .headline a:active, .iconbar a:active {
    text-decoration: underline;
    color: inherit;
}

/* Links */
a {
    color: inherit;
}

a:link {
    text-decoration: none;
    font-weight: bold;
    color: none;
}

a:visited {
    color: none;
}

a:hover {
    color: none;
    text-decoration: underline;
}

a:focus {
    color: none;
}

a:active {
    color: none;
}

/* .headline a:hover, .navigation a:hover */
.headline a:hover
{
    text-decoration: none;
}