/*
* css/reset.css
*
* Every browser has its own default styles — Chrome, Firefox, and Safari all
* add different amounts of margin and padding to elements like , , and
* . A CSS reset strips those defaults so we start from a blank slate
* and our styles look the same in every browser.
*
* We're using a "minimal" reset here, not a full normalize.css, because this
* is a simple single-page site and we don't need to handle every edge case.
*/
/*
The universal selector (*) applies these rules to EVERY element on the page.
box-sizing: border-box changes how width and height are calculated — by default
CSS uses "content-box" where padding and border are ADDED to the width you set.
With border-box, padding and border are INCLUDED in the width, which is much
more intuitive and prevents elements from unexpectedly overflowing their containers.
*/
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/*
On iOS, rotating the phone to landscape mode causes Safari to automatically
increase the font size. -webkit-text-size-adjust: 100% disables this behaviour
so our carefully chosen font sizes stay exactly as we set them.
*/
html {
-webkit-text-size-adjust: 100%;
}
/*
min-height: 100vh means the body is at least as tall as the viewport (vh = viewport height).
This lets us use flexbox on the body to vertically center the terminal window —
without this, a short page wouldn't fill the screen and centering wouldn't work.
*/
body {
min-height: 100vh;
}
/*
Browsers render and is used for the ASCII art banner. Without this reset, some browsers
apply a slightly different monospace font to elements, which would
break the alignment of the ASCII art characters.
is used in the banner subtitle for the command hints.
*/
pre,
kbd {
font: inherit;
}