.bt {
    display: inline-flex;
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: var(--font-weight);
    padding: var(--full-padding);
    justify-content: center;
    background: var(--rich-black);
    color: var(--rich-white);
    border-radius: var(--round-edges);
    white-space: nowrap;
    justify-self: center;
    margin: var(--around-margin);
}

.bt:hover:not(:disabled) {
    color: var(--grey);
}

.bt:disabled,
.bt[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.bt:hover,
.bt-secondary:hover {
    color: var(--grey);
}

.bt-secondary {
    display: inline-flex;
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: var(--font-weight);
    padding: var(--full-padding);
    justify-content: center;
    background: var(--rich-white);
    color: var(--rich-black);
    border-radius: var(--round-edges);
    white-space: nowrap;
    justify-self: center;
    margin: var(--around-margin);
}



.close {
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 50%;
    border: 0.0625rem solid #cbd5e0;
    background: #f8fafc;
    color: #1f2937;
    font-size: 1.35rem;
}