.skills__svg--stroke{
    fill:none;
    stroke: var(--main1);
    stroke-width:6;
    stroke-linecap:round;
}
.skills__svg--fill1{fill:#A2DBB5;}
.skills__svg--fill2{fill:#D8D1A3;}
.skills__svg--fill3{fill:#A1B57C;}
.skills__svg--fill4{fill:var(--teal);}

.s2-seemore{
    display: inline-block;
    width: 100%;
    text-align: right;
    transform-origin: right;
}

                                        /* MEDIA */
@media(max-width: 499px){
    .skills__card{
        display: grid;
        grid-template-areas:
        'ico skill__h'
        'ico j1'
        'ico j2'
        'ico j3'
        ;
        grid-template-columns: 1fr 8fr;
        grid-column-gap: 5vw;
        margin-bottom: 4ex;
    }
    .skills__h3{grid-area: skill__h}
    .skills__svg{grid-area: ico}
    .js1{grid-area: j1}
    .js2{grid-area: j2}
    .js3{grid-area: j3}

    .skills__svg{
        width: 20vw;
    }
    .skills__h3{
        margin-bottom: .6ex;
    }
}
@media(min-width:500px) and (max-width:999px){
    .skills__table{
        display: flex;
        flex-direction: row;
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }
    .skills__card{
        display: inline-block;
        vertical-align: top;
        margin: 0 2ex 6ex 2ex;
        width: 27ex;
        flex-shrink: 0;
        flex-grow: 0;
    }
    .placeholder{
        height:1px;
        width: 27ex;
        margin: 0 2ex 6ex 2ex;
    }
    .skills__svg{
        height: 11ex;
        width: 11ex;
        padding: 1.7ex 0;
    }
}
@media (min-width: 500px) and (max-width: 620px) {
    .skills__table {
        font-size: 2.5vw;
    }
}
@media(max-width: 999px){
    .s2__th, .skills__cellgroup:empty{display: none;}
    
    .js1__cell{background-image: url(../img/bullet1.svg)}
    .js2__cell{background-image: url(../img/bullet2.svg)}
    .js3__cell{background-image: url(../img/bullet3.svg)}
    .skills__cell{
        background-repeat: no-repeat;
        background-position-y: 50%;
        background-size: 1.5ex;
        padding-left: 2.5ex;
    }
    .skills__cell:hover{
        cursor: pointer;
    }

    .js1__cell:hover::after{content: 'In each project'}
    .js2__cell:hover::after{content: 'In newer projects'}
    .js3__cell:hover::after{content: 'On request'}

    [lang|="de"] .js1__cell:hover::after{content: 'In jedem Projekt'}
    [lang|="de"] .js2__cell:hover::after{content: 'In neueren Projekten'}
    [lang|="de"] .js3__cell:hover::after{content: 'Auf Anfrage'}

    @keyframes tooltip{
        0%{right: -20ex}
        20%{right: 0}
        80%{right: 0}
        100%{right: -20ex}
    }
    .skills__cell:hover::after{
        position: fixed;
        top: 60px;
        right: -20ex;
        background: var(--main1);
        color: white;
        padding: 1ex;
        animation: tooltip 6s 1;
        z-index: 15;
    }
}
@media(min-width: 1000px){
    .skills__table{
        display: flex;
        flex-direction: row;
        padding: 0 5%;
        flex-wrap: wrap;
    }
    .skills__h3{
        font-size: min(1.7vw, 130%);
    }
    .s2__th{
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        color: var(--middle);
        font-weight: 800;
        display: flex;
        align-items: end;
    }
    .s2__th__p{
        border-top: 1px solid var(--light);
        height: 6.8vw;
        font-size: 65%;
        padding: 1ex 1ex 1ex 3ex;
        vertical-align: baseline;
    }
    .s2__th__p:first-child{
        border-top: none;
        text-align: center;
    }
    .skills__cellgroup{
        border-bottom: 1px solid var(--light);
        height: 6.8vw;
    }
    .skills__cellgroup:last-child{
        border-bottom: none;
    }
    .skills__card{
        flex-grow: 1;
    }
    .skills__svg{
        height: 7vw;
        width: 7vw;
        padding: 1.5vw 0;
    }
    .skills__cell {
        padding: .5ex 0;
        font-size: min(1.5vw, 100%);
    }
    .placeholder{
        display: none;
    }
    .s2-seemore{
        text-align: right;
    }
}