CSS

Basics

Beginning always:

* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}

probably better idea is to apply only to elements specific elements, like #body, othervise removes all formatting to imputs etc.

Display

Inline vs block https://www.w3schools.com/css/css_display_visibility.asp

Flexbox

Flexbox

display: flex; /*start flex*/
gap: 5px; /* gap */
flex-direction: column;

The Viewport

Media queries

.container < div { /* affects only direct div and not the deeper ones*/

a {

    all:unset;

    cursor: pointer;

} */ change pointer to links*/

https://www.cssmatic.com/box-shadow

#btn */hash for ids*/