:root {

   --bg-color: #ffd0c0;
   --text-color: #40001b;
   --border-color: #330217;
   --dark-1: #b53122;
   --dark-2: #c10631;
   --dark-3: #3b3eff;
   --light-orange: #ff8019;
   --light-1: #eacee4;
   --light-2: #f2e4f1;
   --light-3: #ff3f5a;
   --light-4: #b8da3d;
   --light-5: #fda54b;
   --light-6: #eff5d1;
   --light-7: #7c7ef5;
   --light-8: #bfc0f5;
   --light-9: #fb93a1;
   --edit: #feae59;
   --tag: #eacee4;
   --rating: #d433498a;
   

   --font: sans-serif;

   background-color: var(--bg-color);
   color: var(--text-color);

   font-family: var(--font);

   border: var(--border-color);

   
}

html {
   margin: 0px;
   padding: 0px;
}

textarea {
   resize: none;
   font-family: var(--font);
   padding: 2px;
}

.single-row {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
   justify-content: center;
}


.small-button {
   height: 1.1em;
   padding: 5px;
   border: 1px solid var(--border-color);
   margin: 3px;
   border-radius: 5px;
}


/* animations */
.fade-enter-active{
   transition: opacity .4s ease .2s;
}
.fade-leave-active {
   transition: opacity .15s ease;
}
.fade-enter-from, .fade-leave-to {
   opacity: 0;
}
.quickFade-enter-active{
   transition: opacity .2s ease .2s;
}
.quickFade-leave-active {
   transition: opacity 0s;
}
.quickFade-enter-from, .quickFade-leave-to {
   opacity: 0;
}