:root {
    --settings-height: 65%;
    --settings-width: 85%;
}

html {
    height: 100%;
}
body {
    background: #000;
    color: #fff;
    font-family: HelveticaNeue-Light, Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 2em;
    height: 100vh;
    padding-top: env(safe-area-inset-top);
    touch-action: none;
    width: 100%;
}

.center {
    text-align: center;
}

.header {
    /*font-family: "Courier New", Courier, monospace;*/
    font-size: 2em;
    /*padding: 0 0.5em;*/
    text-align: center;
}
.header .date {
    padding: 0 0.25em;
}
.header .date.today {
    color: #ffd166;
}
.header > button {
    background-color: #000;
    border: none;
    border-radius: 8px;
    padding: 0 3px;
}

.target {
    margin-top: 0.5em;
    text-align: center
}
.target > div > div:nth-child(1) {
    font-size: 3em;
}
.target > div > div:nth-child(2) {
    font-size: 1em;
}
.target.target-notmet {
    color: #c00;
}
.target.target-met,
.target.target-exceeded {
    color: #0a0;
}

.calendar {
    margin-top: 1em;
}
.calendar > div > div {
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100%;
    border-radius: 8px;
    margin: 0.1em;
    padding: 0.1em 0.3em;
}
.calendar > div > div.date {
    background-image: linear-gradient(180deg, rgba(255,255,255,0.2), rgba(255,255,255,0.25));
}
.calendar > div > div.date.today {
    color: #ffd166;
}
.calendar > div > div > span:nth-child(1) {
    float: left;
}
.calendar > div > div > span:nth-child(2) {
    float: right;
}
.calendar > div > div.padding {
    opacity: 0.25;
}

.calendar > div > div.type {
    background-position: 50% 60%, 0 0;
    background-repeat: no-repeat, no-repeat;
    background-size: 80%, 100%;
}
.calendar > div > div.type-holiday {
    background-image: url(../images/umbrella-beach.svg), linear-gradient(135deg, rgba(180,70,40,0.6), rgba(100,30,20,0.45));
}
.calendar > div > div.type-home {
    background-image: url(../images/home.svg), linear-gradient(135deg, rgba(100,190,210,0.6), rgba(10,40,50,0.65));
}
.calendar > div > div.type-leave {
    background-image: url(../images/airplane.svg), linear-gradient(135deg, rgba(140,210,110,0.6), rgba(20,120,30,0.65));
}
.calendar > div > div.type-office {
    background-image: url(../images/office-building.svg), linear-gradient(135deg, rgba(220,190,130,0.55), rgba(95,70,35,0.5));
}

.footer {
    min-height: env(safe-area-inset-bottom, 38px);
    padding: 0.5em 0;
    text-align: center;
}

.settings {
    background-color: #000;
    border: 2px solid #666;
    border-radius: 8px;
    font-size: 0.85em;
    height: var(--settings-height);
    left: calc((100% - var(--settings-width)) / 2);
    overflow: auto;
    padding: 0.95em 0.8em;
    position: absolute;
    top: calc((59px / 2) + (100% - var(--settings-height)) / 2);
    width: var(--settings-width);
}
.settings > div > div {
    margin-top: 1em;
}
.settings button, .settings input, .settings optgroup, .settings select, .settings textarea {
    color: #000;
}
.settings > button {
    margin-top: 1em;
}
.settings input[type="checkbox"] {
    zoom: 2;
}
.settings > div > p.icon {
    background-repeat: no-repeat;
    padding-left: 2em;
}
.settings > div > p.icon.type-holiday {
    background-image: url(../images/umbrella-beach.svg);
}
.settings > div > p.icon.type-home {
    background-image: url(../images/home.svg);
}
.settings > div > p.icon.type-leave {
    background-image: url(../images/airplane.svg);
}
.settings > div > p.icon.type-office {
    background-image: url(../images/office-building.svg);
}