Survey Form - 2nd layer & dropdown issues

Code Feedback
1

I am having two issues.

  1. The layer (light green) above the background-image doesn’t size according to the contents. I have to specify an amount but if I do that it will be fixed. How would I make that green background layer responsive so that it extends to the bottom of the page?

.layer {
/second semi-transparent layer over the background-image/
background-color: rgba(64, 200, 224, 0.5);
position: relative;
width: 100%;
height: 40em; /this makes it fixed to a specific size/
}

  1. The dropdown font color (‘Select an option’) is black but I want it gray. I’ve made it so that in the dropdown options it’s gray but not when it’s selected. I only want that option (‘Select an option’) to be gray when selected. Any ideas to fix that?

Here is a link to the page:
https://codepen.io/HazyStreet/full/MWwMXKR