When trying to make the background of the body element have a gradient, it worked fine going left or right.
However, for a gradient that goes to top or bottom, I had to make the body min-height property set to 100vh.
dvh is a newer unit for Dynamic Viewport Height. It's useful on mobile browsers for when the visible viewport
changes from nav bars and whatnot appearing and disappearing.
We can use an asterisk selector in CSS and then set the box-sizing property to border-box. Apparently this is
a pretty common practice in modern CSS, and makes every element's width and height include its content,
padding, and border.
I learned that in order to center the login container, I had to modify the parent container to display: flex,
and then justify and align it's content/children to be centered.
I learned that we can make our CSS mobile-first, then use media queries to modify the CSS for larger screen
sizes.
I learned that when a container is of display: flex, we use a property called literally just "flex" on its
children to control how much space each child takes up. I then discovered that this was actually not the
solution I was looking for. Instead, I had to use the height property to control the height of a button.
Reason being, the flex property only matters if the flex container actually has leftover space, otherwise
setting any flex value on a child will have no effect.
When we're deciding whether we need to use justify or align for lining something up, think of it this way:
Justify is for whatever the main axis is. Align is for the cross axis. So if we're in a flex layout with
flex-direction: row, then justify is for the main axis (horizontal), and align is for the cross axis
(vertical). If we're in a flex layout with flex-direction: column, then justify is for the cross axis
(vertical), and align is for the main axis (horizontal).
