html { position: relative; min-height: 100%; } body { margin-top: 106px; font-family: Roboto, sans-serif; font-display: swap; background-color: #404142; margin-bottom: 100px; } sup { scroll-margin-top: 70px; } .main { margin-top: 20px; margin-bottom: 40px; } .list-display { width: 85%; display: block; margin-top: 40px; margin-left: auto; margin-right: auto; padding-top: 50px; padding-bottom: 50px; padding-left: 60px; padding-right: 60px; background-color: white; } .project { margin-top: 50px; } .jumbotron { width: 85%; margin-bottom: 0; margin-top: 40px; margin-left: auto; margin-right: auto; background-color: white; } .project-image { position: absolute; right: -30px; top: -30px; width: 80px; height: auto; align-self: left; } .project-status { position: absolute; right: 20px; bottom: 15px; } .blog-cat { position: absolute; right: 20px; top: 15px; } .social-button { width: 200px; margin: 10px; line-height: 40px; } .social-image { width: 40px; height: 40px; float: left; } #social-list { margin-bottom: 20px; } #social-list { text-align: center; } .blog-cat-button { padding: 0px; margin-right: 15px; } #blog-archive-button { display: block; position: relative; margin-top: 20px; margin-left: auto; margin-right: 0; padding: 0; } #blog-archive { display: none; } .anchor { display: block; position: relative; top: -46px; visibility: hidden; } .blog-button:link, .blog-button:visited { color: black; text-decoration: none; } .blog-button:hover, .blog-button:active { color: rgb(73, 73, 73); text-decoration: none; } .blog-entry { margin-top: 20px; } .blog-discuss { margin-top: 15px; } .blog-summary, .blog-title { width: 85%; } .navbar { margin-left: auto; margin-right: auto; max-width: 1200px; } .footer { position: absolute; left: 0; right: 0; bottom: 0; margin-left: auto; margin-right: auto; max-width: 1200px; background-color: #f8f9fa; padding-left: 15px; padding-right: 15px; overflow: auto; height: 60px; line-height: 60px; } .quote { float: right; } #quote-text { margin-right: 10px; } #blobheart { width: 30px; height: 30px; } .card-link { margin-left: 0px !important; margin-right: 10px; margin-bottom: 10px; } .alert { margin-top: 1rem; } #discord-widget { display: block; margin: auto; } .blog-isolated { position: relative; } .blog-isolated-status { bottom: 0 !important; right: 0 !important; } .reading-mode { position: absolute; right: 20px; top: 15px; } blockquote { margin-left: 2em; margin-right: 2em; font-style: italic; } #banner { position: fixed; left: 0; right: 0; bottom: 0; margin-left: auto; margin-right: auto; max-width: 1200px; height: 40px; line-height: 40px; text-align: center; background-size: contain; color: white; text-shadow: -1px -1px 5px black, 1px -1px 5px black, -1px 1px 5px black, 1px 1px 5px black; overflow: auto; } .highlight { border-radius: 10px; } pre.highlight { padding: 15px; } .support-entry { margin-top: 20px; } @media(max-width: 1199px) { .blog-title { margin-top: 15px; } .blog-summary { margin-bottom: 10px; } } @media (max-width: 768px) { .container { max-width: none; } .list-display, .jumbotron { width: auto; padding-left: 20px; padding-right: 20px; } .reading-mode { position: relative; right: auto; top: auto; } } @media (max-width: 510px) { .social-button { width: auto; overflow: hidden; text-indent: -99999px; margin: 5px; } .project-image { right: -18px; top: -18px; width: 50px; } .project-status { position: absolute; right: 10px; bottom: 5px; } .blog-cat { position: absolute; right: 10px; top: 5px; } }