@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap');

@font-face {
    font-family: "Palatino Linotype";
    font-weight: normal;
    font-style: normal;
    src: url("../fonts/palatinolinotype_roman.ttf")
}

@font-face {
    font-family: "Palatino Linotype";
    font-weight: bold;
    font-style: normal;
    src: url("../fonts/palatinolinotype_bold.ttf")
}

@font-face {
    font-family: "Palatino Linotype";
    font-weight: normal;
    font-style: italic;
    src: url("../fonts/palatinolinotype_italic.ttf")
}

@font-face {
    font-family: "Palatino Linotype";
    font-weight: bold;
    font-style: italic;
    src: url("../fonts/palatinolinotype_bolditalic.ttf")
}

:root>* {
    /* Font settings */
    --md-text-font: "Palatino Linotype", "Noto Serif JP", serif;

    /* Primary color shades */
    --md-primary-fg-color: #23373b;
    /* --md-primary-fg-color--light: #ECB7B7; */
    /* --md-primary-fg-color--dark: #90030C; */
    --md-primary-bg-color: #fafafa;
    /* --md-primary-bg-color--light: #fafafa; */

    /* Accent color shades */
    /* --md-accent-fg-color: hsla(#{hex2hsl($clr-indigo-a200)}, 1); */
    /* --md-accent-fg-color--transparent: hsla(#{hex2hsl($clr-indigo-a200)}, 0.1); */
    /* --md-accent-bg-color: hsla(0, 0%, 100%, 1); */
    /* --md-accent-bg-color--light: hsla(0, 0%, 100%, 0.7); */
}

.typst-math>svg {
    overflow: visible;
}

div.typst-math {
    display: flex;
    justify-content: center;
}

/*
    https://v3.tailwindcss.com/docs/screen-readers
    will interrupt the selection, thus unusable
*/
.sr-only {
    position: absolute;
    left: -9999px;
}