This is just a mess of testing things, my main aim was to figure out the best boilerplate for responsive `CSS` which seemed here to be something like:

* { 
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  height: 100vh;
}

Where setting `box-sizing: border-box` for all elements helps to avoid some annoying interactions, especially with `padding` in which padding an item changes its size in the layout.

Setting `height: 100%` for the HTML seemed to work best, don't ask me why it's working better than `vh`

Setting `height: 100vh` for the body seemed to work best, don't ask me why it's working better than `%`

Supposedly     
- 100vw : Full width including the scrollbar
- 100% : Full width excluding the scrollbar

When actually testing things make sure scrollbars for that element are not disabled as it makes it hard to see what is overflowing its container

Elements can control their positioning in their parent layout using `margin: 0 auto`, `#bar` has disabled it to show that it sits on the right within its parent, instead of in the center

Toggle outlines (`box-shadow` is an alternative to `outline` that do not affect layout) using `box-shadow: inset 0 0 0 var(--debug-outline) blue` where they are toggled by the CSS variable `--debug-outline` declared in `root`

Media query that makes it so that `#bar` and `#content` are guaranteed to fit in their parent, `#inner`, when viewport size is below 800px
```
@media only screen and (max-width: 800px) {

  #bar {
    height: 8%;
  }

  #content {
    height: 92%;
  }

}
```

Applying the class below to an element (with other classes) gives a useful hidden scroll to elements that have `overflow-y: auto` or `overflow-y: scroll` already enabled
```
.hidden-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.hidden-scrollbar::-webkit-scrollbar {
  display: none;
}
```

There are some useful functions bound to hotkeys [F1 - F...], such as F3 = Toggle scrollbar for `#inner` element (green outline)

# Miscellaneous
`flex-grow: 1` causes an object to fill available space in a parent flex container
You can hard reload a page on `Firefox` using `Control + Shift + R`