button {
    cursor: pointer;
    border: none;
    border-radius: 10px;
    width: 248px;
    height: 36px;
    color: white;
    background-color: var(--purple);
    min-height: fit-content;
}


/* Open Popup Buttons */
.open-add-popup {
    border-radius: 100%;
    padding: 12px;
}

.open-add-popup {
    background-color: var(--orange);
    margin: 12px;
}

.open-add-popup.purple {
    background-color: var(--purple);
    margin: 0;
}


/* Button Row */
.button-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-top: 48px;
}

#signup .button-row,
#login .button-row {
    margin-bottom: 36px;
}

.add-popup .button-row,
.update-popup .button-row {
    margin: 0;
}

#delete-account .button-row {
    margin-top: 24px;
}


/* Primary button */
#account .btn-primary {
    width: 371px;
}

#delete-account .btn-primary {
    width: 283px;
}


/* Delete button */
.btn-delete {
    color: var(--red);
    border: 1px solid var(--red);
    background-color: transparent;
}

.btn-delete:hover {
    color: white;
    background-color: var(--red);
}

#account .btn-delete {
    width: 161px;
}

#delete-account .btn-delete {
    width: 118px;
}


@media (max-width: 700px) {

    button {
        padding: 12px;
    }

    button,
    .btn-primary,
    .btn-delete {
        width: 100%;
        max-width: 100%;
    }

    #account .btn-primary,
    #account .btn-delete {
        width: 100%;
        max-width: 100%;
    }

    #account .button-row {
        margin-bottom: 0;
    }

    #account .button-row>a {
        width: 100%;
    }

}

@media (max-width: 475px) {

    #delete-account .button-row>a {
        width: 100%;
    }

    #delete-account .btn-primary,
    #delete-account .btn-delete {
        width: 100%;
        max-width: 100%;
    }

}