.btn {
    cursor: pointer;
    transform: scale(1);
    transition-property: transform;
    transition-duration: 400ms;
    /* transition: tranform 1s; */
}

.btn:hover {
    transform: scale(1.15);
}

input {
    border: 2px solid purple;
    /* border-radius: 100rem; */
    color: black;
    /* transition-property: border;
    transition-duration: 100ms; */
}

input:focus {
    border: 2px solid green;
}

input:invalid {
    /* background-color: rgb(156, 35, 35); */
    border: 2px solid rgb(156, 35, 35);
    color: rgb(240, 13, 13);
}


/* input:not(:focus):invalid {
    background-color: rgb(156, 35, 35);
    border: 2px solid rgb(156, 35, 35);
    color: #fff;
} */