*
{
    --font: 6rem;
    --task: calc(var(--font) + 2rem);
}

.add-modal
{display:none}
.add-modal.active
{display:unset}

.add-modal .name-input
{
    padding: 0;
    width: 90vw;
    height: var(--task); line-height: var(--task); font-size:var(--font);
}

.add-modal .submit
{
    padding:0;
    height: var(--task); line-height: var(--task); font-size:var(--font)
}
.add-modal .submit::after
{content: attr(value); font-size:var(--font); padding:1rem}

.add-modal.active+.add-button
{display:none}
.add-button
{
    width: auto; padding: 0;
    height: var(--task);
}
.add-button::after
{
    content:"New Task";
    font-family: monospace;
    vertical-align: text-top;
    text-align: center;
    font-size: var(--font);
    line-height: var(--task);
}

.tasks
{
    display: flex; flex-direction: row;
    justify-content: flex-start; align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: var(--task);
}

.tasks .task
{
    flex: 0 0 100%; background-color: bisque; appearance: none;
    margin: 1rem 0;
    overflow: hidden; text-wrap: nowrap;
    height: var(--task);
}
.tasks .task:checked
{background-color: darkseagreen}
.tasks .task::after
{content: attr(value); font-size:var(--font); line-height: var(--task);}

.storage-settings
{display: flex; position: fixed; left:0; bottom:0; background: white; width:100vw; margin:0}

.storage-settings input
{flex: 1 1 50%; height: var(--task); width: 50%; appearance:none; border-radius: 0}
.storage-settings input:checked
{background: green}
.storage-settings input::after
{content: attr(value); font-size:var(--font);}

button.reload
{position:fixed; top:0; right:0; width: var(--task); height: var(--task); line-height:0}
button.reload::after
{content:"R"; font-size: var(--font); line-height: var(--task);}