span.stars, span.stars span {
    display: block;
    background: url("/static/svg/blank-star.9a5dc787c534.svg") 0 0 repeat-x;
    width: 45px; /* width of a star multiplied by 5 */
    height: 15px; /* the height of the star */
    background-size: 15px 15px;
}

span.stars span {
    background-position: 0 0;
    background-image: url("/static/svg/filled-star.bede89a55c45.svg");
}

@property --num1 { syntax: '<integer>'; initial-value: 0; inherits: false; }
@property --num2 { syntax: '<integer>'; initial-value: 0; inherits: false; }


.anime-container {
    width: 80%;
    max-width: 700px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    position: relative;
    overflow: visible; /* Allow divider to overflow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Ctext x='50%25' y='50%25' font-family='Helvetica Neue, sans-serif' font-size='40' font-weight='bold' fill='rgba(0,0,0,0.1)' text-anchor='middle' dominant-baseline='middle'%3EGM Rating%3C/text%3E%3C/svg%3E");
}

.section {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: bold;
    color: white;
    transition: width 3s ease-in-out;
    border-radius: 2px;
}

.section-1 {
    background-color: #094f35;
    width: 50%;
    animation: expand-left 1s forwards ease-in-out;
}

.section-2 {
    background-color: #ff0000;
    width: 50%;
    animation: shrink-right 1s forwards ease-in-out;
}

.section-3 {
    background-color: #ff0000;
    width: 50%;
    animation: shrink-right 1s forwards ease-in-out;
}

.section-4 {
    background-color: #094f35;
    width: 50%;
    animation: expand-left 1s forwards ease-in-out;
}

.divider {
    width: 14px;
    height: 120%;
    top: -10%;
    background-color: #fff;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    animation: slide-divider 1s forwards ease-in-out;
    box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.6);
    border-radius: 5px;
}
.divider-2 {
    width: 14px;
    height: 120%;
    top: -10%;
    background-color: #fff;
    position: absolute;
    right: 55%;
    transform: translateX(55%);
    animation: slide-divider2 1s reverse ease-in-out;
    box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.6);
    border-radius: 5px;
}
@media (max-width: 600px) {
    .horizontal-container {
        height: 60px;
        width: 95%;
    }
    .section { font-size: 1.2rem; }
    .divider { width: 8px; }
}