:root { --primary-color: #2ec4b6; --primary-text-color: #333; --secondary-text-color: #aaa; --white-color: #fff; --light-gray-color: #f4f4f4; --mid-gray-color: #e9e9e9; --dark-gray-color: #1a1a1a; --black-color: #000; --font-base: "Open Sans", sans-serif; --font-alt: Dosis, sans-serif; --animation-base: ease-in-out; --shadow-base: 0 0 10px rgba(0, 0, 0, 0.02); } html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { background-color: var(--light-gray-color); background-color: #f9f9f9; color: var(--primary-text-color); font-family: var(--font-base); font-size: 14px; line-height: 1.65; text-rendering: optimizeLegibility; transition: background-color 0.3s var(--animation-base); word-break: break-word; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--dark-gray-color); text-decoration: none; } h1, h2, h3, h4, h5, h6 { color: var(--dark-gray-color); font-family: var(--font-alt); font-weight: 700; line-height: 1.3; margin: 0 0 15px; } p { margin: 0 0 20px; } img { display: block; height: auto; max-width: 100%; } blockquote { border-left: 4px solid var(--dark-gray-color); color: var(--dark-gray-color); font-size: 18px; line-height: 1.4; margin: 30px auto; padding: 5px 0 5px 15px; } ul, ol { margin: 30px 0; padding-left: 30px; } li { margin: 5px 0; } iframe, embed { border: 0; display: block; overflow: hidden; width: 100%; } figure { margin: 45px 0; } figcaption { color: var(--dark-gray-color); font-size: 14px; margin-top: 15px; text-align: center; } pre { margin: 30px 0; overflow-x: scroll; } hr { background-color: var(--dark-gray-color); border: 0; border-radius: 50%; height: 5px; margin: 45px auto; position: relative; width: 5px; } hr:before, hr:after { background-color: var(--dark-gray-color); border-radius: 50%; content: ""; height: 5px; position: absolute; width: 5px; } hr:before { right: 20px; } hr:after { left: 20px; }