/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ 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 { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } 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; } /*==== END OF STYLE RESET ====*/ /* ===== BOX SIZING ===== */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } /*======================== MY STYLING RULES ========================*/ /*Add line height for headings and nav to avoid text overlap when resizing the screen!!!*/ /*==== BODY STYLING ====*/ body { font-family: Dosis, Helvetica, Verdana, Arial, sans-serif; line-height: 1.5; background-color:#fffcf7; margin: 0 auto; } /* always include AT LEAST one fallback font for Windows and one for Mac users; font-size is by default 1em (rem); 400 is the default font weight, not necessary to declare it; not necessary to declare black colour on body, it is the default; avoid putting max-width on -> better to put on the children, grandchildren, etc.; line-height does not have meas. unit because it's a ratio of the font and changes depending on different fonts; */ /*==== HEADER STYLING ====*/ header, main { max-width: 65vw; margin: 0 auto; } header { font-size:1.5em; font-weight: 600; padding: 0.3em; } header>p { width: 12.5em; border-top: 0.2em dotted #d4bcf2; border-left: 0.2em dotted #d4bcf2; background-color:#c3e2ff; border-radius: 50%; padding: 0.6em 0 0.7em 1em; margin-top: 1em; box-shadow: 0 0 8px #0005; } header>h1 { font-size: 2.5em; border-top: 0.2em dotted #d4bcf2; border-left: 0.2em dotted #d4bcf2; background-color:#c3e2ff; border-radius: 50%; margin: 0.5em 0; } /*==== MAIN STYLING ====*/ h1 { font-size: 2.5em; font-weight: 600; line-height: 1em; text-align: center; background-color: #d4bcf272; padding: 0.5em; margin-top:1em; } /*600 font weight is semi-bold*/ p { font-size: 1.4em; padding: 0.5em 0; } ul { font-size: 1.2em; margin-left: 1.8em; } /*==== IMAGE STYLING ====*/ img{ display: block; border-radius: 5%; margin: 1em auto; } p>img { display: block; float: right; border-radius: 5%; margin: 3px 0 0.5em 1em; } /*==== FOOTER STYLING ====*/ footer { max-width: 65vw; line-height: 0.5em; text-align: center; border-top: 0.15em solid #d4bcf2; border-top-left-radius: 4em; border-top-right-radius: 4em; border-bottom: 0.15em solid #d4bcf2; border-bottom-left-radius: 4em; border-bottom-right-radius: 4em; background-color: #c3e2ff; margin: 4em auto 3em; } /*==== LINK & NAVIGATION STYLING ====*/ nav li { font-size: 1.3em; font-style: normal; line-height: 0.5em; text-align: center; display: inline-block; padding: 4px; margin: 1em 2em 1em 1.2em; } /*without font-style declaration here the font makes the text italic by default*/ a { font-size: 0.9em; font-weight: 500; } a:link, a:visited, a:active { text-decoration: none; color: #8b02cf; } a:hover, a:focus { text-decoration: underline; color: #8b02cf; } /* order of link states is link, visited, hover, active, and focus because some are inheritent*/