/* Variables */

    body.full {
        --image-background:url('https://static.kazimariusz.com/asset/tile/technical_bg.jpg');
		--background-attachment:scroll;
        --color-text:var(--color-black);
    }

/* Indexes */

    .index {
        display:flex;
        flex-direction: column;
        gap:4px;
        align-self:start;
        top:calc(var(--gutter-3) + 42px);
        margin-bottom:var(--gutter-2);
    }

    .skill {
        display:flex;
        align-items: center;
        display:grid;
        grid-template-columns: 100px 10px 10px 1fr;
    }

    .skill span {
        padding-right:var(--gutter-1);
        grid-column: 1;
        grid-row:1;
    }

    .skill img {
        width:20px;
        filter:saturate(0) brightness(0) invert(1);
        opacity:0.7;
        margin-right:-10px;
        grid-column: 2/4;
        grid-row:1;
        z-index:1;
    }

    .skill .progressbar {
        flex-grow:1;
        border-radius:10px;
        grid-column: 3/5;
        grid-row:1;border: 1px solid #8e8f8f;
        height: 15px;
        margin: 2px 0;
        overflow: hidden;
        position:relative;
    }

    .skill .progressbar:after {
        position:absolute;
        inset:0;
        content:"";
        display:block;
        background:linear-gradient(
            to right,
            transparent,
            transparent calc(100% - 2px),
            #8e8f8f1c calc(100% - 2px),
            #8e8f8f7d
        );
        background-size: calc(20% + 1px);
    }

    .skill .progressbar > div {
        --mix-value: 100%;
        /*background-color: color-mix(in srgb, #f62f4a var(--mix-value), #ffb595);*/
        background-color: color-mix(in srgb, #808080 var(--mix-value), #80808066);
        box-shadow: inset 0 0 0 1px #ffffff1f;
        height: 100%;
        width:100%;
        overflow: hidden;
    }

    .progressbar > div.progress_1 {
        --mix-value: 0%;
        width:calc(20% + 1px);
    }

    .progressbar > div.progress_2 {
        --mix-value: 25%;
        width:calc(40% + 2px);
    }

    .progressbar > div.progress_3 {
        --mix-value: 50%;
        width:calc(60% + 3px);
    }

    .progressbar > div.progress_4 {
        --mix-value: 75%;
        width:calc(80% + 4px);
    }

    body.full .skill img {
        filter:saturate(0) brightness(0) drop-shadow(0px 0px 1px white);
        
    }

    body.full .skill .progressbar {
        background: radial-gradient(circle at 0 50%, #0000001f 10px, transparent 30px), radial-gradient(circle at 100% 50%, #0000001f 10px, transparent 30px), linear-gradient(180deg, #f3f3f3af, #fcfcfcaf 3px, #dbdbdbaf 6px, #cacacaaf 0, #d5d5d5af), #ddd;
        box-shadow: inset 0 0 0 1px #f3f3f388, 0 0 0 1px #eaeaea88;
    }

    body.full .skill .progressbar:after {
        mix-blend-mode: multiply;
    }

    body.full .skill .progressbar > div {
        background-image: linear-gradient(180deg, #f3f3f3af, #fcfcfcaf 3px, #dbdbdbaf 6px, transparent 0), radial-gradient(circle at 0 50%, #0000002f 10px, transparent 30px), radial-gradient(circle at 100% 50%, #0000002f 10px, transparent 30px), linear-gradient(180deg, transparent 65%, #ffffff55), linear-gradient(180deg, transparent 6px, #cacaca33 0, #d5d5d533);
    }

    body.full .skill:hover .progressbar > div:before {
        animation: progressbar 3.5s linear infinite;
        background: linear-gradient(90deg, transparent, #ffffff80, transparent 40%);
        content: "";
        display: block;
        height: 100%;
        z-index:2;
    }
    
    @keyframes progressbar {
        0% {
        transform: translateX(-40%)
        }
        60% {
        transform: translateX(100%)
        }
        to {
        transform: translateX(100%)
        }
    }
    

    
/* Desktop */

@media only screen and (min-width: 1028px) {
    #content > div {
        display:grid;
        grid-template-columns:subgrid;
        grid-column:1/3;
    }

    #content .content {
        grid-column: 1;
        grid-row:1;
    }

    #content .index {
        grid-column: 2;
        grid-row:1;
        position:sticky;
    }
}

#content {
    row-gap:var(--gutter-4);
    padding:var(--gutter-2);
}