:root, :root.light, :root.print {
    --fc-neutral-bg-color: rgba(40,40,45,.10);
    --fc-neutral-bg-color-sm: rgba(40,40,45,.10);
    --fc-today-bg-color: #d9e5ec;
    --fc-today-bg-color-sm: #d9e5ec;
    --fc-event-bg-color-past: #eee;
    --fc-event-border-color-past: #d4d4d8;
    --fc-event-text-color-past: #5b789d;
    --sf-body-bg-color: #444;
    --sf-body-txt-color: #222;
    --sf-content-border-color: #888;
    --sf-content-bg-color: #fff;
    --sf-content-bg-color-sm: #fff;
    --sf-button-border-color: rgb(192, 212, 225);
    --sf-button-bg-color: rgb(229, 242, 255);
    --sf-button-link-color: #248;
    --sf-button-hover-link-color: #9BF;
    --sf-button-capture-bg-color: transparent;
    --sf-theme-color-yellow: #f7c445;
    --sf-select-park-bg-color: #FFFFFF;
    --sf-select-park-bg-color-hover: #ffe093;
    --sf-select-park-color: #222;
    --sf-select-park-color-hover: #422;
}

@media only screen {
    :root.dark {
        --fc-neutral-bg-color: rgba(20,20,20,.20);
        --fc-neutral-bg-color-sm: #26282A;
        --fc-today-bg-color: rgba(118, 127, 147, 0.7);
        --fc-today-bg-color-sm: rgba(90, 101, 123, 0.7);
        --fc-event-bg-color-past: rgb(123, 123, 123);
        --fc-event-border-color-past: rgb(88, 88, 88);
        --fc-event-text-color-past: #e7e7e7;
        --fc-button-bg-color: rgb(50 85 121);
        --fc-button-border-color: rgb(84 134 167);
        --fc-border-color: rgb(113 117 125);
        --sf-body-bg-color: #222;
        --sf-body-txt-color: #fff;
        --sf-content-border-color: #333;
        --sf-content-bg-color: #444;
        --sf-content-bg-color-sm: #222;
        --sf-button-border-color: rgb(84 134 167);
        --sf-button-bg-color: rgb(50 85 121);
        --sf-button-link-color: rgb(216 238 255);
        --sf-button-hover-link-color: #fff;
        --sf-button-capture-bg-color: #88888880;
        --sf-select-park-bg-color: #322;
        --sf-select-park-bg-color-hover: #544;
        --sf-select-park-color: #FFF;
        --sf-select-park-color-hover: #DFEFFF;
    }
}

@media only screen and (prefers-color-scheme: dark) {
    :root {
        --fc-neutral-bg-color: rgba(20,20,20,.20);
        --fc-neutral-bg-color-sm: #26282A;
        --fc-today-bg-color: rgba(118, 127, 147, 0.7);
        --fc-today-bg-color-sm: rgba(90, 101, 123, 0.7);
        --fc-event-bg-color-past: rgb(123, 123, 123);
        --fc-event-border-color-past: rgb(88, 88, 88);
        --fc-event-text-color-past: #e7e7e7;
        --fc-button-bg-color: rgb(50 85 121);
        --fc-button-border-color: rgb(84 134 167);
        --fc-border-color: rgb(113 117 125);
        --sf-body-bg-color: #222;
        --sf-body-txt-color: #fff;
        --sf-content-border-color: #333;
        --sf-content-bg-color: #444;
        --sf-content-bg-color-sm: #222;
        --sf-button-border-color: rgb(84 134 167);
        --sf-button-bg-color: rgb(50 85 121);
        --sf-button-link-color: rgb(216 238 255);
        --sf-button-hover-link-color: #fff;
        --sf-button-capture-bg-color: #88888880;
        --sf-select-park-bg-color: #322;
        --sf-select-park-bg-color-hover: #544;
        --sf-select-park-color: #FFF;
        --sf-select-park-color-hover: #DFEFFF;
    }
}

body {
    margin: 0;
    padding: 10px;
    background-color: var(--sf-body-bg-color);
    color: var(--sf-body-txt-color);
    font-family: 'Lato', sans-serif;
}
a {
    text-decoration: none;
}
a.back {
    float: left;
    color: var(--sf-body-txt-color);
    filter: invert(0.4);
    margin-right: 10px;
}
.wrapper {
    padding: 10px;
    margin: 0 12px;
}
.content {
    max-width: 790px;
    padding: 10px 20px;
    margin: 10px auto;
    border: 2px solid var(--sf-content-border-color);
    background-color: var(--sf-content-bg-color);
    border-radius: 20px;
}
.lastChange {
    font-size: 0.8em;
    text-align: center;
    padding-top: 4px;
    padding-bottom: 10px;
    opacity: 0.5;
}
button.icon {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    border: 0;
    background-color: transparent;
    padding: 2px;
    cursor: pointer;
}
.floatRight {
    float: right;
    margin-left: 8px;
}
.floatLeft {
    float: left;
    margin-right: 8px;
}
.footer button.icon {
    display: block;
    margin: 0 auto;
    opacity: 0.3;
}
.footer .export-options button.icon {
    opacity: 0.9;
    width: 50px;
    height: 40px;
    padding: 5px 10px;
    display: inline-block;
    margin: 0 10px;
    background-color: var(--sf-button-capture-bg-color);
}
button.icon i {
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.3;
}
button.icon i.dark {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M421.6 379.9c-.6641 0-1.35 .0625-2.049 .1953c-11.24 2.143-22.37 3.17-33.32 3.17c-94.81 0-174.1-77.14-174.1-175.5c0-63.19 33.79-121.3 88.73-152.6c8.467-4.812 6.339-17.66-3.279-19.44c-11.2-2.078-29.53-3.746-40.9-3.746C132.3 31.1 32 132.2 32 256c0 123.6 100.1 224 223.8 224c69.04 0 132.1-31.45 173.8-82.93C435.3 389.1 429.1 379.9 421.6 379.9zM255.8 432C158.9 432 80 353 80 256c0-76.32 48.77-141.4 116.7-165.8C175.2 125 163.2 165.6 163.2 207.8c0 99.44 65.13 183.9 154.9 212.8C298.5 428.1 277.4 432 255.8 432z'/%3E%3C/svg%3E");
}
button.icon i.light {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M112.1 454.3c0 6.297 1.816 12.44 5.284 17.69l17.14 25.69c5.25 7.875 17.17 14.28 26.64 14.28h61.67c9.438 0 21.36-6.401 26.61-14.28l17.08-25.68c2.938-4.438 5.348-12.37 5.348-17.7L272 415.1h-160L112.1 454.3zM192 0C90.02 .3203 16 82.97 16 175.1c0 44.38 16.44 84.84 43.56 115.8c16.53 18.84 42.34 58.23 52.22 91.45c.0313 .25 .0938 .5166 .125 .7823h160.2c.0313-.2656 .0938-.5166 .125-.7823c9.875-33.22 35.69-72.61 52.22-91.45C351.6 260.8 368 220.4 368 175.1C368 78.8 289.2 .0039 192 0zM288.4 260.1c-15.66 17.85-35.04 46.3-49.05 75.89h-94.61c-14.01-29.59-33.39-58.04-49.04-75.88C75.24 236.8 64 206.1 64 175.1C64 113.3 112.1 48.25 191.1 48C262.6 48 320 105.4 320 175.1C320 206.1 308.8 236.8 288.4 260.1zM176 80C131.9 80 96 115.9 96 160c0 8.844 7.156 16 16 16S128 168.8 128 160c0-26.47 21.53-48 48-48c8.844 0 16-7.148 16-15.99S184.8 80 176 80z'/%3E%3C/svg%3E");
}
button.icon i.system {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M448 256c0-106-86-192-192-192V448c106 0 192-86 192-192zm64 0c0 141.4-114.6 256-256 256S0 397.4 0 256S114.6 0 256 0S512 114.6 512 256z'/%3E%3C/svg%3E");
}
button.icon i.bug {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 0c53 0 96 43 96 96v3.6c0 15.7-12.7 28.4-28.4 28.4H188.4c-15.7 0-28.4-12.7-28.4-28.4V96c0-53 43-96 96-96zM41.4 105.4c12.5-12.5 32.8-12.5 45.3 0l64 64c.7 .7 1.3 1.4 1.9 2.1c14.2-7.3 30.4-11.4 47.5-11.4H312c17.1 0 33.2 4.1 47.5 11.4c.6-.7 1.2-1.4 1.9-2.1l64-64c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-64 64c-.7 .7-1.4 1.3-2.1 1.9c6.2 12 10.1 25.3 11.1 39.5H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H416c0 24.6-5.5 47.8-15.4 68.6c2.2 1.3 4.2 2.9 6 4.8l64 64c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0l-63.1-63.1c-24.5 21.8-55.8 36.2-90.3 39.6V240c0-8.8-7.2-16-16-16s-16 7.2-16 16V479.2c-34.5-3.4-65.8-17.8-90.3-39.6L86.6 502.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l64-64c1.9-1.9 3.9-3.4 6-4.8C101.5 367.8 96 344.6 96 320H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H96.3c1.1-14.1 5-27.5 11.1-39.5c-.7-.6-1.4-1.2-2.1-1.9l-64-64c-12.5-12.5-12.5-32.8 0-45.3z'/%3E%3C/svg%3E");
}
button.icon i.camera {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M149.1 64.8L138.7 96H64C28.7 96 0 124.7 0 160V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H373.3L362.9 64.8C356.4 45.2 338.1 32 317.4 32H194.6c-20.7 0-39 13.2-45.5 32.8zM256 192a96 96 0 1 1 0 192 96 96 0 1 1 0-192z'/%3E%3C/svg%3E");
}
button.icon i.print {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M128 0C92.7 0 64 28.7 64 64v96h64V64H354.7L384 93.3V160h64V93.3c0-17-6.7-33.3-18.7-45.3L400 18.7C388 6.7 371.7 0 354.7 0H128zM384 352v32 64H128V384 368 352H384zm64 32h32c17.7 0 32-14.3 32-32V256c0-35.3-28.7-64-64-64H64c-35.3 0-64 28.7-64 64v96c0 17.7 14.3 32 32 32H64v64c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V384zM432 248a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/svg%3E");
}
button.icon i.location {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z'/%3E%3C/svg%3E");
}
button.icon i.share {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M352 224H305.5c-45 0-81.5 36.5-81.5 81.5c0 22.3 10.3 34.3 19.2 40.5c6.8 4.7 12.8 12 12.8 20.3c0 9.8-8 17.8-17.8 17.8h-2.5c-2.4 0-4.8-.4-7.1-1.4C210.8 374.8 128 333.4 128 240c0-79.5 64.5-144 144-144h80V34.7C352 15.5 367.5 0 386.7 0c8.6 0 16.8 3.2 23.2 8.9L548.1 133.3c7.6 6.8 11.9 16.5 11.9 26.7s-4.3 19.9-11.9 26.7l-139 125.1c-5.9 5.3-13.5 8.2-21.4 8.2H384c-17.7 0-32-14.3-32-32V224zM80 96c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16H400c8.8 0 16-7.2 16-16V384c0-17.7 14.3-32 32-32s32 14.3 32 32v48c0 44.2-35.8 80-80 80H80c-44.2 0-80-35.8-80-80V112C0 67.8 35.8 32 80 32h48c17.7 0 32 14.3 32 32s-14.3 32-32 32H80z'/%3E%3C/svg%3E");
}
button.icon i.calendar {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M184 24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H96c-35.3 0-64 28.7-64 64v16 48V448c0 35.3 28.7 64 64 64H416c35.3 0 64-28.7 64-64V192 144 128c0-35.3-28.7-64-64-64H376V24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H184V24zM80 192H432V448c0 8.8-7.2 16-16 16H96c-8.8 0-16-7.2-16-16V192zm176 40c-13.3 0-24 10.7-24 24v48H184c-13.3 0-24 10.7-24 24s10.7 24 24 24h48v48c0 13.3 10.7 24 24 24s24-10.7 24-24V352h48c13.3 0 24-10.7 24-24s-10.7-24-24-24H280V256c0-13.3-10.7-24-24-24z'/%3E%3C/svg%3E");
}
button.icon i.close {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"/></svg>');
}
.fc-day-past .fc-h-event {
    background-color: var(--fc-event-bg-color-past);
    border-color: var(--fc-event-border-color-past);
}
.fc-day-past .fc-h-event .fc-event-main {
    color: var(--fc-event-text-color-past);
}
.footer {
    font-size: 0.9em;
    margin-top: 20px;
    margin-bottom: 30px;
}
#log {
    font-family: monospace;
    margin-top: 5px;
    padding: 5px;
    border: 1px solid var(--fc-today-bg-color);
    border-radius: 8px;
    font-size: 0.7em;
    opacity: 0.5;
}
.dim {
    opacity: 0.5;
}
h1 {
    margin: 0 40px;
    text-align: center;
}
.calendarWrapper {
    min-width: 760px;
}
#calendar {
    height: 520px;
    width: 100%;
}
.fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 0.5em;
}
.center {
    text-align: center;
}
.hidden {
    display: none;
}
div.center {
    margin: 20px auto;
}
.footer a {
    color: var(--sf-button-link-color);
    background-color: var(--sf-button-bg-color);
    padding: 2px 4px;
    border-radius: 4px;
}
.footer a:hover {
    color: var(--sf-button-hover-link-color);
    background-color: var(--fc-button-hover-bg-color);
}
.footer .webcal-subscribe {
    display: inline-block;
}
a.button, select.button {
    display: inline-block;
    padding: 10px 20px;
    margin: 10px;
    border: 2px solid var(--sf-button-border-color);
    background-color: var(--sf-button-bg-color);
    color: var(--sf-button-link-color);
    border-radius: 6px;
    text-decoration: none;
}
a.button:hover {
    background-color: var(--fc-button-hover-bg-color);
    border-color: var(--fc-button-hover-border-color);
    color: var(--sf-button-hover-link-color);
}
.cover {
    display: none;
    opacity: 0.7;
    background-color: #000;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 998;
}
.options {
    display: none;
    flex-direction: column;
    position: fixed;    
    background-color: var(--sf-theme-color-yellow);
    border: 5px solid var(--sf-theme-color-yellow);
    border-radius: 6px;
    height: 85vh;
    width: 80vw;
    max-width: 500px;
    z-index: 999;
    margin-left: 40px;
}
.options .title {
    background-color: var(--sf-theme-color-yellow);
    color: #444;
    font-size: 1.2em;
    font-weight: bold;
    padding: 6px 10px 10px 10px;
}
.options .parks {
    overflow-x: hidden;
    overflow-y: scroll;
}
.options .state {
    background-color: var(--sf-theme-color-yellow);
    color: #707070;
    font-size: 0.9em;
    padding: 6px 10px;
}
.options a.button {
    display: block;
    margin: 0;
    padding: 8px 10px 8px 35px;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--sf-theme-color-yellow);
    background-color: var(--sf-select-park-bg-color);
    color: var(--sf-select-park-color);
}
.options a.button:hover {
    background-color: var(--sf-select-park-bg-color-hover);
    border-color: var(--sf-theme-color-yellow);
    color: var(--sf-select-park-color-hover);
}
.options a.selected::before {
    content: '☑️';
    position: relative;
    margin-left: -25px;
    margin-right: 5px;
    top: 0.5em;
}
.small {
    font-size: 0.7em;
}
p {
    margin: 1.2em 0;
}
.changelog-entry h2 {
    margin: 1em 0 0 0;
}
.changelog-entry pre {
    margin: 0.5em 0 1em 0;
}
.printOnly {
    display: none;
}
.topButtons {
    display: none;
    margin: 20px;
    text-align: center;
}
.urlHeader {
    margin: 0 auto;
    text-align: center;
    opacity: 0.6;
    font-size: 0.8em;
}
.urlHeader em {
    display: block;
    margin: 4px 0 0 0;
}
.urlHeader em.small {
    font-size: 0.7em;
}
@media only screen and (max-width: 900px) {
    body {
        padding: 0;
    }
    body, .content {
        background-color: var(--sf-content-bg-color-sm);
    }
    .fc .fc-daygrid-day.fc-day-today {
        background-color: var(--fc-today-bg-color-sm);
    }
    .fc .fc-day-disabled {
        background-color: var(--fc-neutral-bg-color-sm);
    }
    .topHeader {
        background-color: var(--sf-theme-color-yellow);
        padding: 10px;
        color: #222;
        margin: -10px -12px 8px;
    }
    .options {
        margin-left: 0px;
        width: 90vw;
    }
    .fc .fc-toolbar {
        max-width: 95vw;
    }
    .lastChange {
        padding-bottom: 0;
    }
    button.icon {
        margin-right: 10px;
    }
    .wrapper {
        padding: 0;
    }
    .calendarWrapper {
        padding-right: 20px;
    }
    .content {
        padding: 0;
        border: 0;
        border-radius: 0;
    }
    p {
        margin: 0.75em 12px;
    }
    .footer {
        padding-bottom: 20px;
    }
    .changelog-entry pre {
        font-size: 0.85em;
    }
}
@media only screen {
    .print .topButtons {
        display: block;
    }
    .print.preparing .topButtons {
        display: none;
    }
}
@media all {
    .print .topHeader {
        background-color: #f7c445;
        padding: 10px;
        color: #222;
        margin: -10px -12px 8px;
    }
    .print .fc .fc-toolbar {
        max-width: unset;
    }
    .print .fc .fc-toolbar.fc-header-toolbar {
        margin-bottom: 4px;
    }
    .print .fc .fc-toolbar-chunk .fc-button {
        display: none;
    }
    .print .icon, .print .footer {
        display: none;
    }
    .print body {
        background-color: white;
    }
    .print body, .print .wrapper {
        padding: 0;
    }
    .print .content {
        background-color: white;
        border: none;
        padding: 0 20px;
        margin: 0 auto;
    }
    .print .printOnly {
        display: block;
    }
    .print #capture {
        padding: 4px 10px;
        width: 800px;
    }
    .print .calendarWrapper {
        width: 800px;
    }
    .print #calendar {
        height: 500px;
    }
    .print .wrapper {
        width: 900px;
        margin: 0 auto;
    }
    .print .lastChange {
        display: none;
    }
}
@media only print {
    .print .topHeader {
        background-color: transparent;
        color: #222;
        padding-bottom: 0;
    }
}
