html {
    height: 100%;
    color-scheme: dark;
}

body {
    margin: unset;
    background: #060912;
    color: #ddd;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    font-family: 'Roboto', sans-serif;
}

.card {
    padding: 1rem;
    border-radius: 4px;
    border: 1px solid #770408;
    box-shadow: 0 0 4px 4px #77040855 ;
    display: block;
    width: fit-content;
    background: #121924;
}

.inline-gaped {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    align-items: center;
    gap: 1rem;
}

.abate-input {
    background-color: #060912;
    border-top: unset;
    border-left: unset;
    border-right: unset;
    border-bottom: 1px solid #770408;
    color: #aaa;
    padding: 0.5rem;
}

:focus {
    outline-offset: 2px;
    outline: 1px #a98 solid;
}

.abate-button {
    background: linear-gradient(to right, #770408, hsl(358, 93%, 28%));
    box-shadow: 1px 1px 3px 3px #0a040855;
    border: unset;
    padding: 0.25rem;
    min-width: 5rem;
    color: #aaa;
    transition: box-shadow 0.3s ease-in-out;
}

.abate-button:hover {
    cursor: pointer;
    box-shadow: 2px 2px 3px 3px #0a040855;
}

.footer {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    color: #aaa;
}

.abate-link {
    color: #aaa;
}

.abate-section {
    border-bottom: 1px solid #aaaa;
    width: 100%;
}

.error-text {
    color: #dd0408;
    font-size: small;
    display: none;
}

.input-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.list-item {
    padding: 1rem;
    min-width: 10rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    border-radius: 4px;
    border: 1px solid #770408;
    box-shadow: 0 0 4px 4px #77040855 ;
    background: #121924;
}

.list-item:hover {
    cursor: pointer;
    background: #021924;
    box-shadow: 0 0 2px 2px #77040855 ;
}

:where([autocomplete=one-time-code]) {
    --otp-digits: 6;
    --otp-ls: 2ch;
    --otp-gap: 1.25;

    /* private consts */
    --_otp-bgsz: calc(var(--otp-ls) + 1ch);
    --_otp-digit: 0;

    all: unset;
    background:
            linear-gradient(90deg,
            #121619 calc(var(--otp-gap) * var(--otp-ls)),
            transparent 0),
            linear-gradient(90deg,
            #060912 calc(var(--otp-gap) * var(--otp-ls)),
            transparent 0
            );
    background-position: calc(var(--_otp-digit) * var(--_otp-bgsz)) 0, 0 0;
    background-repeat: no-repeat, repeat-x;
    background-size: var(--_otp-bgsz) 100%;
    caret-color: #222;
    caret-shape: block;
    clip-path: inset(0% calc(var(--otp-ls) / 2) 0% 0%);
    font-family: ui-monospace, monospace;
    font-size: 2.5em;
    inline-size: calc(var(--otp-digits) * var(--_otp-bgsz));
    letter-spacing: var(--otp-ls);
    padding-block: 1ch;
    padding-inline-start: calc(((var(--otp-ls) - 1ch) / 2) * var(--otp-gap));
}