:root {
    --filling-btn-width: 3px;
    --h1-font-weight: 800;
}

[data-theme="dark"] {
    --h1-font-weight: 700;
    --filling-btn-width: 2px;
}

::selection {
    background: var(--project-accent-color, var(--accent-color));
    color: var(--font-color-inverted, whitesmoke);
}


/*mobile first min-width sets base and content is adapted to computers.*/
@media (min-width: 100px) {
    * {
        box-sizing: border-box;
    }
    #wrapper{
        margin-bottom:60px;
    }

    h1 {
        font-family: 'Libre Baskerville', sans-serif;
        /*font-family: 'Outfit', sans-serif;*/
        font-size: 45px;
        /*text-decoration: underline;*/
        color: var(--title-color, var(--font-color));
        height: fit-content;
        width: fit-content;
        display: inline-block;
        font-weight: var(--h1-font-weight);
        transition: font-weight 0.1s ease;
    }

    h2, h3, h4 {
        margin-top: 35px;
    }

    details {
        margin: 20px 0;
    }

    .project-title-container {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 20px; /*space between the text and the icon*/
        margin-top: 13vh;
    }

    a.project-title-container {
        text-decoration: none;
    }

    .project-icon {
        width: 30px;
        height: 30px;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        filter: var(--black-or-white-icon-filter);
        display: none; /*hide on mobile*/
    }

    .normal-project-icon {
        width: 70px;
        margin-left: 20px;
    }

    /*When the icon should not be inverted*/
    .project-icon.same-for-dark-theme {
        filter: none;
    }

    .project-title-container:hover .project-icon {
        opacity: 1;
    }

    .project-title-container:hover {
        /*Remove default a:hover behaviour which increases brightness with filter*/
        filter: none;
    }

    .big-project-icon {
        /*width: 50px;*/
        height: 150px;
    }

    #project-badges {
        opacity: 0.8;
        margin-top: 0;
    }

    p {
        line-height: 24px;
    }

    p, li, h4 {
        font-size: 18px;
    }

    p, li {
        font-weight: 450;
        font-size: 17px;
    }

    li {
        line-height: 28px;
    }

    a {
        text-underline-offset: 2.7px;
        text-decoration: underline;
        text-decoration-thickness: 1px; /* Adjust the thickness as needed */
    }

    a {
        color: var(--project-link-color, var(--accent-color));
    }

    /*div.read-more-wrap p, div.read-more-wrap li {*/
    /*    font-size: 18px;*/
    /*}*/
    #big-link-buttons {
        display: flex;
        flex-wrap: wrap;
        /*justify-content: center;*/
        align-items: center;
        margin: 25px 0 25px 0;
        gap: 15px;
    }

    /*Filling btn style for project page (may have different size at other places)*/
    .filling-btn {
        font-size: 20px;
        font-family: 'Outfit', sans-serif;
        border-width: var(--filling-btn-width);
        /*Border color is defined in project-specific css file*/
        outline: 4px solid var(--background-color);
        transition: outline 0.2s ease;
        padding: 10px 25px;
        border-radius: 20px;
    }

    .filling-btn img {
        height: 22px;
    }


    #big-link-buttons a img :not(.not-svg) {
        /*Filter to slim example project primary color*/
        filter: invert(20%) sepia(9%) saturate(2106%) hue-rotate(172deg) brightness(93%) contrast(86%);
    }

    .filling-btn {
        border-color: var(--project-button-color, var(--accent-color));
        color: var(--project-button-color, var(--accent-color));
    }

    .filling-btn img {
        filter: var(--project-big-buttons-icon-filter);
    }

    .filling-btn:hover {
        color: var(--project-big-buttons-text-hover-color, whitesmoke);
    }

    /*Hover icon color*/
    .filling-btn:hover img {
        filter: var(--project-big-buttons-icon-filter-hover);
    }

    /*Hover filling color*/
    .filling-btn:before {
        background: var(--project-button-color, var(--accent-color));
    }

    .project-illustration {
        border: 4px solid var(--project-accent-color);
        border-radius: 30px;
        max-width: 700px;
        width: 100%;
        margin-bottom: 30px;
    }
}

/*portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones*/
@media (min-width: 641px) {
    .project-title-container {
        font-size: 50px;
    }

    .project-icon {
        display: initial;
    }
}

@media (min-width: 961px) {
    h1 {
        font-size: 50px;
        border-bottom: 1px solid var(--title-color, var(--font-color));

    }

    p, li, h4 {
        font-size: 18px;
    }

    .filling-btn {
        font-size: 23px;
    }

    .filling-btn img {
        height: 26px;
    }

    /*tablet, landscape iPad, lo-res laptops ands desktops*/
    .project-title-container {
        margin-top: 13vh;
    }

    .project-icon {
        width: 40px;
        height: 40px;
    }
}

@media (min-width: 1300px) {
    /*tablet, landscape iPad, lo-res laptops ands desktops*/
    .project-title-container {
        margin-top: 17vh;
    }
}

@media (min-width: 1600px) {
    .project-title-container {
        margin-top: 18vh;
    }
}