body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.icon {
    display: inline-block;
    height: 1em;
    vertical-align: -.125em;
    fill: currentColor;
}

.spoiler {
    background-color: #111 !important;
    color: #111 !important;
    padding: 0 .2rem;
    border-radius: .25rem;
}

.spoiler:hover {
    background-color: #444444 !important;
    color: unset !important;
}

.empty-card {
    border: 1px dashed #AAA !important;
    cursor: pointer;
}

/* Prevent duplicate clicks by using a fake and real button and swapping out using htmx request class. */
form .real {
    display: block;
}

form .fake {
    display: none;
}

form.htmx-request .real {
    display: none;
}

form.htmx-request .fake {
    display: block;
}

main {
    /* Main needs to push down on the footer if it does not take up all the space */
    flex: 1;
}