How to change body, html and * in component?

I would like to be able to modify the body, html and the * of the login component but impossible to do this. I’m desperate, do you have a solution please?

Stackblitz

login.component.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    }


body {
    background-color: red;
}
...

>Solution :

First of all you need to read and understand the login html structure before trying to apply any css. The login.component.html have a container class, divs and inputs that have background-color, so you need to enter the css file and write based on that information.

Here is my solution, copy it to login.component.css, you can work based on that:

.container div, .container input {
    background-color: white;
}

This css will target .container div and .container input separated by a comma, you can have different targets with the same css so the css code doesn’t get messy