:root {
    --link-color: #4F5B93;
    --link-hover-color: #7A86B8;
    --scroll-indicator-color: #7A86B8;
    --table-row-background-color: #f1eeee;
    --table-border-color: #cccccc;
    --blockquote-border-color: #cccccc;
    --blockquote-text-color: var(--secondary-font-color);
}

[data-theme="dark"] {
    --link-color: #7A86B8;
    --link-hover-color: #AEB2D5;
    --scroll-indicator-color: #7A86B8;
    --table-row-background-color: #1f252c;
    --table-border-color: #3a414e;
    --blockquote-border-color: #555861;
    --blockquote-text-color: rgba(0, 0, 0, 0.65);
}

@media (min-width: 100px) {
    body {
        cursor: url('circle-cursor-purple.svg'), auto;
    }

    h1, h2, h3, h4 {
        font-family: "Libre Baskerville", serif;
        /*font-family: Georgia;*/
        font-weight: normal;
    }

    h1, h2 {
        font-weight: normal;
        text-align: left;
    }

    h1 {
        margin-top: 130px;
        font-size: 43px;
    }

    h2 {
        margin-top: 100px;
    }

    h3 {
        margin-top: 60px;
    }

    main {
        margin: 25px auto 100px auto;
        max-width: 900px;
        width: 92%;
        font-size: 21px;
        font-family: serif;
        word-wrap: break-word; /*breaks long words*/
    }

    ::selection {
        background: #4F5B93;
        color: var(--font-color-inverted, whitesmoke);
    }

    ul li {
        margin-bottom: 5px;
    }

    a {
        color: var(--link-color);
    }

    a:hover {
        color: var(--link-hover-color);
        filter: none; /*remove default filter*/
    }

    /*In the docs page the header should have a bottom box shadow*/
    header {
    }

    .header-fixed {
        position: fixed;
        top: 0;
        /* Header in docs page is 95% wide and it has to be centered horizontally */
        left: 50%;
        transform: translateX(-50%);

        transition: border-radius 0.3s ease-in-out, width 0.3s ease-in-out, margin-top 0.3s ease-in-out;
        /*Blurred transparent background with filter*/
        /*background: var(--background-color);*/
        /*background: var(--font-inverted-color);*/
        z-index: 1000;
    }

    .header-fixed.hidden {
        /* Hide header to the top when scrolled while keeping it centered horizontally */
        transform: translateY(-130%) translateX(-50%);
    }

    .header-fixed:not(.hidden).scrolled {
        /*box-shadow: 0 0 8px rgba(var(--bw-r), var(--bw-g), var(--bw-b), 0.15);*/
        /*Make floating header when scrolled*/
        left: 50%;
        transform: translateY(0) translateX(-50%);
        border-radius: 40px;
        width: 95%;
        margin-top: 20px;
        /*background: rgba(var(--bg-r), var(--bg-g), var(--bg-b), 0.3);*/
    }

    .frosted-glass {
        /*make frosty background effect with filter */
        /*background: var(--background-color);*/
        /*filter: blur(5px) brightness(0.8);*/
        background: transparent;
        border: 2px solid transparent;
        background-image:
                linear-gradient(rgba(var(--bg-r), var(--bg-g), var(--bg-b), 0.2), rgba(var(--bg-r), var(--bg-g), var(--bg-b), 0.2)),
                linear-gradient(145deg,
                rgba(255, 255, 255, 0.8) 0%,
                rgba(255, 255, 255, 0.5) 15%,
                rgba(255, 255, 255, 0.25) 40%,
                rgba(255, 255, 255, 0.4) 70%,
                rgba(255, 255, 255, 0.8) 100%);
        background-origin: border-box;
        background-clip: padding-box, border-box;

        backdrop-filter: blur(5px) brightness(0.95);
        box-shadow: var(--default-box-shadow);
    }

    [data-theme="dark"] .frosted-glass {
        box-shadow: 0 0px 25px rgba(0, 0, 0, 0.4);
        border: 2px solid transparent;
        background: transparent;
        background-image: linear-gradient(rgba(var(--bg-r), var(--bg-g), var(--bg-b), 0.3), rgba(var(--bg-r), var(--bg-g), var(--bg-b), 0.3)),
        linear-gradient(160deg,
                rgba(255, 255, 255, 0.13) 0%,
                rgba(255, 255, 255, 0.1) 15%,
                rgba(255, 255, 255, 0.04) 40%,
                rgba(255, 255, 255, 0.12) 70%,
                rgba(255, 255, 255, 0.13) 100%);
        background-origin: border-box;
        background-clip: padding-box, border-box;
        backdrop-filter: blur(5px) brightness(1.0);
    }

    details {
        padding-left: 20px;
    }

    details summary > * {
        display: inline;
    }

    details[open] summary ~ * {
        animation: sweep .15s ease-in-out;
    }

    @keyframes sweep {
        0% {
            opacity: 0;
            margin-left: -10px
        }
        100% {
            opacity: 1;
            margin-left: 0px
        }
    }

    table {
        border-collapse: collapse;
        display: block;
        overflow: hidden;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table td, th {
        border: 1px solid var(--table-border-color);
        padding: 8px 12px;
    }

    table thead th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left;
        background-color: var(--table-row-background-color);
        font-family: "Libre Baskerville", serif;
        font-size: 20px;
    }

    tr:nth-child(even) {
        background-color: var(--table-row-background-color);
    }

    #scroll-progress-bar {
        position: fixed;
        top: 0;
        left: 0;
        width: 0%;
        height: 4px;
        /*background-color: #2e3e50; */
        background-color: var(--scroll-indicator-color);
        z-index: 100;
    }

    blockquote {
        border-left: 4px solid var(--blockquote-border-color);
        color: var(--secondary-font-color);
        padding-left: 15px;
        margin-left: 15px;
    }

    img {
        margin-bottom: 15px;
        border-radius: 10px; /*Translations has screenshots that can't have too much br and code blocks also have 10px*/
    }

    pre img {
        margin-bottom: 0;
    }

    .header-anchor {
        display: none;
        margin-right: 8px;
        text-decoration: none;
        font-weight: bold;
        font-family: "Georgia", serif;
        font-size: 25px;
    }

    h1:hover .header-anchor,
    h2:hover .header-anchor,
    h3:hover .header-anchor,
    h4:hover .header-anchor,
    h5:hover .header-anchor,
    h6:hover .header-anchor,
    .header-anchor:hover {
        /*For mobile, display none and inline is used to toggle anchor visibility but for larger screens,
        it is always present but hidden with opacity*/
        display: inline;
        opacity: 1;
    }

    #page-title-container {
        height: 66svh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #page-title {
        /*Remove margin to center title on mobile*/
        margin-top: 0;
        margin-bottom: 0;
        font-size: 48px;
        text-align: center;
        padding: 30px 0;
        /*border-top: 4px double var(--table-border-color);*/
        border-top: 3px dotted var(--table-border-color);
        border-bottom: 3px dotted var(--table-border-color);
        font-weight: lighter;
    }

    #table-of-contents-loading {
        color: var(--secondary-font-color);
    }

    #table-of-contents {
        /*font-family: "Montserrat", sans-serif;*/
        font-family: "Libre Baskerville", serif;
        margin-bottom: 100px;
    }

    #table-of-contents a {
        text-decoration: none;
        color: var(--secondary-font-color);
    }

    #table-of-contents a:hover {
        text-decoration: underline;
        /*dotted underline*/
        text-decoration-style: dotted;
        color: var(--black-or-white-color);
    }

    /*List style type*/
    #table-of-contents ul {
        /*list-style: "❫ ";*/
        list-style: none;
    }

    #table-of-contents > ul > li::before {
        /*Not using list-style-type to make it smaller*/
        content: " ◗   ";
        font-size: 10px; /* Makes it smaller */
        margin-right: 5px;
        vertical-align: middle;
    }

    #table-of-contents > ul > li > ul > li::before {
        content: '• ';
        font-size: 14px;
        margin-right: 5px;
        vertical-align: middle;
    }

    #table-of-contents ul li ul li ul li::before {
        content: '○ ';
        font-size: 13px;
        margin-right: 5px;
        vertical-align: middle;
    }

    #table-of-contents ul li ul li ul li ul li::before {
        content: '▪ ';
        font-size: 15px;
        margin-right: 5px;
        vertical-align: middle;

    }

    #table-of-contents > ul {
        padding-left: 0;
    }

    #table-of-contents ul li {
        margin: 10px;
    }

    #table-of-contents > ul > li > a {
        font-size: 21px;
        font-weight: 500;
        color: var(--font-color);
    }

    #table-of-contents ul li ul li a {
        font-size: 19px;
    }

    #table-of-contents ul li ul li ul li a {
        font-size: 18px;
    }

    #table-of-contents ul li ul li ul li {
        margin: 2px;
    }

    /*Part of the header that should only be visible on docs-page when viewed on a large screen*/
    #floating-back-to-top {
        /* Display none breaks animation and if not hidden, button is still there just not visible */
        visibility: hidden;
        opacity: 0;
        display: flex;
        cursor: pointer;
        padding: 12px;
        border-radius: 50%;
        justify-content: center;
        gap: 12px;
        position: fixed;
        bottom: 15%;
        right: 0; /*Slide in from the left on .visible*/
        z-index: 10;
        /*background: rgba(var(--bg-r), var(--bg-g), var(--bg-b), 0.8);*/
        /*border: 2px solid var(--background-color);*/
        /*backdrop-filter: blur(5px) brightness(0.9);*/
        /*box-shadow: 0 0 8px rgba(var(--bw-r), var(--bw-g), var(--bw-b), 0.15);*/
        transition: right 0.3s ease-in-out, opacity 0.3s ease-in-out;
    }

    #floating-back-to-top:hover {
        /*outline: 1px solid var(--font-color);*/
        box-shadow: 0 2px 15px rgba(var(--bw-r), var(--bw-g), var(--bw-b), 0.25);
    }

    #floating-back-to-top img {
        width: 40px;
        filter: var(--black-or-white-icon-filter);
        margin-bottom: 0;
    }

    .giscus {
        margin-top: 70px;
    }

    p, ul, ol, li {
        line-height: 110%;
    }
}

/*portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones*/
@media (min-width: 641px) {
    h1, h2, h3, h4, h5, h6 {
        position: relative;
    }

    #page-title-container {
        height: 74svh;
    }

    #page-title {
        margin-bottom: 60px;
    }

    .header-anchor {
        margin: 0;
        opacity: 0;
        display: inline;
        position: absolute;
        padding: 32px;
        left: -58px;
        text-decoration: none;
        cursor: pointer;
        top: 50%;
        transform: translateY(-50%);
        font-size: 30px;
    }

    .header-anchor:hover {
        opacity: 1;
    }

    /*#table-of-contents {
        column-gap: 40px;
        columns: 1;
        font-family: "Libre Baskerville", serif;
        margin: 25px auto;
        max-width: 900px;
        width: 92%;
    }
    #table-of-contents ul {
        !*list-style: none;*!
        margin: 0;
        padding: 0;
        !*background: #6d87a5;*!
        !*text-align: center;*!
    }
    #table-of-contents ul li {
        margin-bottom: 26px;
        font-size: 22px;
        line-height: 23px;
        !*Prevents the li item from being split in a new column*!
        break-inside: avoid;
    }
    #table-of-contents ul li h3 {
        !*font-family: "Libre Baskerville", serif;*!
        font-family: Montserrat, "sans-serif";
        display: block;
        color: var(--title-color);
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 0;
        !*letter-spacing: 1px;*!
    }
    #table-of-contents ul li h3:first-child {
        margin-top: 0;
    }
    #table-of-contents ul li ul {
        padding-top: 8px;
    }
    #table-of-contents ul li li {
        margin-bottom: 6px;
        font-size: 18px;
        letter-spacing: 0.6px;
    }
    #table-of-contents ul li li a {
        border: none;
        color: var(--secondary-font-color);
        font-weight: normal;
        text-decoration: none;
        !*font-family: Montserrat, "sans-serif";*!
        font-family: "Libre Baskerville", "sans-serif";
        font-size: 17px;
    }
    #table-of-contents ul li li a:hover {
        text-decoration: underline 2.5px #484C89;
        text-underline-offset: 4px;
        color: var(--font-color);
    }
    [data-theme="dark"] #table-of-contents ul li li a:hover {
        text-decoration: underline 3px #7A86B8;
    }*/
    h1 {
        font-size: 48px;
    }

    #page-title {
        font-size: 55px;
    }

    main {
        font-size: 24px;
    }

    #floating-back-to-top.visible {
        visibility: visible;
        opacity: 1;
        right: 7%;
    }

}

/*tablet, landscape iPad, lo-res laptops ands desktops*/
@media (min-width: 961px) {
    .header-anchor {
        left: -70px;
        font-size: 35px;
    }

    .header-fixed:not(.hidden).scrolled {
        margin-top: 20px;
    }
}