@font-face {
  font-family: "/fonts/Inter";
  src: url("/fonts/Inter/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "/fonts/JetBrainsMono";
  src: url("/fonts/JetBrainsMono/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

$font: "/fonts/Inter", sans-serif;
$font-mono: "/fonts/JetBrainsMono", monospace;

$color-fg: #d5d5d5;
$color-bg: #121212;
$color-inset: #323232;
$color-accent: #e5a72a;

body {
    background-color: $color-bg;
    color: $color-fg;
    font-family: $font;
    font-size: 1rem;
    margin: auto;
    max-width: 60rem;
    min-width: 20rem;
    padding: 1em;
}

hr {
    border: none;
    height: 1px;
    background: $color-inset;
    margin-bottom: 1em;
}

nav {
    display: flex;
    justify-content: center;
    gap: 1.25em;
    font-family: $font-mono;
    margin-bottom: 1em;
}

h1 {
    font-family: $font-mono;
    font-size: 1.5rem;
    small {
        display: block;
        font-size: 0.7rem;
    }
}

h2 {
    font-family: $font-mono;
    font-size: 1.2rem;
    margin: 0;
}

a {
    color: $color-accent;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

section#index {
    aside {
        float: right;
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 40%;
        margin: 0 0 0 2rem;

        img {
            margin: 0 0 1rem;
            border-radius: 5px;
        }

        @media(max-width: 600px) {
            float: none;
            margin: 0 auto;
        }
    }
}

section#blog-index {
    span#article-date {
        font-family: $font-mono;
        font-size: 12px;
        margin-right: 1em;
    }

    ul {
        list-style: none;
        padding: 0;
    }

    a#rss-link {
        float: right;
    }
}

article {
    pre {
        background-color: $color-inset;
        padding: 0.5rem;
        overflow: scroll;
        border-radius: 5px;
        code {
            font-family: $font-mono;
            font-size: 0.8rem;
        }
    }
}