diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..55c7c80 --- /dev/null +++ b/styles.css @@ -0,0 +1,126 @@ +/* +------------------------ +start with a clean slate +------------------------ + +based on Eric Meyer's CSS Reset 2.0 (http://meyerweb/eric/tools/css/reset/) + modified for easier implementation of REM font-sizing with default set to + 62.5% or 10px on most browsers. Media-queries adjust this base conversion. +*/ + +@media only screen and (max-width: 640px) { + :root { + font-size: 42.5%; + } +} + +@media only screen and (min-width: 641px) and (max-width: 1024px) { + :root { + font-size: 50%; + } +} + +@media only screen and (min-width: 1025px) { + :root { + font-size: 62.5%; + } +} + + +:root, body { + height: 100%; + width: 100%; +} + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + border: 0; + box-sizing: border-box; + font-size: inherit; + font: inherit; + margin: 0; + padding: 0; + vertical-align: baseline; +} + +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +ol, ul { + list-style: none; +} + +blockquote, q { + quotes: none; +} + +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* +-------------------- +styles for this page +-------------------- +*/ + +body { + align-items: center; + background-color: #323232; + color: #9D9B9B; + display: flex; + flex-direction: column; + padding: 2rem; +} + +h1 { + font-size: 7rem; +} + +img { + margin: 2rem 0; + max-height: 50vh; +} + +p { + font-size: 3rem; + line-height: 3rem; + margin: 1rem 0; + text-align: center; +} + +footer { + font-size: 10px; +} + + +.instructions { + color: red; + font-weight: bold; + text-shadow: 2px 2px 5px #000000; +} + +.spacer { + flex-grow: 1; +}