.card {
    max-width:  40em;
    margin:     1em auto 4em auto;
    padding:    2em;
    box-shadow: 0 4px  8px 0 rgba(0, 0, 0, 0.2),
                0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
h1 {
    text-align: center;
}
.holder {
    margin: 0 3em 0 3em;
}
input[type=text] {
    font-size:      1.1em;
    color:          darkblue;
    border-width:   0 0 1px 0;

    background-image:    linear-gradient(orange, orange);
    background-position: left bottom;
    background-repeat:   no-repeat;
    background-size:     0% 1px; /* default:  do not show */
}

input[type=text]:focus {
    outline:             transparent none 0;
    border-bottom-color: transparent;

    background-size:     100% 1px;
    transition:          background-size linear .5s;
}

#plus {
    position: relative;
    top: -1em;
}
.delete {
    background-color: transparent;
    border: none;
    color: red;
    font-size: 1.3em;
}
input.invalid {
    color: red;
}
.selected {
    box-shadow: 0 0 0.2em gold;
}