.progressbar {
    width: 368px;
    height: 40px;

    box-sizing: border-box;

    background-color: var(--color-third);
    border: 5px solid var(--color-black-first);
    transition: 0.15s;

}

.progressbar::-webkit-progress-bar {
    background-color: var(--color-third);
}

.progressbar::-moz-progress-bar {
    background-color: var(--color-first);
}

.progressbar::-webkit-progress-value {
    background-color: var(--color-first);
}

.progressbar::-moz-progress-bar:hover {
    background-color: var(--color-first-highlight);
}
.progressbar::-webkit-progress-value:hover {
    background-color: var(--color-first-highlight);
}

@media screen and (max-width: 550px) {
    .progressbar {
        width: 300px;
        height: 35px;
    }
}

@media screen and (max-width: 460px) {
    .progressbar {
        width: 250px;
        height: 30px;
    }
}