body { --text-color: #222; --bkg-color: white; --alink-color: blue; --aactive-color: red; --avisited-color: #006400; --petite-color: #a0a0a0; --bg-new-color: #51F9BAA3; } body.dark-theme { --text-color: #d3cfc9; --bkg-color: #131516; --alink-color: #5555db; --aactive-color: red; --avisited-color: #0f7d0f; --petite-color: #aca59a; --bg-new-color: #DD10106B; } @media (prefers-color-scheme: dark) { /* defaults to dark theme */ body { --text-color: #d3cfc9; --bkg-color: #131516; --alink-color: #5555db; --aactive-color: red; --avisited-color: #0f7d0f; --petite-color: #aca59a; --bg-new-color: #DD10106B; } body.light-theme { --text-color: #222; --bkg-color: white; --alink-color: blue; --aactive-color: red; --avisited-color: #006400; --petite-color: #a0a0a0; --bg-new-color: #51F9BAA3; } } body { background-color: var(--bkg-color); font-family: Arial, Helvetica, Verdana, sans-serif; font-size : 11pt; max-width: 950px; margin: auto; padding-left: 3vw; padding-right: 3vw; color: var(--text-color); margin: auto; } #black{ background-color: black; color: gray; } a:link {color: var(--alink-color)} a:active {color: var(--aactive-color)} a:visited {color: var(--avisited-color)} h1 { font-size: 24pt; font-weight: bold; } #body{ font-family : Arial, Helvetica, Verdana, sans-serif; font-size : 11pt; margin: auto; max-width: 90%; } #heroimg{ float: left; margin-left: 10px; margin-right: 10px; margin-top: 5px; margin-bottom: 5px; border: 1px solid #000; } .p1{ text-align: justify; } .petite { font-family : Arial, Helvetica, Verdana, sans-serif; font-size : 11pt; max-width: 90%; margin: auto; color: var(--petite-color); } .footnote{ text-align: justify; max-width: min(800px,80vw); margin: auto; } hr{ width: 85%; margin-top: 15px; margin-bottom: 15px; } .bg-new{ background:var(--bg-new-color); } #date{ float: left; } #env{ float: inline-end; } #env img{ padding-left: 5px; padding-right: 5px; float: right; } #bottom{ font-size : 11pt; text-align: center; color: #A0A0A0; margin-top: 15px; }