html, body { margin: 0; padding: 0; position: relative; background: #000; /*background: #0f0f0f;*/ color: #a0a0a0; } body { /*font-family: 'Merriweather', serif;*/ text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-font-feature-settings: "liga" on; } h1 { /* revolutionary idea: h1 and h2 shouldn't look the same */ font-size: 1.666em; } h1, h2, h3, h4, h5, h6 { font-family: /* 'Lato',*/ sans-serif; color: #666; } h1, h2 { text-align: center; } a { outline: none; color: #c0c0c0; } .header { padding: 15px 0; position: relative; background: #0f0f0f; /*background: #f5f5f5; background: #000; /* border-bottom: 1px solid #eaeaea; */ } .nav { max-width: 800px; margin: 0 auto; padding: 0 15px; /*font-family: 'Lato', sans-serif;*/ /*text-align: right;*/ text-align: center; font-family: sans-serif; } .nav-links { margin: 0; padding: 0; font-size: 18px; list-style-type: disc; list-style-position: outside; } .nav-links li { //display: inline-block; display: inline-block; margin: 0 0 0 15px; } .nav-links li:first-child { margin-left: 0; } .nav-links a { text-decoration: none; } .nav-links a:hover { text-decoration: underline; color: #fff; } .content { max-width: 800px; //margin: 20px auto 80px; padding: 0 15px; font-size: 16px; /*font-size: 100%;*/ line-height: 1.5; color: #999; margin-left:auto; margin-right:auto; hyphens: auto; } .screenshots { max-width: 1300px; margin-left:auto; margin-right:auto; } .content .headinglink { color: #222; text-decoration: none; } .content .headinglink:hover, .content .headinglink:focus { color: #e0e0e0; text-decoration: underline; } @media (min-width: 800px) { /* if there's some margin on the left, move the heading link * to the left so the heading itself is roughly where it would be * without the "# " link */ .content .headinglink { margin-left: -1em; } .header { padding: 15px 0; } }