@font-face {
    font-family: "montserrat";
    font-style: normal;
    src: url("/assets/fonts/Montserrat-Variable.ttf");
}

@font-face {
    font-family: "montserrat";
    font-style: italic;
    src: url("/assets/fonts/Montserrat-Italic.ttf");
}

@font-face {
    font-family: "cabin";
    font-style: normal;
    src: url("/assets/fonts/Cabin-Variable.ttf");
}

@font-face {
    font-family: "jetbrains";
    src: url("/assets/fonts/JetBrainsMono-Variable.ttf");
}

:root {
    --white: #F6F4F1;
    --black: #212121;
    --deep-blue: #013570;
    --light-blue: #023E82;

    color: var(--black);
    background-color: var(--white);
    font-family: "montserrat", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6em;
    text-align: justify;
}

:any-link {
    position: relative;
    color: var(--light-blue);
    text-decoration: none;
}

:any-link:hover {
    color: var(--deep-blue);
}

:any-link::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: var(--deep-blue);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

:any-link:hover::before {
    transform: scaleX(1);
}

h1, h2, a.reference, strong, summary {
    color: var(--black);
    font-family: "cabin", sans-serif;
    font-weight: 400;
}

code, pre {
    font-family: "jetbrains", monospace;
    font-weight: 500;
    color: var(--deep-blue);
}

.highlight:hover > span {
    background: var(--light-blue);
    color: var(--white);
}

strong, summary {
    font-size: 1.1em;
}

header h1 a {
    color: var(--light-blue) !important;
    font-weight: 200;
    font-family: "montserrat";
}

li.book {
    list-style: url("/assets/open-book-16x16.png");
}

li.journal {
    list-style: url("/assets/journal-16x16.png");
}