/* Transition: fade */
.fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
}

/* Transition: bounce */
.bounce-enter-active {
    animation: bounce-in .5s;
}
.bounce-leave-active {
    animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}



/* Misc */

body {
    margin:0;
    padding:0;
}

#app {
    padding:10px;
}


ul > li {
    list-style:none;
}
button {
    width:150px;
    min-height:40px;
    padding:10px 2px;
    margin:1px 3px;
}

h1 span {
    cursor:pointer;
}

span.success {
    color:green;
}
span.danger {
    color:darkred;
}
span.warning {
    color:orange;
}
span.info {
    color:dodgerblue;
}
span.default {
    color:gray;
}
span.medium {
    font-size:1.2em;
}
span.large {
    font-size:1.8em;
}
span.superlarge {
    font-size:2.4em;
}
span.flash {
    color:yellowgreen;
    font-weight: bold;
    font-size:2.4em;
}

.bg1 { background:#ffffcc; font-size:1em; }
.bg2 { background:#fffccc; font-size:1.1em; }
.bg3 { background:#ffeccc; font-size:1.2em; }

/* .bg1 button { width:150px; background:#ffffcc; border:1px solid #333; }
.bg2 button { width:170px; background:#ccffff; border:5px solid #333; }
.bg3 button { width:200px; background:#ccffcc; border:10px solid #333; } */