.research-box {
    background-color: #ffffff1a;
    padding: 0.35rem 0;
    margin: 0.6rem auto;
    border-radius: 10px;
    width: min(1100px, 92vw);
    z-index: 10;
}

.bar-container {
    width: min(1060px, 88vw);
    margin: 0.15rem auto;
    height: 4px;
    border-radius: 2px;
    background-color: #ffffff24;
    display: flex;
}

.bar {
    max-width: 100%;
    height: 100%;
    border-radius: 2px;
    background-color: #ffffffa3;
    transition: width 450ms ease;
}

.bar-headings {
    display: flex;
    justify-content: center;
    width: min(1060px, 88vw);
    margin: 0.2rem auto 0.05rem;
    gap: 0.25rem;
}

.bar-text {
    color: #ffffff75;
    flex: 1;
    font-size: 0.8rem;
    text-align: center;
    font-weight: 300;
    transition: color 320ms ease, font-weight 320ms ease;
    white-space: nowrap;
}

.bar-text.active {
    color: #ffffffdd;
    font-weight: 500;
}

@media only screen and (max-width: 600px) {
    .research-box {
        width: 96vw;
        border-radius: 8px;
    }

    .bar-container,
    .bar-headings {
        width: 92vw;
    }

    .bar-headings {
        gap: 0.2rem;
    }

    .bar-text {
        font-size: 0.68rem;
        letter-spacing: 0;
    }
}