body { margin: 60px auto; font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif; background-color: #f6f5ed; color: #484848; width: 580px; font-size: 18px; line-height: 26px; } header { margin-top: 30px; margin-bottom: 20px; } header a { color: #484848; text-decoration: none; border-bottom: 1px dotted #999892; } header a:visited { color: #484848; } footer { border-top: 1px solid rgb(206,206,206); margin-top: 48px; padding-top: 24px; font-size: 14px; } header a:hover { border-bottom: 1px solid #999892; } h1 { font-size: 38px; line-height: 42px; font-weight: normal; margin-bottom: 20px; } body.post h1 { margin-bottom: 5px; } body.post header p { font-size: 14px; } h2 { margin-top: 40px; margin-bottom: 5px; font-size: 24px; font-weight: normal; } h3 { margin-top: 20px; margin-bottom: 5px; font-size: 20px; font-weight: bold; } img.avatar { background-size: 100%; display: block; height: 80px; overflow: hidden; border-radius: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px; width: 80px; margin-right: 15px; } pre { font-size: 15px; white-space: pre; word-wrap: normal; overflow: auto; width: auto; } @media screen and (max-width: 580px) { body { margin: 10px auto; padding: 0 20px 0 20px; width: auto; word-wrap: break-word; } pre { font-size: 14px; line-height: 16px; } img { max-width: 100%; width: auto; height: auto; } img.avatar { height: 110px; width: 110px; } .video-wrap { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-wrap iframe, .video-wrap object, .video-wrap embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } a { color: #C30C0C; } a:visited { color: gray; } p { margin: 0 0 2ex 0; } ul { margin: 0 0 2ex 0; padding: 0; } li { margin: 0 0 0 20px; padding: 0; } .cover-left { width: 49%; float: left; padding-right: 2%; } .cover-right { width: 49%; float: left; }