@import url("/style/fonts.css");

html {
	font-family: "SourceSerif4-Light";
    max-width: 600pt;
    margin-left: auto;
    margin-right: auto;
    background-color: #f0f0f0;
    color: black;
}

@media (prefers-color-scheme: dark) {
    html {
        max-width: 800pt;
        margin-left: auto;
        margin-right: auto;
        background-color: #151525;
        color: #a0a7be;
    }
}

h1 {
    font-size: 48pt;
    font-family: "SourceSerif4-SemiBold";
    margin: 0pt;
}

h2 {
    font-size: 36pt;
    font-family: "SourceSerif4-Medium";
    margin-bottom: 0pt;
}

h3 {
    font-size: 24pt;
    font-family: "SourceSerif4-Medium";
}

@media (prefers-color-scheme: dark) {
    h1, h2, h3 {
        color: #a0a7be;
    }
}

p {
    font-family: "SourceSerif4-Light";
    font-size: 14pt;
    line-height: 1.3;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
}

ul {
    list-style-type: none;
    padding-left: 0px;
}

nav ul {
    display: flex;
    padding: 0;
    margin: 0;
}

nav ul li {
    font-family: "SourceSerif4-Medium";
    font-size: 16pt;
    padding-right: 10pt;
}

a {
    text-decoration: none;
    color: rgb(46, 43, 225);
}

@media (prefers-color-scheme: dark) {
    a {
        text-decoration: none;
        color: #7490ec;
    }
}

a:hover {
    background-color: rgba(255, 178, 77, 0.244);
    border-radius: 5pt;
    padding: 2pt;
    margin: -2pt;
}

@media (prefers-color-scheme: dark) {
    a:hover {
        background-color: rgba(167, 122, 65, 0.144);
    }
}

hr {
    color: black;
}

.recommendationSection ul li p {
    margin-left: 0pt;
}

.titleBar {
    position: sticky;
    top: 0;
    background-color: #f0f0f0;
}

@media (prefers-color-scheme: dark) {
    .titleBar {
        background-color: #151525;
    }
}

.postDate {
    font-size: 10pt;
}