/* GLOBAL */ * { text-align: left; font-family: sans-serif; } :root { --bg: #282828; --bg-code: #1d2021; --bg-alt: #32302f; --fg: #ebdbb2; --fg-code: #fbf1c7; --fg-alt: #d5c4a1; --fg-link: #d79921; } body { width: 50%; margin: 0 auto; background-color: var(--bg); color: var(--fg); padding: 10px; } html { /* background-color: #696969;*/ scroll-behavior: smooth; } /* TABLES */ table, th, td { margin-left: auto; margin-right: auto; text-align: left; border-collapse: collapse; width: 70%; } th, td { padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; } th { border-bottom: 1px solid var(--fg); } tr:nth-child(odd) { background-color: var(--bg-alt); } /* CODE */ pre { background-color: var(--bg-code); color: var(--fg-code); padding: 4px; font-size: 15; font-family: monospace; tab-size: 8; } /* :not(pre) > code { background-color: #f9f4d7; color: #504945; } */ /* LISTS */ li { font-size: 14; } /* PARAGRAPHS */ p { font-size: 17; padding-left: 20px; padding-right: 20px; } /* HEADINGS */ h1, h3, h5 { text-decoration: underline; } h2, h4, h6 { background-color: var(--bg-alt); } h1 { font-size: 35; } h2 { font-size: 30; } h3 { font-size: 25; } h4, h5, h6 { font-size: 20; } /* LINKS */ a { color: var(--fg-link); } /* FOOTER */ footer { border: 1px solid var(--fg); } footer p { padding: 10px; margin: 0px; font-size: 12; } /* HEADER */ #thumb { position: absolute; border-radius: 50%; max-height: 80%; max-width: 80%; width: auto; height: auto; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } #thumb-container { position: relative; height: 80px; width: 80px; float: left; padding-right: 40px; } #links { float: left; overflow: hidden; } #links a { letter-spacing: normal; padding-right: 10px; font-weight: bold; } .header { height: 80px; text-align: left; line-height: 80px; font-size: 17; border: 1px solid var(--fg); overflow: hidden; }