:root {
    --bg: white;
    --fg: #010;
    --fgsubtle: #676;
    --selected: #9e9;
    --ifneedbe: #ec9;
    --hover-selected: #bfb;
    --hover-unselected: #ddd;
    --hover-ifneedbe: #fdb;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #222;
        --fg: #ded;
        --fgsubtle: #898;
        --selected: #282;
        --ifneedbe: #852;
        --hover-selected: #2a2;
        --hover-unselected: #666;
        --hover-ifneedbe: #a62;
    }
}

/* disable hover effects on browsers that can't hover (e.g. phones) */
@media (hover: none) {
    :root {
        --hover-selected: var(--selected);
        --hover-unselected: var(--bg);
        --hover-ifneedbe: var(--ifneedbe);
    }
}

html, body {
    width: 100%;
    height: 100%;
    font-family: monospace;
    font-size: 1.2em;
    color: var(--fg);
    background-color: var(--bg);
    margin: 0;
    padding: 0;
}

.date-input {
    user-select: none;
    cursor: default;
    padding: 10px;
    text-align: center;
    font-size: 1.8rem;
}
.date-select {
    user-select: none;
    cursor: default;
    text-align: center;
}
.date-selected {
    background: var(--selected);
}
.date-ifneedbe {
    background: var(--ifneedbe);
}
.date-unselected {
}
.date-selected:hover {
    background: var(--hover-selected);
}
.date-unselected:hover {
    background: var(--hover-unselected);
}
.date-ifneedbe:hover {
    background: var(--hover-ifneedbe);
}

.date-table, .date-table td, .date-table th, .date-table tr {
    border-collapse: collapse;
    border: solid 1px var(--fgsubtle);
    text-align: center;
}
.poll-display th {
    padding: 10px;
}
.poll-display td {
    height: 50px;
}

.month-nav button {
    margin: 10px;
    font-size: 1.5rem;
}

.dates-input {
}
.dates-input table {
}

input, button, textarea {
    font-size: 1.2rem;
    color: var(--fg);
    background-color: var(--bg);
    border: solid 1px var(--fg);
}
button {
    box-shadow: 2px 2px var(--fg);
}
button:hover {
    background-color: var(--hover-unselected);
}
button:active {
    box-shadow: 4px 4px var(--fg);
}
button:disabled {
    color: var(--fgsubtle);
    box-shadow: 2px 2px var(--fgsubtle);
}
button:disabled:hover {
    background-color: var(--bg);
}
button:active {
    box-shadow: 2px 2px var(--fgsubtle);
}
.btn-big {
    font-size: 1.5rem;
}

.month-name {
    text-align: center;
    font-size: 1.4rem;
    min-width: 180px;
    display: inline-block;
}

.days-div {
    min-height:  340px;
}

.form-input {
    margin-bottom: 20px;
}

a {
    color: var(--fg);
}
a:hover, a:focus, a:active {
    background-color: var(--hover-unselected);
}

.ticked-date {
    font-size: 2rem;
}
.date-ifneedbe .ticked-date {
    font-size: 1.2rem;
}

.name-input {
    padding-left: 3px;
    padding-right: 3px;
}

.subtle {
    color: var(--fgsubtle);
}

.container {
    width: 100%;
    flex-direction: row;
    display: flex;
}
.leftpad, .rightpad {
    flex-grow: 1;
}
.main-content {
    flex-grow: 0;
}

.vcontainer {
    height: 100%;
    flex-direction: column;
    display: flex;
    flex-grow: 0;
    align-items: center;
    margin: 0;
    padding: 0;
}
.toppad {
    flex-grow: 1;
    margin: 0;
    padding: 0;
}
.bottompad {
    flex-grow: 3;
    margin: 0;
    padding: 0;
}
.container {
    flex-grow: 0;
    margin: 0;
    padding: 0;
}

.withborder {
    border: solid 1px var(--fgsubtle);
    padding: 4px;
}

small {
    font-size: 0.8rem;
}

.key {
    padding-bottom: 20px;
    font-size: 0.8rem;
}
.key span {
    border: solid 1px var(--fgsubtle);
}