/* global variables */ :root { --earth-text-color: white; --earth-compliment-color: steelblue; --earth-hover-color: lightblue; --earth-div-color: rgba(0, 0, 0, 0.5); --earth-now-color: limegreen; --earth-sync-color: yellow; --earth-ingress-color: cyan; --earth-egress-color: magenta; --earth-background-image: url('img/art002e009287~large.jpg'); --earth-attribution-color: rgb(92, 92, 92); --earth-const-map-br-color: lightgray; --earth-const-th-left-color: darkgray; --mars-text-color: white; --mars-compliment-color: orange; --mars-hover-color: rgb(204, 165, 91); --mars-div-color: rgba(0, 0, 0, 0.5); --mars-now-color: limegreen; --mars-sync-color: yellow; --mars-ingress-color: cyan; --mars-egress-color: magenta; --mars-background-image: url('img/93575.jpg'); --mars-attribution-color: rgb(92, 92, 92); --mars-const-map-br-color: lightgray; --mars-const-th-left-color: darkgray; --sun-text-color: white; --sun-compliment-color: gold; --sun-hover-color: rgb(204, 165, 91); --sun-div-color: rgba(0, 0, 0, 0.5); --sun-now-color: limegreen; --sun-sync-color: yellow; --sun-ingress-color: cyan; --sun-egress-color: magenta; --sun-background-image: url('img/PIA26681~large.jpg'); --sun-attribution-color: rgb(92, 92, 92); --sun-const-map-br-color: lightgray; --sun-const-th-left-color: darkgray; --timeline-now-color: limegreen; --timeline-timeline-color: rgb(64, 64, 64); --timeline-sync-color: yellow; --timeline-ingress-color: cyan; --timeline-egress-color: magenta; } /* body backgrounds */ body.earth { margin: 0; color: var(--earth-text-color); font-family: sans-serif; background-image: var(--earth-background-image); background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; height: 100vh; width: 100vw; overflow: hidden; } body.mars { margin: 0; color: var(--mars-text-color); font-family: sans-serif; background-image: var(--mars-background-image); background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; height: 100vh; width: 100vw; overflow: hidden; } body.sun { margin: 0; color: var(--sun-text-color); font-family: sans-serif; background-image: var(--sun-background-image); background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; min-height: 100vh; width: 100vw; overflow-x: hidden; padding: 20px 10px; display: flex; justify-content: center; align-items: center; box-sizing: border-box; } /* top containers and child divs */ div.container { max-width: 98%; max-height: 98%; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; grid-auto-flow: column; grid-template-columns: auto; grid-template-rows: 1fr; column-gap: 16px; align-items: center; } div.container div { border-radius: 12px; padding: 10px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); height: fit-content; max-height: 100%; } div.earth.container div { background-color: var(--earth-div-color); } div.mars.container div { background-color: var(--mars-div-color); } div.sun { max-width: 90%; height: fit-content; background-color: var(--sun-div-color); border-radius: 12px; padding: 10px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-sizing: border-box; } /* home icon */ div.home { font-size: 48pt; width: fit-content; height:fit-content; vertical-align: middle; } div.earth div.home a { text-decoration: none; color: var(--earth-text-color); } div.earth div.home a:hover { color: var(--earth-hover-color); } div.mars div.home a { text-decoration: none; color: var(--mars-text-color); } div.mars div.home a:hover { color: var(--mars-hover-color); } /* sun pages */ div.sun a { text-decoration: none; color: var(--sun-text-color); } div.sun a:hover { color: var(--sun-hover-color) } div.sun hr { width: 25%; margin: 20px auto; border-color: var(--sun-compliment-color); } div.sun code { color: steelblue; font-size: 12pt; } div.sun ul li + li { margin-top: 6pt;} div.sun p { line-height: 1.5;} div.sun table { margin-left: auto; margin-right: auto; text-align: left; } div.sun table th { color: var(--sun-compliment-color); padding: 5px 10px; vertical-align: top;} div.sun table td { padding: 5px 10px; } div.sun h1 { color: var(--sun-compliment-color); } div.sun h2 { color: var(--sun-compliment-color); } div.sun h3 { color: var(--sun-compliment-color); } /* timelines */ svg.timeline circle.ingress { stroke: var(--timeline-ingress-color); stroke-width: 2pt; fill: rgba(0, 0, 0, 0.25); } svg.timeline circle.sync { stroke: var(--timeline-sync-color); stroke-width: 2pt; fill: rgba(0, 0, 0, 0.25); } svg.timeline circle.egress { stroke: var(--timeline-egress-color); stroke-width: 2pt; fill: rgba(0, 0, 0, 0.25); } svg.timeline circle.now { stroke: none; fill: var(--timeline-now-color); } svg.timeline text.timeline_left_label { text-anchor: end; } svg.timeline text.timeline_right_label { text-anchor: start; } svg.timeline line.time_line { stroke: var(--timeline-timeline-color); stroke-width: 2pt; vector-effect: non-scaling-stroke; } svg.timeline text.timeline_earth_label { font-size: 12pt; fill: var(--earth-text-color); dominant-baseline: middle; } svg.timeline a:hover text.timeline_earth_label { fill: var(--earth-hover-color); } svg.timeline line.earth_line { stroke: var(--earth-compliment-color); stroke-width: 2pt; vector-effect: non-scaling-stroke; } svg.timeline text.timeline_mars_label { font-size: 12pt; fill: var(--mars-text-color); dominant-baseline: middle; } svg.timeline a:hover text.timeline_mars_label { fill: var(--mars-hover-color); } svg.timeline line.mars_line { stroke: var(--mars-compliment-color); stroke-width: 2pt; vector-effect: non-scaling-stroke; } /* constellation */ td.constellation_name { font-size: 24pt; text-align: center; } td.constellation_meaning { font-size: 18pt; font-family:serif; font-style: italic; text-align: center; } td.constellation_map { text-align: center; } img.constellation_map { border-radius: 6px; padding: 5px; display: block; margin: 0 auto; max-height: 500px; } th.left { font-style: italic; font-weight: normal; text-align: left; } td.constellation_map_attribution { font-size: 8pt; font-style: italic; text-align: center; } td.constellation_myth { font-family: serif; font-style: italic; } td.constellation_myth_attribution { font-size: 8pt; font-style: italic; text-align: right; } div.month img.constellation_map { background-color: var(--earth-const-map-br-color); } div.month th.left { color: var(--earth-const-th-left-color); } div.month td.constellation_map_attribution { color: var(--earth-attribution-color); } div.month td.constellation_meaning { color: var(--earth-compliment-color); } div.month td.constellation_myth { color: var(--earth-compliment-color); } div.month td.constellation_myth_attribution { color: var(--earth-attribution-color); } div.monx img.constellation_map { background-color: var(--mars-const-map-br-color); } div.monx th.left { color: var(--mars-const-th-left-color); } div.monx td.constellation_map_attribution { color: var(--mars-attribution-color); } div.monx td.constellation_meaning { color: var(--mars-compliment-color); } div.monx td.constellation_myth { color: var(--mars-compliment-color); } div.monx td.constellation_myth_attribution { color: var(--mars-attribution-color); } /* ---------- pages ---------- */ /* year page */ div.year_calendar table.year { height: 100%; width: 100%; font-size: 14pt; text-align: center; } div.year_calendar table.year a { text-decoration: none; color: var(--earth-text-color); } div.year_calendar table.year a:hover { color: var(--earth-hover-color) } div.year_calendar table.year tr.header { font-family: sans-serif; vertical-align: bottom; } div.year_calendar table.year tr.header th.prev { text-align: left; } div.year_calendar table.year tr.header th.year { font-weight: bold; font-size: 24pt; } div.year_calendar table.year tr.header th.next { text-align: right; } div.year_calendar table.year td.year_month { vertical-align: top; padding: 4pt; } div.year_calendar table.year table.month th.month { font-weight: bold; font-size: 14pt; } div.year_calendar table.year table.month tr.weekdays { color: var(--earth-compliment-color); } div.year_calendar table.year table.month td.today { background-color: var(--earth-now-color); border-radius: 4px; } div.year_calendar table.year table.month td.ingress { border: var(--earth-ingress-color); border-width: 2pt; border-radius: 4px; border-style: solid; } div.year_calendar table.year table.month td.sync { border: var(--earth-sync-color); border-width: 2pt; border-radius: 4px; border-style: solid; } div.year_calendar table.year table.month td.egress { border: var(--earth-egress-color); border-width: 2pt; border-radius: 4px; border-style: solid; } div.year_calendar table.year table.month td { padding: 2pt; } /* verx page */ div.verx_calendar table.verx { height: 100%; width: 100%; font-size: 14pt; text-align: center; } div.verx_calendar table.verx a { text-decoration: none; color: var(--mars-text-color); } div.verx_calendar table.verx a:hover { color: var(--mars-hover-color) } div.verx_calendar table.verx tr.header { font-family: sans-serif; vertical-align: bottom; } div.verx_calendar table.verx tr.header th.prev { text-align: left; } div.verx_calendar table.verx tr.header th.verx { font-weight: bold; font-size: 24pt; } div.verx_calendar table.verx tr.header th.next { text-align: right; } div.verx_calendar table.verx td.verx_monx { vertical-align: top; padding: 4pt; } div.verx_calendar table.verx table.monx th.monx { font-weight: bold; font-size: 14pt; } div.verx_calendar table.verx table.monx tr.woxsols { color: var(--mars-compliment-color); } div.verx_calendar table.verx table.monx td.tosol { background-color: var(--mars-now-color); border-radius: 4px; } div.verx_calendar table.verx table.monx td.ingress { border: var(--mars-ingress-color); border-width: 2pt; border-radius: 4px; border-style: solid; } div.verx_calendar table.verx table.monx td.sync { border: var(--mars-sync-color); border-width: 2pt; border-radius: 4px; border-style: solid; } div.verx_calendar table.verx table.monx td.egress { border: var(--mars-egress-color); border-width: 2pt; border-radius: 4px; border-style: solid; } div.verx_calendar table.verx table.monx td { padding: 2pt; } /* month page */ td.month_calendar_artwork { text-align: center; } img.month_calendar_artwork { border-radius: 6px; display: block; margin: 0 auto; max-height: 500px; } td.month_calendar_artwork_attribution { color: var(--earth-attribution-color); font-size: 8pt; font-style: italic; text-align: center; } div.month_calendar table.month { width: 100%; font-family: sans-serif; font-size: 24pt; text-align: center; vertical-align: middle } div.month_calendar table.month a { text-decoration: none; color: var(--earth-text-color); } div.month_calendar table.month a:hover { color: var(--earth-hover-color) } div.month_calendar table.month tr.header { font-size: 36pt; } div.month_calendar table.month tr.weekdays { color: var(--earth-compliment-color); } div.month_calendar table.month td.today { background-color: var(--earth-now-color); border-radius: 4px; } div.month_calendar table.month td.ingress { border: var(--earth-ingress-color); border-width: 2pt; border-radius: 4px; border-style: solid; } div.month_calendar table.month td.sync { border: var(--earth-sync-color); border-width: 2pt; border-radius: 4px; border-style: solid; } div.month_calendar table.month td.egress { border: var(--earth-egress-color); border-width: 2pt; border-radius: 4px; border-style: solid; } /* monx page */ td.monx_calendar_artwork { text-align: center; } img.monx_calendar_artwork { border-radius: 6px; display: block; margin: 0 auto; max-height: 500px; } td.monx_calendar_artwork_attribution { color: var(--mars-attribution-color); font-size: 8pt; font-style: italic; text-align: center; } div.monx_calendar table.monx { width: 100%; font-family: sans-serif; font-size: 24pt; text-align: center; vertical-align: middle } div.monx_calendar table.monx a { text-decoration: none; color: var(--mars-text-color); } div.monx_calendar table.monx a:hover { color: var(--mars-hover-color) } div.monx_calendar table.monx tr.header { font-size: 36pt; } div.monx_calendar table.monx tr.woxsols { color: var(--mars-compliment-color); } div.monx_calendar table.monx td.tosol { background-color: var(--mars-now-color); border-radius: 4px; } div.monx_calendar table.monx td.ingress { border: var(--mars-ingress-color); border-width: 2pt; border-radius: 4px; border-style: solid; } div.monx_calendar table.monx td.sync { border: var(--mars-sync-color); border-width: 2pt; border-radius: 4px; border-style: solid; } div.monx_calendar table.monx td.egress { border: var(--mars-egress-color); border-width: 2pt; border-radius: 4px; border-style: solid; } /* day page */ td.day_calendar_artwork { text-align: center; } img.day_calendar_artwork { border-radius: 6px; display: block; margin: 0 auto; max-height: 500px; } td.day_calendar_artwork_attribution { color: var(--earth-attribution-color); font-size: 8pt; font-style: italic; text-align: center; } div.day_calendar table.month { width: 100%; font-family: sans-serif; font-size: 24pt; text-align: center; vertical-align: middle } div.day_calendar table.month a { text-decoration: none; color: var(--earth-text-color); } div.day_calendar table.month a:hover { color: var(--earth-hover-color) } div.day_calendar table.month tr.header { font-size: 36pt; } div.day_calendar table.month tr.weekdays { color: var(--earth-compliment-color); } div.day_calendar table.month td.displayed { background-color: var(--earth-compliment-color); border-radius: 4px; } div.day_calendar table.month td.today { background-color: var(--earth-now-color); border-radius: 4px; } div.day_calendar table.month td.ingress { border: var(--earth-ingress-color); border-width: 2pt; border-radius: 4px; border-style: solid; } div.day_calendar table.month td.sync { border: var(--earth-sync-color); border-width: 2pt; border-radius: 4px; border-style: solid; } div.day_calendar table.month td.egress { border: var(--earth-egress-color); border-width: 2pt; border-radius: 4px; border-style: solid; } div.day_info table { white-space: nowrap; text-align: center; } div.day_info th.separate { padding-top: 48pt; } div.day_info td.separate { padding-top: 48pt; } div.day_info td.earth a { text-decoration: none; color: var(--earth-text-color); } div.day_info td.earth a:hover { color: var(--earth-hover-color) } div.day_info th.earth a { text-decoration: none; color: var(--earth-compliment-color); } div.day_info th.earth a:hover { color: var(--earth-hover-color) } div.day_info td.mars a { text-decoration: none; color: var(--mars-text-color); } div.day_info td.mars a:hover { color: var(--mars-hover-color) } div.day_info th.mars a { text-decoration: none; color: var(--mars-compliment-color); } div.day_info th.mars a:hover { color: var(--mars-hover-color) } div.day_info th.earth { color: var(--earth-compliment-color); font-size: 24pt; } div.day_info th.mars { color: var(--mars-compliment-color); font-size: 24pt; } div.day_info th.time { font-family:monospace; font-size: 96pt; } div.day_info th.mars_delta { font-family: serif; font-style: italic; font-size: 18pt; } div.day_info td.earth.dynamically_tracking { color: var(--earth-now-color); } div.day_info td.mars.dynamically_tracking { color: var(--mars-now-color); } table.drops { margin-left: auto; margin-right: auto; width: fit-content; } table.drops th { font-size: 12pt; text-align: left; } table.drops td { font-size: 10pt; text-align: left; } table.drops th.earth { font-size: 12pt; } table.drops th.mars { font-size: 12pt; } table.drops td.earth { color: var(--earth-compliment-color) } table.drops td.mars { color: var(--mars-compliment-color) } table.drops td.note { font-style: italic; } /* sol page */ td.sol_calendar_artwork { text-align: center; } img.sol_calendar_artwork { border-radius: 6px; display: block; margin: 0 auto; max-height: 500px; } td.sol_calendar_artwork_attribution { color: var(--mars-attribution-color); font-size: 8pt; font-style: italic; text-align: center; } div.sol_calendar table.monx { width: 100%; font-family: sans-serif; font-size: 24pt; text-align: center; vertical-align: middle } div.sol_calendar table.monx a { text-decoration: none; color: var(--mars-text-color); } div.sol_calendar table.monx a:hover { color: var(--mars-hover-color) } div.sol_calendar table.monx tr.header { font-size: 36pt; } div.sol_calendar table.monx tr.woxsols { color: var(--mars-compliment-color); } div.sol_calendar table.monx td.displayed { background-color: var(--mars-compliment-color); border-radius: 4px; } div.sol_calendar table.monx td.tosol { background-color: var(--mars-now-color); border-radius: 4px; } div.sol_calendar table.monx td.ingress { border: var(--mars-ingress-color); border-width: 2pt; border-radius: 4px; border-style: solid; } div.sol_calendar table.monx td.sync { border: var(--mars-sync-color); border-width: 2pt; border-radius: 4px; border-style: solid; } div.sol_calendar table.monx td.egress { border: var(--mars-egress-color); border-width: 2pt; border-radius: 4px; border-style: solid; } div.sol_info table { white-space: nowrap; text-align: center; } div.sol_info th.separate { padding-top: 48pt; } div.sol_info td.separate { padding-top: 48pt; } div.sol_info td.mars a { text-decoration: none; color: var(--mars-text-color); } div.sol_info td.mars a:hover { color: var(--mars-hover-color) } div.sol_info th.mars a { text-decoration: none; color: var(--mars-compliment-color); } div.sol_info th.mars a:hover { color: var(--mars-hover-color) } div.sol_info td.earth a { text-decoration: none; color: var(--earth-text-color); } div.sol_info td.earth a:hover { color: var(--earth-hover-color) } div.sol_info th.earth a { text-decoration: none; color: var(--earth-compliment-color); } div.sol_info th.earth a:hover { color: var(--earth-hover-color) } div.sol_info th.mars { color: var(--mars-compliment-color); font-size: 24pt; } div.sol_info th.earth { color: var(--earth-compliment-color); font-size: 24pt; } div.sol_info th.time { font-family:monospace; font-size: 96pt; } div.sol_info th.earth_delta { font-family: serif; font-style: italic; font-size: 18pt; } div.sol_info td.mars.dynamically_tracking { color: var(--mars-now-color); } div.sol_info td.earth.dynamically_tracking { color: var(--earth-now-color); }