2 Progress bars with different colors - html

Question

I've made 2 progress bars with succes! But here's the hard part, I'm trying to give both of them a different color with CSS styling by using classes on the progress bars and styling them in CSS but it won't change color. I want the first bar to have the color #c30000 and the second bar to have the color #1eff00. But whenever I add the classes both of the bars go back to the default state of progress bars without styling.
.progress1 {
progress {
background-color: #eee;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
width: 250px;
height: 20px;
}
progress::-webkit-progress-bar {
background-color: #eee;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress::-webkit-progress-value {
background-color: #c30000;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress::-moz-progress-bar {
background-color: #c30000;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
}
.progress2 {
progress {
background-color: #eee;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
width: 250px;
height: 20px;
}
progress::-webkit-progress-bar {
background-color: #eee;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress::-webkit-progress-value {
background-color: #1eff00;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress::-moz-progress-bar {
background-color: #1eff00;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
}
<div class="progress1"><progress value="50" max="100"></progress></div>
<br />
<div class="progress2"><progress value="25" max="100"></progress></div>