.belt-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.belt {
    width: 90px;
    height: 20px;
    margin: 5px 0;
    /*border: 1px solid #000;*/
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.45),
        inset 0 1px 1px rgba(255, 255, 255, 0.25),
        inset 0 0 0 1px rgba(255, 255, 255, 0.15),
        inset 0 -10px 30px rgba(255, 255, 255, 0.08);
}

/* Single Color Belts */
.belt-white {
    background-color: white;
}

.belt-yellow {
    background-color: yellow;
}

.belt-orange {
    background-color: orangered;
}

.belt-green {
    background-color: green;
}

.belt-blue {
    background-color: blue;
}

.belt-purple {
    background-color: purple;
}

.belt-brown {
    background-color: #6F4E37;
}

.belt-black {
    background-color: black;
}

.belt-red {
    background-color: red;
}

/* Two-Color Belt (Orange-Yellow) */
.belt-white-yellow {
    background: linear-gradient(to right,
        white 0%,
        white 25%,
        yellow 25%,
        yellow 50%,
        white 50%,
        white 75%,
        yellow 75%
    );
}

.belt-yellow-orange {
    background: linear-gradient(to right,
        yellow 0%,
        yellow 25%,
        orangered 25%,
        orangered 50%,
        yellow 50%,
        yellow 75%,
        orangered 75%
    );
}

.belt-orange-green {
    background: linear-gradient(to right,
        orangered 0%,
        orangered 25%,
        green 25%,
        green 50%,
        orangered 50%,
        orangered 75%,
        green 75%
    );
}

.belt-green-blue {
    background: linear-gradient(to right,
        green 0%,
        green 25%,
        blue 25%,
        blue 50%,
        green 50%,
        green 75%,
        blue 75%
    );
}

.belt-blue-brown {
    background: linear-gradient(to right,
        blue 0%,
        blue 25%,
        maroon 25%,
        maroon 50%,
        blue 50%,
        blue 75%,
        maroon 75%
    );
}

.belt-white-red {
    background: linear-gradient(to right,
        white 0%,
        white 25%,
        red 25%,
        red 50%,
        white 50%,
        white 75%,
        red 75%
    );
}

/* White belt with one yellow stripe */
.belt-white-trim-1 {
    background-color: white;
    position: relative;
}

.belt-white-trim-1::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: yellow;
    transform: translateY(-50%);
}

/* White belt with two yellow stripes */
.belt-white-trim-2 {
    background-color: white;
    position: relative;
}

.belt-white-trim-2::before,
.belt-white-trim-2::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: yellow;
}

.belt-white-trim-2::before {
    top: 25%;
    transform: translateY(-50%);
}

.belt-white-trim-2::after {
    top: 75%;
    transform: translateY(-50%);
}