html { font-family: monospace; font-size: 82.5%; color: #eee; background-color: #4a525a; } body { font-size: 1.6rem; color: #fff; text-align: justify; } strong { color: #80F3AF; } em { color: yellow; } li { text-align: left; } img { max-width: 100%; margin: auto; display: block; } blockquote { padding: 0 1em; color: #2ecc40; border-left: 0.25em solid #dfe2e5; } header { border-bottom: 0.2rem solid #eee; } nav { text-align: right; } nav a:link, nav a:visited { font-size: 1.8rem; font-weight: bold; color: #ddd; text-decoration: none; text-transform: lowercase; } a { text-decoration: none; } a:link { color: #499cd4; } a:visited { color: #CA49D4; } footer { margin-top: 3rem; margin-bottom: 1.2rem; padding: 1.2rem 0; border-top: 0.2rem solid #eee; font-size: 1.2rem; color: #ccf; } h1 { font-size: 2.4rem; } h2 { font-size: 2rem; color: pink; } article .header { font-size: 1.4rem; text-align: right; color: #cfc; } .logo a { font-weight: bold; color: #ccc; text-decoration: none; } @media (max-width: 319px) { body { width: 90%; margin: 0; padding: 0 5%; } header { margin: 4.2rem 0; } nav { margin: 0 auto 3rem; text-align: center; } footer { text-align: center; } .logo { text-align: center; margin: 1rem auto 3rem; } .logo a { font-size: 2.4rem; } nav a { display: block; line-height: 1.6; } } @media (min-width: 320px) { body { width: 90%; margin: 0; padding: 0 5%; /* text-align: center; */ } header { margin: 4.2rem 0; } nav { margin: 0 auto 3rem; text-align: center; } footer { text-align: center; } .logo { text-align: center; margin: 1rem auto 3rem; } .logo a { font-size: 2.4rem; } nav a { display: inline; margin: 0 0.6rem; } } @media (min-width: 640px) { body { width: 72rem; margin: 0 auto; padding: 0; } header { margin: 0 0 3rem; padding: 1.2rem 0; } nav { margin: 0; text-align: right; } nav a { margin: 0 0 0 1.2rem; display: inline; } footer a, footer a:visited { color: #499cd4; } .bleft { text-align: left; display: inline; float: left; } .bright { text-align: right; display: inline; float: right; } .logo { margin: 0; text-align: left; } .logo a { float: left; font-size: 1.8rem; } }