/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
*, html  {
  /* --title-shadow: rgba(255, 255, 255, .5) 0px 8px 24px; */
  --title-shadow-start:  -2px 2px 3px rgba(0, 0, 0, .3);
  --title-shadow-middle: 0px  0px 3px rgba(0, 0, 0, .2);
  --title-shadow-end:    2px -2px 3px rgba(0, 0, 0, .3);
}
.top-flag{
  svg {
    margin-right: .5rem;
    display: block; 
    height: 1.5rem;
  }
} 

.field_with_errors {
  width: 100%;
}

.anim-title svg {
  min-width: 90vw;
  max-width: 90vw;
}


@media only screen and (min-width:641px) and (max-width: 800px){
  .anim-title svg {
    min-width: 70vw;
    max-width: 70vw;
  }
}
@media only screen and (min-width:801px) and (max-width: 1099px){
  .anim-title svg {
    min-width: 65vw;
    max-width: 65vw;
  }
}
@media only screen and (min-width:1100px) {
  .anim-title svg {
    min-width: 50vw;
    max-width: 50vw;
  }
}

.anim-title svg path {
  fill: transparent;
  stroke: #fff;
  stroke-widht: 0.1;
  stroke-dasharray: 30;
  stroke-dashoffset: 70;
  animation: textAnimation 3s ease-in-out 1 forwards;
}

@keyframes textAnimation {
  0% {
    stroke-dasharray: 70;
    stroke: rgba(255,255,255,.3);
    fill: rgba(001, 029, 000, .2);
    filter: drop-shadow(var(--title-shadow-start));
  }
  30% {
    stroke: transparent;
    filter: drop-shadow(var(--title-shadow-middle));
  }
  100% {
    fill: #011D00;
    stroke: transparent;
    stroke-dasharray: 0;
    filter: drop-shadow(var(--title-shadow-end));
  }
}