:root {
    --frame-size: 120px;
    --stripe-height: 6px;
    --stripe-gap: 0.1px;
}

.frame {
    width: var(--frame-size);
    height: var(--frame-size);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 750%;
    font-weight: bold;
    font-family: 'serif';
    color: white;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-text-stroke: 1.75px rgba(0, 0, 0, 0.75);
}

.frame-container {
    width: var(--frame-size);
    height: var(--frame-size);
    position: relative;
    display: inline-block;
    margin: 4px;
}

.frames-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 1em 0;
}

/* Base colors */
.a { background-color: #ff9999; }
.b { background-color: #9999ff; }
.c { background-color: #c4e680; }
.d { background-color: #cc99e6; }
.e { background-color: #ff99db; }
.f { background-color: #ffbb66; }
.g { background-color: #66e6c4; }
.h { background-color: #db99ff; }
.i { background-color: #99dbff; }
.j { background-color: #ffd966; }

/* Interlacing effect - using a reusable pattern */
.top-field,
.bottom-field {
    clip-path: polygon(
        0 0, 100% 0, 100% calc(var(--stripe-height) - var(--stripe-gap)), 0 calc(var(--stripe-height) - var(--stripe-gap)),
        0 calc(var(--stripe-height) * 2), 100% calc(var(--stripe-height) * 2), 100% calc(var(--stripe-height) * 3 - var(--stripe-gap)), 0 calc(var(--stripe-height) * 3 - var(--stripe-gap)),
        0 calc(var(--stripe-height) * 4), 100% calc(var(--stripe-height) * 4), 100% calc(var(--stripe-height) * 5 - var(--stripe-gap)), 0 calc(var(--stripe-height) * 5 - var(--stripe-gap)),
        0 calc(var(--stripe-height) * 6), 100% calc(var(--stripe-height) * 6), 100% calc(var(--stripe-height) * 7 - var(--stripe-gap)), 0 calc(var(--stripe-height) * 7 - var(--stripe-gap)),
        0 calc(var(--stripe-height) * 8), 100% calc(var(--stripe-height) * 8), 100% calc(var(--stripe-height) * 9 - var(--stripe-gap)), 0 calc(var(--stripe-height) * 9 - var(--stripe-gap)),
        0 calc(var(--stripe-height) * 10), 100% calc(var(--stripe-height) * 10), 100% calc(var(--stripe-height) * 11 - var(--stripe-gap)), 0 calc(var(--stripe-height) * 11 - var(--stripe-gap)),
        0 calc(var(--stripe-height) * 12), 100% calc(var(--stripe-height) * 12), 100% calc(var(--stripe-height) * 13 - var(--stripe-gap)), 0 calc(var(--stripe-height) * 13 - var(--stripe-gap)),
        0 calc(var(--stripe-height) * 14), 100% calc(var(--stripe-height) * 14), 100% calc(var(--stripe-height) * 15 - var(--stripe-gap)), 0 calc(var(--stripe-height) * 15 - var(--stripe-gap)),
        0 calc(var(--stripe-height) * 16), 100% calc(var(--stripe-height) * 16), 100% calc(var(--stripe-height) * 17 - var(--stripe-gap)), 0 calc(var(--stripe-height) * 17 - var(--stripe-gap)),
        0 calc(var(--stripe-height) * 18), 100% calc(var(--stripe-height) * 18), 100% calc(var(--stripe-height) * 19 - var(--stripe-gap)), 0 calc(var(--stripe-height) * 19 - var(--stripe-gap)),
        0 calc(var(--stripe-height) * 20), 100% calc(var(--stripe-height) * 20), 100% calc(var(--stripe-height) * 21 - var(--stripe-gap)), 0 calc(var(--stripe-height) * 21 - var(--stripe-gap))
    );
}

.bottom-field {
    clip-path: polygon(
        0 calc(var(--stripe-height) + var(--stripe-gap)), 100% calc(var(--stripe-height) + var(--stripe-gap)), 100% calc(var(--stripe-height) * 2), 0 calc(var(--stripe-height) * 2),
        0 calc(var(--stripe-height) * 3 + var(--stripe-gap)), 100% calc(var(--stripe-height) * 3 + var(--stripe-gap)), 100% calc(var(--stripe-height) * 4), 0 calc(var(--stripe-height) * 4),
        0 calc(var(--stripe-height) * 5 + var(--stripe-gap)), 100% calc(var(--stripe-height) * 5 + var(--stripe-gap)), 100% calc(var(--stripe-height) * 6), 0 calc(var(--stripe-height) * 6),
        0 calc(var(--stripe-height) * 7 + var(--stripe-gap)), 100% calc(var(--stripe-height) * 7 + var(--stripe-gap)), 100% calc(var(--stripe-height) * 8), 0 calc(var(--stripe-height) * 8),
        0 calc(var(--stripe-height) * 9 + var(--stripe-gap)), 100% calc(var(--stripe-height) * 9 + var(--stripe-gap)), 100% calc(var(--stripe-height) * 10), 0 calc(var(--stripe-height) * 10),
        0 calc(var(--stripe-height) * 11 + var(--stripe-gap)), 100% calc(var(--stripe-height) * 11 + var(--stripe-gap)), 100% calc(var(--stripe-height) * 12), 0 calc(var(--stripe-height) * 12),
        0 calc(var(--stripe-height) * 13 + var(--stripe-gap)), 100% calc(var(--stripe-height) * 13 + var(--stripe-gap)), 100% calc(var(--stripe-height) * 14), 0 calc(var(--stripe-height) * 14),
        0 calc(var(--stripe-height) * 15 + var(--stripe-gap)), 100% calc(var(--stripe-height) * 15 + var(--stripe-gap)), 100% calc(var(--stripe-height) * 16), 0 calc(var(--stripe-height) * 16),
        0 calc(var(--stripe-height) * 17 + var(--stripe-gap)), 100% calc(var(--stripe-height) * 17 + var(--stripe-gap)), 100% calc(var(--stripe-height) * 18), 0 calc(var(--stripe-height) * 18),
        0 calc(var(--stripe-height) * 19 + var(--stripe-gap)), 100% calc(var(--stripe-height) * 19 + var(--stripe-gap)), 100% calc(var(--stripe-height) * 20), 0 calc(var(--stripe-height) * 20)
    );
}