:root {
    --font-color: #474643;
    --tertiary-color: #717572;
    --background-color: #f0f1f2;
    --content-horizontal-padding: 10px;
    --list-marker: "\2013";
    --list-marker-hover: "\2E17";
}

body {
    font-family: 'Anonymous Pro', monospace;
    width: 90vw;
    margin: 0 auto;
    background-color: #f0f1f2;

    @media (max-width: 1400px) {
        width: 90vw;
    }

    @media (max-width: 530px) {
        font-size: 1.25rem;
    }
}


main {
    padding: 10px var(--content-horizontal-padding);
    --corner-rounding: 10px;
    border-bottom-right-radius: var(--corner-rounding);
    border-bottom-left-radius: var(--corner-rounding);
    /* color: var(--font-color); */
}

h1, h2 {
    font-weight: normal;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.5rem;
}

nav {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-around;

    @media (max-width: 1400px) {
        width: 50%;
    }

    @media (max-width: 960px) {
        justify-content: space-between;
        width: 100%;
    }

    menu {
        width: 100%;
        display: flex;
        /*align-items: center;*/
        padding-left: 0;
        list-style-type: none;
        justify-content: start;

        li {
            padding: 0 20px 0 0;

            a {
                text-decoration: none;
                color: var(--font-color);
                padding-bottom: 5px;

            }

            a:hover {
                color: var(--font-color);
                border-bottom: solid 2px var(--font-color);
            }
        }
    }
}

p {
    padding-top: 10px;
    margin: 0;

}

ol {
    padding: 0 10px;
    li {
        list-style-type: disc;
    }
}

pre {
    font-size: 1rem;
    color: unset;
}

.posts-list {
    li {
        list-style-type: disc;
    }
}

.profile-picture {
    height: 100px;
}

code {
    font-size: 1rem;
}

.summary {
    color: dimgray;
    font-style: italic;
    font-size: 1.15rem;
    margin-bottom: 1rem;
}

.last-updated {
    margin-bottom: 1rem;
    font-style: italic;
}

/* Everything below is taken from https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css */

pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 1em
}

code.hljs {
    padding: 3px 5px
}

.hljs {
    background: #f3f3f3;
    color: #444
}

.hljs-comment {
    color: #697070
}

.hljs-punctuation, .hljs-tag {
    color: #444a
}

.hljs-tag .hljs-attr, .hljs-tag .hljs-name {
    color: #444
}

.hljs-attribute, .hljs-doctag, .hljs-keyword, .hljs-meta .hljs-keyword, .hljs-name, .hljs-selector-tag {
    font-weight: 700
}

.hljs-deletion, .hljs-number, .hljs-quote, .hljs-selector-class, .hljs-selector-id, .hljs-string, .hljs-template-tag, .hljs-type {
    color: #800
}

.hljs-section, .hljs-title {
    color: #800;
    font-weight: 700
}

.hljs-link, .hljs-operator, .hljs-regexp, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-symbol, .hljs-template-variable, .hljs-variable {
    color: #ab5656
}

.hljs-literal {
    color: #695
}

.hljs-addition, .hljs-built_in, .hljs-bullet, .hljs-code {
    color: #397300
}

.hljs-meta {
    color: #1f7199
}

.hljs-meta .hljs-string {
    color: #38a
}

.hljs-emphasis {
    font-style: italic
}

.hljs-strong {
    font-weight: 700
}