@import "https://www.nerdfonts.com/assets/css/webfont.css";

@keyframes transitionIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

body {
    background-color: var(--background-color);
    color: var(--color);
    font-family: Poppins, sans-serif;
    font-size: 18px;
    line-height: 32px;
    margin-bottom: 25px;
    padding-left: 15px;
    padding-right: 15px;
}

article {
    animation: transitionIn .5s ease-out;
    max-width: 1024px;
}

a {
    color: var(--link-color);
    text-decoration-line: underline;
    text-decoration-color: transparent;
    transition: 0.6s ease;
}

a:hover {
    text-decoration-color: inherit;
    transition: 0.3s ease;
}

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

menu a {
    color: var(--color);
    text-decoration: none;
}

menu li {
    border-image: linear-gradient(to right, transparent, var(--link-color), transparent) 1;
    border-bottom: 1px solid;
    font-size: 22px;
    width: 90%;
    transition: transform 0.6s ease;
    transform-origin: left center;
}

@media only screen and (max-width: 767px) {
    menu li {
        font-size: 16px;
    }
}

menu li:hover {
    transform: scale(1.02);
    transition: transform 0.3s ease;
}

menu a:hover {
    text-decoration: none;
}

menu > menu {
    margin-top: 0px;
    margin-left: 20px;
    margin-bottom: 0px;
}

::selection {
    text-shadow: none;
    background: var(--selection-background);
    color: var(--selection-color);
}

div.sourceCode {
    background-color: var(--code-background-color);
    border: 1px solid var(--code-border-color);
    border-radius: 5px;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 1.5
}

code {
    span.dt { color: var(--syntax-highlight-datatypes); }
    span.co { color: var(--syntax-highlight-comments); }
    span.st { color: var(--syntax-highlight-strings); }
    span.sc { color: var(--syntax-highlight-escapes); }
    span.op { color: var(--syntax-highlight-operators); }
    span.fu { color: var(--syntax-highlight-functions); }
    span.kw { color: var(--syntax-highlight-keywords); }
    span.dv { color: var(--syntax-highlight-numbers); }
    span.ot { color: var(--syntax-highlight-classes); }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #181a1b;
        --color: #e8e6e3;
        --link-color: #7ca0c0;
        --selection-background: #326587;
        --selection-color: #B4D8FF;
        --code-background-color: Black;
        --code-border-color: #303031;
        --syntax-highlight-datatypes: #dcdcdc;
        --syntax-highlight-strings: #9e6d5b;
        --syntax-highlight-escapes: #c79e62;
        --syntax-highlight-functions: #569cd6;
        --syntax-highlight-keywords: #569cd6;
        --syntax-highlight-numbers: #b5cea8;
        --syntax-highlight-classes: #dcdcdc;
        --syntax-highlight-operators: #dcdcdc;
        --syntax-highlight-comments: #57a64a;
    }
}

/* Light mode */
@media (prefers-color-scheme: light) {
    :root {
        --background-color: #ffffff;
        --color: #333;
        --link-color: #7593bd;
        --selection-background: #B4D8FF;
        --selection-color: #3498DB;
        --code-background-color: #fbfbfb;
        --code-border-color: #d4d4d4;
        --syntax-highlight-datatypes: #2b91af;
        --syntax-highlight-strings: #a31527;
        --syntax-highlight-escapes: #b776fb;
        --syntax-highlight-functions: #0000ff;
        --syntax-highlight-keywords: #0000ff;
        --syntax-highlight-numbers: #000000;
        --syntax-highlight-classes: #000000;
        --syntax-highlight-operators: #000000;
        --syntax-highlight-comments: #008000;
    }
}