/* fira-code-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Fira Code';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/fira-code-v27-latin-regular.eot'); /* IE9 Compat Modes */
    src: url('../fonts/fira-code-v27-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/fira-code-v27-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
         url('../fonts/fira-code-v27-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
         url('../fonts/fira-code-v27-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
         url('../fonts/fira-code-v27-latin-regular.svg#FiraCode') format('svg'); /* Legacy iOS */
}

/* fira-code-500 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Fira Code';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/fira-code-v27-latin-500.eot'); /* IE9 Compat Modes */
    src: url('../fonts/fira-code-v27-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/fira-code-v27-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
         url('../fonts/fira-code-v27-latin-500.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
         url('../fonts/fira-code-v27-latin-500.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
         url('../fonts/fira-code-v27-latin-500.svg#FiraCode') format('svg'); /* Legacy iOS */
}

/* fira-code-600 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Fira Code';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/fira-code-v27-latin-600.eot'); /* IE9 Compat Modes */
    src: url('../fonts/fira-code-v27-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/fira-code-v27-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
         url('../fonts/fira-code-v27-latin-600.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
         url('../fonts/fira-code-v27-latin-600.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
         url('../fonts/fira-code-v27-latin-600.svg#FiraCode') format('svg'); /* Legacy iOS */
}

/* fira-code-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Fira Code';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/fira-code-v27-latin-700.eot'); /* IE9 Compat Modes */
    src: url('../fonts/fira-code-v27-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/fira-code-v27-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
         url('../fonts/fira-code-v27-latin-700.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
         url('../fonts/fira-code-v27-latin-700.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
         url('../fonts/fira-code-v27-latin-700.svg#FiraCode') format('svg'); /* Legacy iOS */
}

:root {
    --bd-color: #242222;
    --bg-color: #353333;
    --hl-color: #e74856;
    --hl-text: #fef9fa;
    --txt-color: #fef9fa;
}

@media (prefers-color-scheme: light) {
    :root {
        --bd-color: #cccaca;
        --bg-color: #fefbfb;
        --hl-color: #e74856;
        --hl-text: #140607;
        --txt-color: #140607;
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: 'Fira Code', monospace;
    font-size: 14px;
    color: var(--txt-color);
    line-height: 1.6;
    font-weight: 400;
}

body {
    min-height: 100dvh;
    height: 100%;
    background-color: var(--bd-color);
}

.webcontainer {
    margin: 0 auto;
    max-width: 800px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: left;
    padding-top: 2rem;
    background-color: var(--bg-color);
    box-shadow: 0 0 25px 5px rgba(7, 2, 3, .08);

    header {
        padding: 0 2.5rem 0;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: left;
        gap: 1rem;

        nav {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 1rem;
            font-weight: 500;
        }
    }

    main {
        padding: 2rem 2.5rem 0;

        section:not(:last-child) {
            margin-bottom: 2rem;
        }

        .pageheader {
            p:not(:last-child) {
                margin-bottom: 1rem;
            }
        }
    }

    footer {
        margin-top: 1.5rem;
        padding: 1rem 2.5rem 1.5rem;
        border-top: solid 2px var(--hl-color);
    }
}

.projectlistsection,
.postlistsection {
    .postlist {
        h3 {
            margin-bottom: 1rem;
        }

        li {
            display: flex;
            flex-direction: row;
            align-items: baseline;
            margin: 0 0 .75rem 1rem;
            list-style: none;
            h4 {
                font-size: 1rem;
                margin-bottom: 0;
                font-weight: 500;
            }
        }
    }

    .projectlist {
        li {
            margin: 0 0 .75rem 1rem;
            list-style: none;
            h4 {
                font-size: 1rem;
                font-weight: 500;
            }
        }
    }
}

h1 {
    font-size: 2rem;
    font-variant-ligatures: none;
}

h1:hover {
    font-style: italic;
    cursor: default;
}

h2 {
    font-size: 1.25rem;
    padding-bottom: 1.25rem;
}

a, a:active, a:visited {
    text-decoration: underline var(--hl-color) 1.5px;
    text-underline-offset: 2px;
    color: inherit;
}

a:hover {
    background-color: var(--hl-color);
}

a.active {
    background-color: var(--hl-color);
}

hr {
    width: 100%;
    color: var(--hl-color);
}

@media (max-width: 620px) {
    .webcontainer {
        header {
            padding: 0 1rem;
        }

        main {
            padding: 1.5rem 1rem 0;
            .projectlistsection,
            .postlistsection {
                .postlist {
                    h4 {
                        font-size: 1rem;
                    }

                    span {
                        display: none;
                    }

                    li {
                        display: block;
                        flex-direction: row;
                        align-items: baseline;
                        margin: 0 0 .75rem .5rem;
                        list-style: none;
                    }
                }
                .projectlist {
                    li {
                        margin: 0 0 .75rem .5rem;
                    }
                }
            }
        }

        footer {
            padding: 1rem 1rem 1.5rem;
        }
    }

    nav {
        line-height: 2;
    }
}

@media (max-width: 420px) {
    html {
        font-size: 14px;
    }

    h2 {
        font-size: 1rem;
    }
}