:root{
    --bh-black: #000;
    --bh-white: #fff;
}

/* ===== Háttérminták ===== */

/* Finom fekete-fehér rács */
.bh-bg-grid{
    background:
            linear-gradient(var(--bh-black) 1px, transparent 1px),
            linear-gradient(90deg, var(--bh-black) 1px, transparent 1px);
    background-size: 40px 40px;
    background-color: var(--bh-white);
}

/* Nagy átlós csíkok */
.bh-bg-diagonal{
    background: repeating-linear-gradient(
            45deg,
            var(--bh-black) 0 10px,
            var(--bh-white) 10px 30px
    );
}

/* Váltakozó vízszintes sávok */
.bh-bg-stripes{
    background: repeating-linear-gradient(
            to bottom,
            var(--bh-black) 0 20px,
            var(--bh-white) 20px 40px
    );
}

/* Fekete pöttyök fehér alapon */
.bh-bg-dots{
    background-image: radial-gradient(var(--bh-black) 1.5px, transparent 1.5px);
    background-size: 20px 20px;
    background-color: var(--bh-white);
}

/* ===== Geometrikus alakzatok ===== */

/* Alap pozícionálás */
.bh-geo{
    position: absolute;
    width: var(--s, 100px);
    height: var(--s, 100px);
}

/* Kitöltött formák */
.bh-geo-square{
    background: var(--bh-black);
}
.bh-geo-circle{
    background: var(--bh-black);
    border-radius: 50%;
}

/* Körvonalas formák */
.bh-geo-outline-square{
    border: 3px solid var(--bh-black);
}
.bh-geo-outline-circle{
    border: 3px solid var(--bh-black);
    border-radius: 50%;
}

/* Háromszög */
.bh-geo-triangle{
    width: 0; height: 0;
    border-left: calc(var(--s, 100px) / 2) solid transparent;
    border-right: calc(var(--s, 100px) / 2) solid transparent;
    border-bottom: var(--s, 100px) solid var(--bh-black);
}