@main: #E77171; #forkme { cursor: pointer;font-family: Arial; display: block; position: absolute; top: 0; right: 10%; z-index: 10; padding: 10px; color: #fff; background: @main; font-weight: 700; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; img { width: 13px; } } #readme { font-family: Arial; h1 { background: #4B5B6E; padding-top: 30px; padding-bottom: 30px; color: white; padding-left: 10%; margin-top: 0; width: 100%; font-size: 20px; img { float: left; width: 50px; height: auto; margin-top: -7px; margin-right: 10px; transition: none; box-shadow: none; width: 35px; } } h2 { font-size: 20px; } a { color: #E77171; text-decoration: none; &:focus, &:hover { color: #E77171; text-decoration: none; } } ul { padding-left: 15%; } h2, h3, p { margin-left: 10%; width: 80%; } ol { margin-left: 10%; width: 75%; } pre { background: white; width: 75%; padding: 2.5%; margin-left: 10%; overflow-x: scroll; } code{ background: rgba(255, 255, 255, 0.6); } hr { width: 80%; border: 1px solid #999; } p, ul, li, code { font-size: 15px; } img { height: auto; width: 200px; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition: all 0.3s cubic-bezier(.25,.8,.25,1); &:hover { box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); } } } @media (max-width: 500px) { #readme { h1 { padding-left: 10%; padding-top: 80px; } } }