:root { --stdfont: sans-serif; --headerfont: serif, var(--stdfont); } body { background: url('snail.gif') no-repeat fixed bottom 0 left calc(50% - 750px), url('world.gif') no-repeat fixed top 200px left calc(50% + 550px), url('sun.gif') fixed no-repeat top 69px left 100px, url('torch.gif') no-repeat fixed bottom left calc(50% - 350px), url('butterflyrockplant.gif') no-repeat fixed bottom -10px left calc(50% + 500px), url('star4.gif') no-repeat fixed bottom 200px left calc(50% - 800px), url('star3.gif') no-repeat fixed top 69px left calc(50% + 800px), url('star2.gif') no-repeat fixed top 300px right calc(50% + 700px), url('rose.gif') bottom -20px left calc(50% - 600px) fixed no-repeat, url('star.gif') no-repeat fixed bottom 300px left calc(50% + 630px), url('fire.gif') no-repeat bottom left 10px fixed, url('butterfly.gif') no-repeat fixed bottom 150px left calc(50% - 500px), url('snake.gif') fixed no-repeat bottom left calc(50% + 840px), url('bg.gif') fixed; font-family: var(--stdfont); color: gainsboro; } #centercolumn { background: url('rainbowball.gif') 52px 30px no-repeat, url('beam.png') repeat-y 75px 0; } .section { width: 100%; font-size: 1.1em; background: #000000f9; padding: 10px 30px; border: 4px outset rgb(48, 4, 119); margin-bottom: 40px; } .section:last-of-type { background: #000000f9 url('ocean-div.gif') repeat-x bottom center; } #buttons { padding-bottom: 30px; } a { color: gold; } a:visited { color: goldenrod; } #header { font-family: 'Orbitron', sans-serif; font-weight: 700; text-align: center; font-size: 2.5em; width: 100%; } .section h2 { background: url('orb.gif') no-repeat center right; font-family: var(--headerfont); font-size: 1.8em; margin-top: 20px; margin-bottom: 10px; } .section h3 { font-family: var(--headerfont); margin-top: -10px; font-size: 0.8em; } .section h4 { font-family: var(--headerfont); font-size: 1.2em; } .section table { margin-bottom: 20px; } #linktable { margin-bottom: initial; } #nav a { color: gainsboro; } #themeselector { padding-left: 90px; padding-right: 40px; font-size: 1.1em; animation-duration: 0.7s; background-color: #000000f9; border-right: 4px outset rgb(48, 4, 119); } #themeselector a { color: gold; text-decoration: underline; } #themeselector h3 { font-family: var(--headerfont); } @media (max-width: 900px) or (orientation: portrait) { #themeselector { padding-left: 40px; } #centercolumn { padding: 0; } .section { width: calc(100% - 68px); } } .hoverable { color: #0000EE; text-decoration: underline; } .hoverable:hover { color: #551A8B; } .tooltip { color: black; background-color: white; border: 1px solid black; padding-top: 2px; padding-bottom: 2px; padding-left: 4px; padding-right: 4px; } .emph { font-style: italic; } .serif { font-family: serif; } .hoverable { color: gold; } .hoverable:hover { color: goldenrod; } .hoverable .tooltip { color: gainsboro; padding: 6px 12px; background-color: #000000f9; border: 3px outset gold; } @keyframes rainbow-text { 100%,0%{color: rgb(255,0,0); text-shadow: 0 0 4px rgb(216, 1, 1);} 8%{color: rgb(255,127,0); text-shadow: 0 0 4px rgb(211, 105, 0);} 16%{color: rgb(255,255,0); text-shadow: 0 0 4px rgb(214, 214, 0);} 25%{color: rgb(127,255,0); text-shadow: 0 0 4px rgb(105, 211, 0);} 33%{color: rgb(0,255,0); text-shadow: 0 0 4px rgb(0, 204, 0);;} 41%{color: rgb(0,255,127); text-shadow: 0 0 4px rgb(0, 209, 105);} 50%{color: rgb(0,255,255); text-shadow: 0 0 4px rgb(0, 202, 202);} 58%{color: rgb(0,127,255); text-shadow: 0 0 4px rgb(0, 103, 206);} 66%{color: rgb(0,0,255); text-shadow: 0 0 4px rgb(0, 0, 206);} 75%{color: rgb(127,0,255); text-shadow: 0 0 4px rgb(103, 0, 206);} 83%{color: rgb(255,0,255); text-shadow: 0 0 4px rgb(211, 0, 211);} 91%{color: rgb(255,0,127); text-shadow: 0 0 4px rgb(211, 0, 105);} }