button {
    margin-top: var(--text-size);
    margin-bottom: var(--text-size);
    box-shadow: 0 4px 30px color-mix(in srgb, var(--foreground) 10%, transparent);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid color-mix(in srgb, var(--foreground) 30%, transparent);
    border-radius: 16px;
    padding: calc(var(--text-size) * 0.5);
    background: color-mix(in srgb, var(--foreground) 20%, transparent);
    color: var(--foreground);
    font-family: var(--sans);
    font-size: var(--text-size);
    font-weight: var(--bold);
    transition-duration: var(--fade-time);
}

button:hover {
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    background: color-mix(in srgb, var(--accent) 20%, transparent);
}

label {
    font-family: var(--mono);
}

label + textarea, div + div {
    margin-top: calc(var(--text-size) * 0.5);
}

textarea {
    border: 1px solid color-mix(in srgb, var(--foreground) 30%, transparent);
    resize: none;
    width: inherit;
    height: calc(var(--text-size) * 10);
    background: color-mix(in srgb, var(--foreground) 10%, transparent);
    color: var(--foreground);
    font-family: var(--mono);
    font-size: var(--text-size);
}

textarea:focus {
    outline: none;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

input:after {
    content:"\a";
    white-space: pre;
}

.counter * {
    display: inline;
}
.counter button {
    border-radius: 100%;
    padding-top: calc(0.2 * var(--text-size));
    padding-bottom: calc(0.2 * var(--text-size));
    padding-left: calc(0.5 * var(--text-size));
    padding-right: calc(0.5 * var(--text-size));
}
.counter p {
    margin-left: calc(0.25 * var(--text-size));
    margin-right: calc(0.25 * var(--text-size));
}