Responsive clipboard page using grid, flexbox and media queries

Hello Guys,

I had a lot of fun with this one. Frontend Mentor does not provide designs for tablets so I used a max-width of 1000px for the media query. I found this to be the best design for tablets, landscape, and smartphone screens.

However, I am still struggling to find the most suitable method for SVG styling. The logo, for instance, is a different size in the header and footer. I thought I could use CSS to change the viewBox and viewport heights and widths, but I was unable to do so. I had to place the footer SVG inline in HTML and style it there.

I also was unable to change the fill property of SVG social icons on hover or active states. I know I could have used Font Awesome to do this instead, but I wanted to challenge myself.

I would appreciate a better method than the one I have used for styling SVGs in CSS and HTML. I wish to make the code as optimized as possible.

Thank you.