@font-face {
        font-family: 'Figtree';
        font-style: normal;
        src: url('/fonts/Figtree.woff2');
        font-display: swap;
        font-weight: 1 999;  
    }

    @font-face {
        font-family: 'Source';
        font-style: normal;
        src: url('/fonts/novela.ttf');
        font-display: swap;
        font-weight: 400;  
    }

    @font-face {
        font-family: 'Source';
        font-style: normal;
        src: url('/fonts/novela-600.woff2');
        font-display: swap;
        font-weight: 600;  
    }

    @font-face {
        font-family: 'Source';
        font-style: normal;
        src: url('/fonts/novela-500.woff2');
        font-display: swap;
        font-weight: 500;  
    }

     @font-face {
        font-family: 'Source';
        font-style: normal;
        src: url('/fonts/novela-800.woff2');
        font-display: swap;
        font-weight: 800;  
    }


    :root{
        --text: #3a3a3a;
        --theme: #9B0000;
        --theme-light: rgba(142, 27, 17, 0.5);
        --light: #AAAAAA;
        --lighter: #CCCCCC;
        --main: -apple-system-ui-serif, ui-serif, Georgia, Charter, serif;
        --sub: system-ui, sans-serif;
    }

    *{
        box-sizing: border-box;
        position: relative;
    }

    ::selection{
        background: rgba(200, 27, 17, 0.15)
    }

    html{
        scroll-behavior: smooth;
    }

    body{
        font-family: var(--main);
        background: #FFFFFF;
        color: var(--text);
        margin: 0px;
        line-height: 1.5em;
        font-weight: 400;
        background: rgba(5, 12, 86, 0);
        overscroll-behavior-y: none;
        text-align: center;
        padding-bottom: 4em;
        font-size: 16.5px;
    }

    nav{
        display: flex;
        justify-content: space-between;
        text-transform: uppercase;
        margin-bottom: 6em;
        width: 100%;
    }

    nav a {
        text-decoration: none;
    } 

    .title{
        margin-top: 4em;
        display: flex;
        justify-content: space-between;
        position: relative;
        font-family: var(--main);
    }

    .title::after{
        content: ' ';
        border-bottom: solid 1.5px var(--text);
        width: calc(100% + 12px);
        height: 2px;
        position: absolute;
        bottom: -5.5px;
        left: -6px;
    }

    .title h2{
        text-transform: uppercase;
        font-weight: 500;
        font-size: 1.4em;
        display: inline-block;
        margin: 0px;
        color: var(--theme);
        letter-spacing: 0.5px;
    }

    .title aside{
        display: inline-block;
        color: var(--lighter);
        font-size: 1.2em;
        text-align: right;
        font-style: italic;
    }

    .title + p {
        margin-top: 1.5em;
    }

    .subtitle{
        margin: 1.4rem 0em;
        font-size: 0.95em;
        color: var(--light);
        line-height: 1.4em;
/*        font-family: var(--sub);*/
    }

    .subtitle a{
        text-decoration: none;
/*        font-weight: 600;*/
        color: var(--theme-light);
    }

    .list{
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .entry{
        display: flex;
        position: relative;
        text-align: left;
        gap: 0.7em;
        justify-content: space-between;
        font-family: var(--main);
    }

    .entry div{
        text-align: right;
        color: var(--lighter);
        font-family: var(--sub);
    }



    .starterpack{
        column-count: 3;
        padding-top: 2em;
        gap: 1em;
    }

    .starterpack img{
        margin-bottom: 0.5em;
        display: inline-block;
        border: solid 1px var(--light);
        padding: 0px;
    }

    .recommendations{
        /*display: flex;
        flex-wrap: wrap;
        gap: 0.75em 1em;*/
        column-count: 2;
        gap: 1em;
        font-size: 0.95em;
    }

    .recommendations a{
        margin-bottom: 1em;
        display: block;
        line-height: 1.4em;
    }



    .writing h3{
        color: var(--theme);
        font-weight: 400;
        margin: 2em 0px 10px 0px;
    }

    .stars{
        display: flex;
        height: 0.9em;
        gap: 0.25em;
        opacity: 0.7;
        margin-top: 4px;
    }

    .project{
        margin-bottom: 2em;
    }

    .project h3{
        font-weight: 600;
        margin: 0px;
    }

    .project-title{
        display: flex;
        gap: 0.75em;
        margin-bottom: 0.25em;
    }

    .project-title aside{
        color: var(--theme-light);
        line-height: 1.65em;
    }

    .project-title a{
        text-decoration: none;
    }

    a{
        color: inherit;
        font-weight: inherit;
    }

    a:hover{
        color: #9B0000;
    }

    img{
        width: 100%;
    }

    li{
        margin: 0.5em 0em;
    }

    h2 a {
        text-decoration: none;
    }

    @media (max-width: 500px){
        body{
            padding: 0em 0.5em;
        }
    }