/*
  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: 0 2px 8px 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, #E0E0E0);
}
.card-color--color-surface-3 {
  background-color: var(--color-surface-3, #CFCFCF);
}
.card-color--color-surface-4 {
  background-color: var(--color-surface-4, #141414);
}
.card-color--color-content-default {
  background-color: var(--color-content-default, #454545);
}
.card-color--color-content-disable {
  background-color: var(--color-content-disable, #636363);
}
.card-color--color-content-ghost {
  background-color: var(--color-content-ghost, #8C8C8C);
}
.card-color--color-content-bright {
  background-color: var(--color-content-bright, #ffffff);
}
.card-color--color-content-din {
  background-color: var(--color-content-din, #000000);
}
.card-color--color-border-1 {
  background-color: var(--color-border-1, #B1B1B1);
}
.card-color--color-border-2 {
  background-color: var(--color-border-2, #CFCFCF);
}
.card-color--color-border-3 {
  background-color: var(--color-border-3, #E1E1E1);
}
.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, #f99f9f);
}
.card-color--color-delete {
  background-color: var(--color-delete, #e60f0f);
}
.card-color--color-extended-blue {
  background-color: #1968F0;
}
.card-color--color-extended-ocean {
  background-color: #00D3E4;
}
.card-color--color-extended-green {
  background-color: #35DE90;
}
.card-color--color-extended-yellow {
  background-color: #FBCF23;
}
.card-color--color-extended-orange {
  background-color: #F06305;
}
.card-color--color-extended-red {
  background-color: #E60F0F;
}
.card-color--color-extended-pink {
  background-color: #FB4BC1;
}
.card-color--color-extended-gray {
  background-color: #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;
  }
}