/*:root {*/
/*    --mark-background: #bacfe4;*/
/*    --mark-background: #AEB2D5;*/
/*    --mark-background: transparent;*/

/*}*/

/*[data-theme="dark"] {*/
/*    --mark-background: #687fa3;*/
/*    --mark-background: #777BB3;*/
/*    --mark-background: transparent;*/
/*}*/

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

    h1,
    h2,
    h3,
    h4 {
        font-family: "Libre Baskerville", serif
    }

    h1 {
        position: relative;
        font-size: 43px;
        font-weight: normal;
        line-height: 50px;
        text-align: center

    }

    h2 {
        font-size: 35px;
        font-weight: normal;
        line-height: 36px
    }


    #first-part-home-page {
        height: 100%;
    }

    #banner {
        width: 100%;
        text-align: center;

        height: 50svh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        margin-bottom: 0;
    }

    #banner img {
        width: 160px;
        /*align-self: flex-end;*/
    }

    #banner img.dark-theme-visible {
        /*filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.5));*/
    }

    #banner img.light-theme-visible {
        filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.1));
    }

    /*#banner mark {*/
    /*    background: #99d3e8;*/
    /*    background: var(--mark-background);*/
    /*}*/
    #banner h1 {
        /*text-decoration: underline #2e3e50 dotted;*/
        text-decoration: underline 4px #7A86B8 dotted;
        text-underline-offset: 12px;
        text-align: center;
        display: inline-flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: center;
        gap: 10px;
        font-weight: bold;
        font-size: 46px;
        /*margin-top: 30px;*/
        padding: 0px 10px 0px 10px;
        /*margin-left: 15px;*/
        /*font-family: "Libre Baskerville", serif;*/
        font-family: var(--main-font-family), "sans-serif";
        /*letter-spacing: 3px;*/
        /*background: #a6dbed;*/
        /*border-radius: 20px;*/
        color: var(--title-color);
        /*color: #4F5B93;*/
        margin-bottom: 0;
        margin-top: 0;
        /*text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);*/
        /*border-left: 3px solid #7A86B8;*/
        /*border-right: 3px solid #7A86B8;*/
    }

    [data-theme="dark"] #banner h1 {
        /*text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);*/
        /*text-shadow: 0px 0px 2px #777BB3;*/
        /*text-shadow: -2px -2px 0 #777BB3, 2px -2px 0 #777BB3, -2px 2px 0 #777BB3, 2px 2px 0 #777BB3;*/
        /*-webkit-text-fill-color: transparent;*/
        /*-webkit-text-stroke: 2px #777BB3;*/
        /*color: #777BB3;*/
        /*color: #AEB2D5;*/
        /*color: #4F5B93;*/
        color: #4F5B93;
    }

    #docs-page-banner-projects {
        display: none;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 10px 2.5%;
        padding: 10px;
        border-radius: 15px;
        /*background: rgba(var(--bw-r), var(--bw-g), var(--bw-b), 0.05);*/
        /*text-align: center;*/
    }

    #docs-page-banner-projects a {
        /*Overwrite layout a color*/
        color: var(--secondary-font-color);
        font-size: 15px;
        font-weight: 400;
        text-decoration: none;
        transition: color 250ms ease;
    }

    #banner p a:hover {
        color: var(--font-color);
    }

    .bullet-point {
        color: var(--secondary-font-color);
        /*color: #7A86B8;*/
        font-size: 13px;
        margin: 0;
    }

    /*#banner p a:not(:last-child)::after {*/
    /*    content: '•'; !* Space followed by a bullet point *!*/
    /*    !*padding: 0 10px; !* Adjust space around the bullet point as needed *!*!*/
    /*}*/
    #docs-toc {
        column-gap: 40px;
        columns: 1;
        font-family: "Libre Baskerville", serif;
        margin: 34px auto;
        max-width: 900px;
        width: 92%;
    }

    #docs-toc ul {
        list-style: none;
        margin: 0;
        padding: 0;
        /*background: #6d87a5;*/
        text-align: left;
    }

    #docs-toc 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;
    }

    #docs-toc ul li h3 {
        /*font-family: "Libre Baskerville", serif;*/
        font-family: var(--main-font-family), "sans-serif";
        display: block;
        color: var(--title-color);
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 0;
        /*letter-spacing: 1px;*/
    }

    #docs-toc ul li h3:first-child {
        margin-top: 0;
    }

    #docs-toc ul li ul {
        padding-top: 8px;
    }

    #docs-toc ul li li {
        margin-bottom: 6px;
        font-size: 18px;
        letter-spacing: 0.6px;
    }

    #docs-toc 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;
    }

    #docs-toc ul li li a:hover {
        text-decoration: underline 2.5px #484C89;
        text-underline-offset: 4px;
        color: var(--font-color);
    }

    [data-theme="dark"] #docs-toc ul li li a:hover {
        text-decoration: underline 3px #7A86B8;
    }
}

@media (min-width: 500px) {
    #docs-toc {
        columns: 2;
    }

    #docs-toc ul {
        text-align: center;
    }

    #banner h1 {
        margin-bottom: 0;
    }
    #docs-toc{
        margin-top: 0;
    }

    /* Banner projects have been removed for now but css still here in case they are added later */
    #docs-page-banner-projects {
        margin-top: 2vh;
        margin-bottom: 6vh;
        background: none;
        display: inline-flex;
        gap: 10px 2.5vw;
    }

    #docs-page-banner-projects a {
        /*Overwrite layout a color*/
        color: var(--secondary-font-color-2);
    }

}

/*portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones*/
@media (min-width: 641px) {

    #banner h1 {
        font-size: 48px;
        padding: 0px 40px 0px 40px;
    }

    #banner img {
        width: 180px;
    }
}

/*After this breakpoint it looks good to have 3 columns*/
@media (min-width: 755px) {
    #docs-toc {
        columns: 3;
    }

    #banner {
        height: auto;
        display: inline-block;
        margin-bottom: 7vh;
    }
}

/*tablet, landscape iPad, lo-res laptops ands desktops*/
@media (min-width: 961px) {
}