@font-face {
    font-family: "SUSE Mono";
    src: url(/assets/googlefonts/SUSEMono/SUSEMono-VariableFont_wght.ttf)
}

@font-face {
    font-family: "Roboto Slab";
    src: url(/assets/googlefonts/Roboto_Slab/RobotoSlab-VariableFont_wght.ttf)
}

body {
    margin: 0px;
    display: grid;
    background-color: black;
    font-family: "SUSE Mono", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

code.inline {
    background-color: #111;
    padding: 0.25em;
    border-radius: 0.25em;
}

.code-block {
    background-color: #373737;
    box-shadow: 10px 10px 5px #111;
    margin-bottom: 1em;
}

.overflow-scroll {
    overflow-y: auto;
    max-height: 70vh;
    margin: 0px;
}

.banner {
    display: block;
    background-color: darkslategrey;
    color: white;
    margin: 0px;
    min-height: 3em;
    align-content: center;
    padding-left: 2em;
    padding-right: 2em;
}

.banner-link {
    color: white;
    text-decoration: none;
}

.banner-link:hover {
    color: white;
    text-decoration: underline;
}

.content {
    display: block;
    background-color: #1e1e1e;
    color: white;
    padding: 4em;
}

.paper {
    max-width: 40em;
    margin: 0 auto;
    text-align: justify;
    font-size: 0.25in;
    font-family: 'Roboto Slab', serif;
    background-color: #2e2e2e;
    padding: 1in;
}

.hljs {
    font-size: 0.15in;
}

.content-decal {
    width: 100%;
    height: 10em;
    object-fit: cover;
    margin: 0px;
    filter: brightness(80%);
}

img.nearest {
    image-rendering: pixelated;
}

.footer {
    color: white;
    padding-left: 2em;
    padding-right: 2em;
}

.grid-host {
    display: flex;
    flex-flow: wrap;
}

.grid-item {
    min-width: 16em;
    max-width: 24em;
    min-height: 20em;
    background-color: gray;
    margin: 1em;
    box-shadow: 10px 10px 5px #111;
    padding-bottom: 0.5em;
}

.grid-item-decal {
    width: 100%;
    height: 10em;
    object-fit: cover;
}

.grid-item-date {
    font-style: inherit;
    color: lightgray;
}

.grid-item-text {
    padding: 0.5em;
}

.grid-item-tags {
    display: flex;
    flex-flow: wrap;
    gap: 0.5em;
}

.grid-item-tag {
    background-color: rgba(0, 0, 0, 0.25);
    padding: 0.25em;
    border-radius: 0.25em;
}

.list-item {
}

.portfolio-item-project {
    background-color: mediumseagreen;
}

.portfolio-item-art {
    background-color: steelblue;
}