@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&family=Noto+Sans+Math&family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anek+Devanagari:wght@100..800&family=Anek+Kannada:wght@100..800&display=swap');

:root {
    --site-bg: #F7F7F7;
    --site-fg: #111111;
    --site-contrast: #EEEEEE;
    --site-sub: #333333;
    --site-link: #002FA7;
    --site-code: #005500;
    --site-imp: #5F0A94;

    --sans-serif: "Public Sans", sans-serif;
    --monospace: "Iosevka Web", monospace;
    --serif: "Charter", serif;
    --math: "Noto Sans Math", sans-serif;
    --devanagari: "Anek Devanagari", "Nirmala UI", "Mangal", "Kokila", "Arial Unicode MS", system-ui, sans-serif;
    --kannada: "Anek Kannada", "Tunga", "Nirmala UI", "Kedage", "Arial Unicode MS", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --site-contrast: #212121;
    --site-fg: #F7F7F7;
    --site-link: #94B2FF;
    --site-sub: #BBBBBB;
    --site-bg: #111111;
    --site-code: #99CC66;
    --site-imp: #DCAEF9;
  }
}

@media print {
    header {
        display: none;
    }

    main pre {
        white-space: pre-wrap;
        word-wrap: normal; /* optional, not needed if white-space is pre-wrap */
        word-break: normal; /* prevent mid-word breaks */
        overflow-x: visible; /* allow wrapping */
    }

    div {
        break-inside: avoid;
    }
}

body {
	max-width: 650px;
	margin: 30px auto 0px auto;
    padding: 0 10px;
	font-family: var(--serif);
	color: var(--site-fg);
    background-color: var(--site-bg);
}


h1, h2, h3 {
    font-weight: normal;
    font-family: var(--sans-serif);
    line-height: 1.2;
}

header hr {
    border-style: solid;
    color: var(--site-fg);
}

header h1 {
    margin-bottom: 0;
}

header a[href],
header a[href]:visited,
header a[href]:hover,
header a[href]:active {
    color: var(--site-link);
    text-decoration: none;
}

header .subheader {
    color: var(--site-sub);
    font-size: 0.6em;
}

header .subheader {
  visibility: hidden;
}

header .subheader.visible {
  visibility: visible;
}

.devanagari {
    font-family: var(--devanagari);
}

.kannada {
    font-family: var(--kannada);
}

header nav {
    font-family: var(--monospace);
    font-size: 0.889rem;
}

header nav ul {
    padding: 0;
    margin-top: 0;
}

header nav li {
    display: inline;
}

main hr {
    border-top: 1px dashed var(--site-fg);
    border-left: none;
    border-right: none;
    border-bottom: none;
}

main .blog {
    margin-bottom: 0;
}

main .date {
    font-family: var(--monospace);
    color: var(--site-sub);
    font-size: 0.889rem;
    font-style: italic;
}

main .profile img {
	float: right;
	margin: 0 0.5em 0.5em 0;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	width: 100%;
	max-width: 150px;
	height: auto;
}

main .index-list {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1em;
}

main .index-item {
    display: contents;
}

main .index-list .index-date {
    grid-column: 1;
    grid-row: auto;
    text-align: right;
    white-space: nowrap;
    align-self: end;
    font-family: var(--monospace);
    font-size: 0.8em;
}

main .index-title {
    grid-column: 2;
    grid-row: auto;
    margin-bottom: 0;
}

main .index-extra-content {
    grid-column: 2;
    margin-bottom: 0.8em;
}

main .index-list > .index-extra-content:last-child {
    margin-bottom: 0;
}

main .index-line {
    margin-top: 0;
    margin-bottom: 0;
}

main .paper-title {
    font-family: var(--serif);
}

main .blog-title {
    font-family: var(--sans-serif);
}

main .blog-summary {
    color: var(--site-sub);
    font-style: italic;
    font-size: 0.889rem;
}

main a[href],
main a[href]:visited,
main a[href]:hover,
main a[href]:active {
    color: var(--site-link);
}

main pre, main code {
    font-family: var(--monospace);
    font-size: 0.889rem;
    font-weight: 300;
}

main pre {
    overflow-x: auto;
    white-space: pre;
    word-wrap: normal;
    word-break: normal;
    font-variant-ligatures: none;
    background-color: var(--site-contrast);
    padding: 0.5em;
    /* Taken from https://codyhouse.co/nuggets/beautiful-css-shadows */
    box-shadow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075),
                0 0 0 1px hsla(0, 0%, 0%, 0.05),
                0 0.3px 0.4px hsla(0, 0%, 0%, 0.02),
                0 0.9px 1.5px hsla(0, 0%, 0%, 0.045),
                0 3.5px 6px hsla(0, 0%, 0%, 0.09);
}

main code {
    background-color: var(--site-contrast);
    box-shadow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075),
                0 0 0 1px hsla(0, 0%, 0%, 0.05),
                0 0.3px 0.4px hsla(0, 0%, 0%, 0.02),
                0 0.9px 1.5px hsla(0, 0%, 0%, 0.045),
                0 3.5px 6px hsla(0, 0%, 0%, 0.09);
    padding-left: 0.2em;
    padding-right: 0.2em;
}

main pre code {
    box-shadow: none;
    padding: 0;
}

main math {
    font-family: var(--math);
    margin-top: 1em;
    margin-bottom: 1em; /*⊞*/
}

main p, main li, main blockquote {
    line-height: 1.5;
    font-size: 16px;
}

main p {
    word-wrap: break-word;
}

main div.quoteblock {
    border-left: 2px solid var(--site-fg);
}

main blockquote:has(+ div.attribution) {
    margin-bottom: 0px;
}

main .attribution {
    font-style: italic;
    margin-left: 40px;
    margin-right: 40px;
    margin-bottom: 1em;
    text-align: right;
}

main ul, main ol {
    padding-left: 20px;
}

main li::marker {
    content: "◦ ";
}

main li {
    padding-left: 0.5em;
}

main details {
    padding: 0.5em;
    box-shadow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075),
                0 0 0 1px hsla(0, 0%, 0%, 0.05),
                0 0.3px 0.4px hsla(0, 0%, 0%, 0.02),
                0 0.9px 1.5px hsla(0, 0%, 0%, 0.045),
                0 3.5px 6px hsla(0, 0%, 0%, 0.09);
    border-radius: 4px;
}

main details > :not(summary) {
    padding-left: 1em;
}

main .admonitionblock {
    padding: 0.5em 1em;
    box-shadow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075),
                0 0 0 1px hsla(0, 0%, 0%, 0.05),
                0 0.3px 0.4px hsla(0, 0%, 0%, 0.02),
                0 0.9px 1.5px hsla(0, 0%, 0%, 0.045),
                0 3.5px 6px hsla(0, 0%, 0%, 0.09);
}

main .admonitionblock.important > .title {
    color: var(--site-imp);
}

main .admonitionblock > .title {
    font-size: 1.25em;
    border-bottom: 1px solid currentColor;
}

main mark {
    color: var(--site-bg);
    background-color: var(--site-imp);
    padding-left: 0.1em;
    padding-right: 0.1em;
}

footer {
    display: none;
    font-family: var(--monospace);
    text-align: center;
    font-size: 0.75em;
    margin-top: 10px;
    margin-bottom: 10px;
}