/* ID that centers the validation text */
#validation {
    text-align: center;
}

/* add a margin around the entire footer */
footer {
    margin: 50px;
}

/* add some color to h1 */
h1 {
    text-align: center;
    color: #af4c8e;
}

/* container styling */
#container {
    margin-top: 20px;
    border: 5px solid #af4c8e;
    text-align: center;
    justify-content: center;
    color: blueviolet;
    background-color: rgb(188, 213, 250);
}

/* add background color for the whole page */
body {
    background-color: rgb(246, 207, 250);
}

/* style the button */

button {
    background-color: rgb(153, 153, 236);
    color: rgb(58, 9, 58);
    border: none;
    padding: 15px 30px;
    font-weight: bold;
    letter-spacing: 1px;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s ease;
}

#root {
    margin-top: 20px;
    text-align: center;

}