body, html { margin: 0; padding: 0; font-family: 'Baloo Bhai', serif; background-color: #00293C; } body { color: #f1f3ce; max-width: 900px; margin: auto; padding: 10px; } h1 { font-size: 1.4em; margin-bottom: -.5em; color: #f1f3ce; } h2 { font-size: 1em; } div { margin: auto; text-align: left; width: 90%; padding: .1em; } .link { box-shadow: .1em .1em black; text-decoration: none; text-indent: 1em; color: #f1f3ce; font-size: 20px; display: block; background: #1e656d; padding: .1em; margin: .1em; border: .1em solid black; border-radius: .3em; } .link:hover { background-color: #f62a00; } .link:focus { background-color: #f1f3ce; color: #f62a00; } .attachment-full { position: fixed; right: 0px; height: 149px; width: 149px; } .githubLabel { background-color: #00293C; border: none; width: 149px; height: 0px; position: fixed; right: 0px; margin-top: -10px; } @media (min-width: 1201px) { div { width: 95% } } @media (orientation: portrait) { .attachment-full { height: 99px; width: 99px; } .githubLabel { width: 99px; } } @media (orientation: landscape) and (max-height: 400px) { .attachment-full { height: 99px; width: 99px; } .githubLabel { width: 99px; } }