*,
*::after,
*::before {
    box-sizing: border-box;
}

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 100 900;
    src: url('/raleway.woff2') format('woff2');
    font-display: swap;
}

html {

}

body {
    background: ivory;
    margin: 2vw;

    color: rgb(135, 130, 246);

    --size: calc(100vw / var(--faeden, 14) * 0.45);

    font-family: 'Raleway', sans-serif;
    font-weight: 450;
    font-style: normal;
    line-height: 1.5;
    font-optical-sizing: auto;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
}

.farb-felder,
.muster {
    display: grid;
    grid-template-columns: repeat( calc(var(--faeden) * 3), minmax(0, 1fr));
    column-gap: 0;
    row-gap: 0.6rem;
    width: max-content;

    .erste-reihe,
    .zweite-reihe {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: subgrid;
    }

    .zweite-reihe {
        grid-column: 2 / -2;
        translate: calc(var(--size) / 6) calc(var(--size) / -5.5);
        margin-bottom: calc(var(--size) / -2);
    }

    .faden,
    .farbfeld {
        grid-column-end: span 3;

        width: var(--size);
        height: calc(var(--size) * 1.0);
        padding: 0;
        background: none;
        /* rotate: 45deg; */
        display: block;
    }

    .faden {
        outline: 2px solid black;

        background: var(--bg, white);
    }
}

.muster {
    margin-top: 2rem;

    > div {
        position: relative;

        &:nth-child(1) {
            z-index: 1;
        }

        &:nth-child(2) {
            z-index: 2;
        }

        &:nth-child(3) {
            z-index: 3;
        }

        &:nth-child(4) {
            z-index: 4;
        }

        &:nth-child(5) {
            z-index: 5;
        }

        &:nth-child(6) {
            z-index: 6;
        }

        &:nth-child(7) {
            z-index: 7;
        }

        &:nth-child(8) {
            z-index: 8;
        }

        &:nth-child(9) {
            z-index: 9;
        }

        &:nth-child(10) {
            z-index: 10;
        }

        &:nth-child(11) {
            z-index: 11;
        }

        &:nth-child(12) {
            z-index: 12;
        }

        &:nth-child(13) {
            z-index: 13;
        }

        &:nth-child(14) {
            z-index: 14;
        }

        &:nth-child(15) {
            z-index: 15;
        }
    }

    .farbfeld {
        background-color: var(--bg);
        position: relative;

        &::before,
        &::after {
            --height: 0.3rem;
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;

            height: var(--height);
            translate: 0 calc(var(--height) * -0.98);

            background-color: var(--bg);

            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        }

        &::after {
            top: auto;
            bottom: 0;
            translate: 0 calc(var(--height) * 1.09);
            rotate: 180deg;
        }
    }
}

.erste-reihe {
    .farbfeld, .faden {
        &:nth-child(1) {
            --bg: var(--faden-1-1, darkgrey);
        }

        &:nth-child(2) {
            --bg: var(--faden-1-2, darkgrey);
        }

        &:nth-child(3) {
            --bg: var(--faden-1-3, darkgrey);
        }

        &:nth-child(4) {
            --bg: var(--faden-1-4, darkgrey);
        }

        &:nth-child(5) {
            --bg: var(--faden-1-5, darkgrey);
        }

        &:nth-child(6) {
            --bg: var(--faden-1-6, darkgrey);
        }

        &:nth-child(7) {
            --bg: var(--faden-1-7, darkgrey);
        }

        &:nth-child(8) {
            --bg: var(--faden-1-8, darkgrey);
        }

        &:nth-child(9) {
            --bg: var(--faden-1-9, darkgrey);
        }

        &:nth-child(10) {
            --bg: var(--faden-1-10, darkgrey);
        }

        &:nth-child(11) {
            --bg: var(--faden-1-11, darkgrey);
        }

        &:nth-child(12) {
            --bg: var(--faden-1-12, darkgrey);
        }

        &:nth-child(13) {
            --bg: var(--faden-1-13, darkgrey);
        }

        &:nth-child(14) {
            --bg: var(--faden-1-14, darkgrey);
        }

        &:nth-child(15) {
            --bg: var(--faden-1-15, darkgrey);
        }
    }
}

.zweite-reihe {

    .farbfeld, .faden {
        &:nth-child(1) {
            --bg: var(--faden-2-1, darkgrey);
        }

        &:nth-child(2) {
            --bg: var(--faden-2-2, darkgrey);
        }

        &:nth-child(3) {
            --bg: var(--faden-2-3, darkgrey);
        }

        &:nth-child(4) {
            --bg: var(--faden-2-4, darkgrey);
        }

        &:nth-child(5) {
            --bg: var(--faden-2-5, darkgrey);
        }

        &:nth-child(6) {
            --bg: var(--faden-2-6, darkgrey);
        }

        &:nth-child(7) {
            --bg: var(--faden-2-7, darkgrey);
        }

        &:nth-child(8) {
            --bg: var(--faden-2-8, darkgrey);
        }

        &:nth-child(9) {
            --bg: var(--faden-2-9, darkgrey);
        }

        &:nth-child(10) {
            --bg: var(--faden-2-10, darkgrey);
        }

        &:nth-child(11) {
            --bg: var(--faden-2-11, darkgrey);
        }

        &:nth-child(12) {
            --bg: var(--faden-2-12, darkgrey);
        }

        &:nth-child(13) {
            --bg: var(--faden-2-13, darkgrey);
        }

        &:nth-child(14) {
            --bg: var(--faden-2-14, darkgrey);
        }

        &:nth-child(15) {
            --bg: var(--faden-2-15, darkgrey);
        }
    }
}


.farb-palette {
    margin-bottom: 2rem;

    ul {
        padding: 0;
        margin: 0 0 1rem 0;
        list-style-type: "";
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;

        li {
            input {
                padding: 0;

                aspect-ratio: 1;
                width: 2rem;
                border: 2px solid black;
            }
        }
    }
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr) );
    gap: 2rem;
}

button{
    cursor: pointer;
    color: black;
    background-color: rgba(255, 97, 97, 0.8);
    border: none;
    padding: 0.4em 0.8em;
    border-radius: 0.3em;
    letter-spacing: 0.05em;

    outline: 2px solid transparent;
    transition: outline 0.2s ease-out;

    &:hover,
    &:focus-visible{
        outline-color: rgba(255, 97, 97, 0.8);
        outline-offset: 0.1em;
    }

    display: flex;
    gap: 1ch;
    align-items: center;

    span{
        font-weight: 600;
        scale: 2;
    }
}