*, *:before, *:after { box-sizing: border-box; } html, body { min-height: 100vh; height: 100%; margin: 0; padding: 0; } html { font-size: 16px; } body { font-size: 1rem; font-family: 'Avenir Next', Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; line-height: 1.5; color: #e7eef4; background-color: #040404; padding: 2rem; -moz-display: flex; -moz-align-items: center; -moz-justify-content: center; -moz-flex-wrap: wrap; -webkit-display: flex; -webkit-align-items: center; -webkit-justify-content: center; -webkit-flex-wrap: wrap; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; position: relative; } @media (min-width: 45em) { html { font-size: 20px; } body { padding: 4rem; } } body:before, body:after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } body:before { background: url('gato-del-raval.jpg') no-repeat center center; background-size: auto 100%; z-index: -1; } @media (min-width: 35em) { body:before { background-size: cover; } } body:after { background: #040404; opacity: .6; z-index: -1; } article { max-width: 35em; } h1 { font-size: 2.8rem; font-weight: 900; line-height: 1.2; margin-top: 0; } p { margin: 0 0 1rem; } p:last-of-type { margin-bottom: 0; }