/*
  Font family is Nunito Sans. Its fallback is Helvetica
*/
/*
  Font sizes have been converted to rem considering a base size of 16px.
*/
/*
*  Z-Index
*  
*  The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. 
*  Overlapping elements with a larger z-index cover those with a smaller one.
*  
*  REF: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
*  REF: https://www.smashingmagazine.com/2019/04/z-index-component-based-web-application/  
*/
/**
 * Define media query values
 */
.card {
  cursor: pointer;
}

.card-color {
  width: 239px;
  height: 136px;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  box-shadow: 0px 2px 8px -2px var(--color-shadow-1, rgba(0, 0, 0, 0.16));
  margin-left: 8px;
  margin-top: 8px;
}
.card-color--color {
  flex: 2;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-color--color-brand {
  background-color: var(--color-brand, #0096fa);
}
.card-color--color-primary {
  background-color: var(--color-primary, #1e6bf1);
}
.card-color--color-secondary {
  background-color: var(--color-secondary, #292929);
}
.card-color--color-surface-1 {
  background-color: var(--color-surface-1, #f6f6f6);
}
.card-color--color-surface-2 {
  background-color: var(--color-surface-2, #ededed);
}
.card-color--color-surface-3 {
  background-color: var(--color-surface-3, #e3e3e3);
}
.card-color--color-surface-4 {
  background-color: var(--color-surface-4, #141414);
}
.card-color--color-content-default {
  background-color: var(--color-content-default, #282828);
}
.card-color--color-content-disable {
  background-color: var(--color-content-disable, #595959);
}
.card-color--color-content-ghost {
  background-color: var(--color-content-ghost, #8c8c8c);
}
.card-color--color-content-bright {
  background-color: var(--color-content-bright, white);
}
.card-color--color-content-din {
  background-color: var(--color-content-din, black);
}
.card-color--color-border-1 {
  background-color: var(--color-border-1, rgba(0, 0, 0, 0.2));
}
.card-color--color-border-2 {
  background-color: var(--color-border-2, rgba(0, 0, 0, 0.16));
}
.card-color--color-border-3 {
  background-color: var(--color-border-3, rgba(0, 0, 0, 0.06));
}
.card-color--color-info {
  background-color: var(--color-info, #80e3eb);
}
.card-color--color-system {
  background-color: var(--color-system, #b2dffd);
}
.card-color--color-focus {
  background-color: var(--color-focus, #c226fb);
}
.card-color--color-success {
  background-color: var(--color-success, #84ebbc);
}
.card-color--color-warning {
  background-color: var(--color-warning, #fde99b);
}
.card-color--color-error {
  background-color: var(--color-error, #fabebe);
}
.card-color--color-delete {
  background-color: var(--color-delete, #e60f0f);
}
.card-color--color-extended-blue {
  background-color: var(--color-extended-blue, #1968f0);
}
.card-color--color-extended-ocean {
  background-color: var(--color-extended-ocean, #00d3e4);
}
.card-color--color-extended-green {
  background-color: var(--color-extended-green, #35de90);
}
.card-color--color-extended-yellow {
  background-color: var(--color-extended-yellow, #fbcf23);
}
.card-color--color-extended-orange {
  background-color: var(--color-extended-orange, #f06305);
}
.card-color--color-extended-red {
  background-color: var(--color-extended-red, #e60f0f);
}
.card-color--color-extended-pink {
  background-color: var(--color-extended-pink, #fb4bc1);
}
.card-color--color-extended-gray {
  background-color: var(--color-extended-gray, #666666);
}

.card-text {
  animation: invert-motion 1s;
}

.card-text-copie {
  animation: motion 3s 1;
}

@keyframes motion {
  0% {
    height: 0;
  }
  30% {
    height: 50%;
  }
  85% {
    letter-spacing: 0;
  }
}
@keyframes invert-motion {
  0% {
    height: 100%;
  }
  30% {
    height: 50%;
  }
  85% {
    letter-spacing: 0;
  }
}