/* Shared Variables. */ :root { --layout-max-width: 960px; --side-nav-width: 200px; --main-bg: #cdcdcd; --main-bg-dark: #181818; --main-padding: 8px; /* Default padding LEFT & RIGHT */ --head-bg: #968d7b; /* Fancy header background /w fancy 3D text! */ --head-bg-dark: #46433d; --blog-bg: #e0e0e0; --blog-bg-dark: #282828; } /* Body Formatting. */ body { background: #b0b0b0; /* Fallback 1. */ background: linear-gradient(180deg, #00000070 45px, #00000000 51px), linear-gradient(180deg, #00000080 45px, #00000000 100px), url('bg-scene.png') no-repeat top 45px center, #b0b0b0; background-attachment: fixed; color: #181818; font-size: 19px; font-family: Open Sans, Arial, Arial, serif; } body.dark-theme { background: #303030; background: linear-gradient(180deg, #00000070 45px, #00000000 51px), linear-gradient(180deg, #00000080 45px, #00000000 100px), url('bg-scene.png') no-repeat top 45px center, linear-gradient(180deg, #202020, #404040); color: #d0d0d0; } /* Scrollbar: otherwise not properly visible somehow due to background-attachment that is fixed!? */ body::-webkit-scrollbar { width: 1em; background: #d0d0d0; } body::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background: #d0d0d0; } body::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background: #555; } /* Header Formatting. */ h1, h2 { font-family: Verdana, Arial, Tahoma, sans-serif; } h1 { color: #303030; margin-top: 8px; padding-top: 6px; /* IMPORTANT: do NOT use margin, as it messes with layout! */ padding-bottom: 6px; /* IMPORTANT: do NOT use margin, as it messes with layout! */ margin-bottom: 8px; font-weight: 900; font-size: 24px; line-height: 110%; scroll-margin-top: 48px; /* Prevents scrolling too far for anchors! */ } h2 { color: 303030; margin-top: 7px; padding-top: 5px; /* IMPORTANT: do NOT use margin, as it messes with layout! */ padding-bottom: 5px; /* IMPORTANT: do NOT use margin, as it messes with layout! */ font-weight: 900; font-size: 24px; line-height: 110%; scroll-margin-top: 42px; /* Prevents scrolling too far for anchors! */ } .dark-theme h1 { color: #f14f00; } .dark-theme h2 { color: #f1a300; } /** Block Formatting. */ p { padding-top: 6px; /* IMPORTANT: do NOT use margin, as it messes with layout! */ padding-bottom: 6px; /* IMPORTANT: do NOT use margin, as it messes with layout! */ line-height: 130%; } blockquote { /* Line Breaks NOT Preserved. */ padding: 5px 10px 5px 10px; display: block; margin-top: 5px; margin-bottom: 5px; border-left: 5px solid #606060; line-height: 120%; } pre { /* Line Breaks Preserved. */ tab-size: 2; padding-bottom: 8px; display: block; margin-bottom: 5px; padding: 10px; border: 2px dashed #999999; line-height: 110%; } pre:has(code) { padding: 0px; border: 2px solid #e0e0e0; } .dark-theme pre:has(code) { border: 2px solid #505050; } pre code { /* Using: https://highlightjs.org/ -- see include in ! */ display: block; font-size: 16px; line-height: 100%; } blockquote, pre, pre code { background: #c0c0c0; } .dark-theme blockquote, .dark-theme pre, .dark-theme pre code { background: #303030; } code { /* Monospaced Font. */ background: #c8c8c8; font-family: Consolas, Monaco, monospace; font-weight: 200; } .dark-theme code { background: #383838; } /* For address information. */ address { background: #c0c0c0; border: 2px dashed #a0a0a0; line-height: 120%; padding: 10px 16px 10px 16px; display: block; } .dark-theme address { background: #20262e; border: 2px dashed #505f7a; } address .logo { width: 100%; height: 140px; background: url(fg-company-banner.jpg) no-repeat; background-size: var(--layout-max-width); background-position: left top; } /* List Formatting. */ ol { list-style-type: decimal; list-style-position: outside; padding-left: 30px; } ul { list-style-type: disc; /* filled circle */ list-style-position: outside; padding-left: 30px; } ol li, ul li { padding: 2px; line-height: 24px; text-decoration: none; list-style-position: outside; overflow-wrap: anywhere; /* Otherwise long links won't break! */ } /* Text Formatting. */ b, strong { font-weight: bold; filter: brightness(1.10); } i, em { font-style: italic; } small { font-size: 15px; } /* Link Formatting. */ a { color: #0085bd; overflow-wrap: anywhere; } a:visited { color: #0076a7; } a:hover { color: #bd0000; } .dark-theme a { color: #00aeef; } .dark-theme a:visited { color: #0098f2; } .dark-theme a:hover { color: #ff5400; } a[href$='.zip']:not(.download) { background:transparent url(interface/compress.png) center right no-repeat; display: inline-block; padding-right: 25px; } a[href^="mailto:"], a[href^="mailto:"]:visited { color: #d24500; background:transparent url(interface/email.png) center left no-repeat; display: inline-block; padding-left: 30px; } a[href^="mailto:"]:hover { color: #ffffff; } .dark-theme a[href^="mailto:"], .dark-theme a[href^="mailto:"]:visited { color: #ffe400; background:transparent url(interface/email-dark.png) center left no-repeat; } .dark-theme a[href^="mailto:"]:hover { color: #ffffff; } /* ------------------------------------------------------------------------------------------------------------------ */ /* Page Header. NOTE: now its own tag! */ header { position: fixed; /* Set the navbar to fixed position */ z-index: 99; top: 0; width: 100%; padding: 0px; background: linear-gradient(180deg, #444, #333); font-size: 40px; font-weight: bold; border-bottom: solid 1px #000000; } /* Page Content. NOTE: this is the tag! */ main { display: table; /* for