@font-face {
    font-family: Raleway;
    src: url(../font/Raleway-VariableFont_wght.ttf);
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Raleway';
}

body {
    background-color: lightgrey;
    font-size: 14px;
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
}
.card {
    width: 350px;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    border-radius: 0.5rem;
}

    .card > .header, .content, .footer {
        background-color: white;
        padding: 1rem;
    }

    .card > .header {
        border-radius: 0.5rem 0.5rem 0 0;
        display: flex;
        justify-content: center;
    }

    .card > .content {
        color: rgb(138, 138, 138);
    }

        .card > .content label {
            font-weight: bold;
        }

    .card > .footer {
        border-radius: 0 0 0.5rem 0.5rem;
        border-top: 1px solid lightgray;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }


        .card > .footer > .notification {
            font-weight: bold;
            color: rgb(138, 138, 138);
            text-align: center;
        }

            .card > .footer > .notification.text-danger {
                color: red;
            }

            .card > .footer > .notification.text-success {
                color: #3B959F;
            }


button {
    background-color: #3B959F;
    padding: 1rem;
    margin: 0.5rem;
    font-size: 1em;
    border-radius: 0.25rem;
    border: 0;
    color: white;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px;
}

    button:not(.disabled):hover,
    button:not(.disabled):active {
        background-color: #47b4c0;
    }

    button:not(.disabled):active {
        transform: scale(.96);
    }

    button.disabled {
        transform: scale(.96);
        background-color: #71bac2;
    }