/* general stuff */
html {
    width: 100%;
}

body {
    margin: auto;
    font-family: Helvetica, Arial, sans-serif;
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
    background-color: rgb(245, 244, 251);
    color: #333;
    padding: 13px;
    max-width: 81rem;
}

a:link,
a:link:hover,
a:link:active {
    color: #0060df;
}

a:visited {
    color: #b5007f;
}

p,
li {
    /* text-align: justify; */
    font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif;
    font-size: large;
    line-height: 1.8em;
}

/* blog post stuff */
.text {
    max-width: 600px;
}

.feed-link {
    float: right;
    font-size: small;
}

@font-face {
    font-family: "Fira Code";
    src: url(./FiraCode-VariableFont_wght.ttf) format("truetype");
}

code {
    font-family: "Fira Code";
    font-size: smaller;
}

/* other layout stuff */
.multi-panel {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

.panel {
    background-color: rgb(244, 241, 253);
    margin: 2px;
    padding: 10px;
    border-radius: 6px;
}

.multi-panel .panel {
    border: rgb(224, 213, 255) 1px solid;
}

h2:first-child, h3:first-child {
    margin-top: 0.25em;
}

.one-third {
    flex: 15rem 1;
}

.two-thirds {
    flex: 30rem 2;
}

#projects div {
    margin: 4px -6px;
    padding: 10px;
    border-radius: 6px;
    border: rgb(225, 216, 255) 1px solid;
}

#projects a:link, a:link:hover, a:link:active {
    color: #0060df;
    text-decoration: inherit;
}

#projects a:visited {
    color: #6d032d;
}

@media (prefers-color-scheme:dark) {
    body {
        background-color: rgb(28, 27, 34);
        color: #ccc;
    }

    a:link,
    a:link:hover,
    a:link:active {
        color: #5080e8;
    }

    a:visited {
        color: #e675fd;
        color: #b5007f;
    }

    .panel {
        background-color: rgb(26, 25, 30);
    }
    
    .multi-panel .panel {
        border: rgb(50, 48, 56) 1px solid;
    }

    #projects div {
        border: rgb(50, 48, 56) 1px solid;
    }
    
    #projects a:link, a:link:hover, a:link:active {
        color: #80b0f0;
    }
    
    #projects a:visited {
        color: #f8d0e0;
    }    
}

@media (min-width: 81em) {
    body {
        width: 81rem
    }
}