My Survey Form - GoT

Hello, I’m looking for some feedback on this Survey Form project. Any suggestions would be greatly appreciated. Thank you for your time.

https://codepen.io/saw142/pen/Jqwrxm

The color scheme makes it hard for me to read the text and see the check boxes. I really like the background you’ve chosen but I think I’d make the form frame less transparent so that the text and check boxes aren’t so lost.

When the width gets down to the 350px range, inputs start to come out of the form frame. Here’s what I mean:

I’d center the submit button below everything, instead of having it next to the text area.

I would agree with the above advice, make your form more opaque. I would also consider styling your text more, even if it was just the h1; make it all on one line maybe.
I am pretty new to HTML and CSS so I may not understand, but I am curious why you chose to use 4 media queries with the same max-width rule? Among those media queries I see some of the elements are called out a few times (i.e. #checkbox-inputs, #radio-inputs) I am just curious why? Perhaps you intended to assign those media queries different sizes?

Thanks for the feedback. I see what I did now with the smaller screen sizes…I forgot to check them. I was stacking everying at 1000px based on my laptop screen but didn’t check the smaller mobile sizes. And I see what you mean about the form background. Thank you

Thanks for the feedback. The media queries all contain different parts of the form so each part changes at the same screen width. I based it off of my laptop screen size though and forgot to check the smaller mobile screen widths which is why if you view it in mobile the inputs come out of the form. Got to fix that. Thank you.

Okay, that is really nice, but instead of ‘complete survey’, you should’ve written ‘submit’ instead.
A nice font for the game of thrones should be Herculanum or Luminari other than oswald unless you want it like that.