html,body{ font:400 98% serif; background-color:#000900; color:#EEBB99; height:100%; margin:0 } .main{ min-height:100%; position:relative } .head{ font:400 115% sans; color:#999000; padding:35pt 8% 35pt 8% } .body{padding:0pt 5% 60pt 5%} .foot{ font-size:70%; position:absolute; text-align:center; bottom:0; width:100%; padding-top:9pt; padding-bottom:9pt } h1{ font-size:107%; color:#CC9977; padding-left:17.2pt } h2{ font-size:105%; color:#AA7755; padding-left:1.2% } h3{ font-size:105%; color:#847884; padding-left:.3% } a{ font-size:102%; color:#989888; text-decoration:none } a:hover{color:#EEEEEE} img{margin-left:4%} .sh{ font:400 78% mono; color:#EE9F00; border-left-style:solid; border-color:#847884; padding-left:2% } @media(prefers-color-scheme:light){ html,body{ background-color:#F8F6E0; color:#000009 } .head{color:#555555} h1{color:#602000} h2{color:#704020} h3{color:#403060} a{color:#006070} a:hover{color:#000000} .sh{ color:#000000; border-color:#403060 } } @media all and (min-width:0px){ .head{padding:28pt 15% 28pt 12.5%} .body{padding:0pt 12% 60pt 12%} } @media all and (min-width:800px){ .head{padding:28pt 28% 28pt 20.5%} .body{padding:0pt 20% 60pt 20%} } @media all and (min-width:1000px){ .head{padding:28pt 25% 28pt 20.5%} .body{padding:0pt 20% 60pt 20%} } @media all and (min-width:1200px){ .head{padding:28pt 37% 28pt 30.5%} .body{padding:0pt 30% 60pt 30%} } @media all and (min-width:1400px){ .head{padding:28pt 32% 28pt 28.5%} .body{padding:0pt 28% 60pt 28%} } @media all and (min-width:1600px){ .head{padding:28pt 37% 28pt 32.5%} .body{padding:0pt 32% 60pt 32%} }