*{
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
    -webkit-tap-highlight-color: transparent;
    
}

button:focus {
    outline: none;
}

/* 
.averia {
    font-family: "Averia Serif Libre", serif;
    font-weight: 400;
}	
.averia-italic {
    font-family: "Averia Serif Libre", serif;
    font-weight: 400;
    font-style: italic;
}	

.noto-sans {
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
} */


p{
    /* color: #777; */
    line-height: 24px !important;
}

.shadow-huge{

    box-shadow:
    0px 2.2px 2.2px -12px rgba(0, 0, 0, 0.089),
    0px 7.4px 7.7px -12px rgba(0, 0, 0, 0.131),
    0px 33px 33px -12px rgba(0, 0, 0, 0.22)
    ;
}
.shadow-huge-close{
    box-shadow:
    0px 2.2px 2.5px rgba(0, 0, 0, 0.065),
    0px 7.4px 8.6px rgba(0, 0, 0, 0.095),
    0px 33px 37px rgba(0, 0, 0, 0.16)
    ;
}

.input {
    width: 100%;
    /* max-width: 220px; */
    height: 42px;
    padding: 8px;
    border-radius: 8px;
    border: 1.5px solid lightgrey;
    outline: none;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: 0px 0px 20px -18px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
  }
  
  .input:hover {
    border: 2px solid lightgrey;
    box-shadow: 0px 0px 20px -17px;
  }
  
  .input:active {
    transform: scale(0.95);
  }
  
  .input:focus {
    border: 2px solid grey;
  }


/* HTML: <div class="loader"></div> */
/* .loader {
  width: 40px;
  --b: 8px; 
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 1px;
  background: conic-gradient(#0000 10%,#334155) content-box;
  -webkit-mask:
    repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg),
    radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
  -webkit-mask-composite: destination-in;
          mask-composite: intersect;
  animation:l4 1s infinite steps(10);
}
@keyframes l4 {to{transform: rotate(1turn)}} */

.loader {
  width: 38px;
  height: 38px;
  border: 3px dotted #447138;
  border-style: solid solid dotted dotted;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  animation: rotation 2s linear infinite;
  margin: 20px auto;
}
.loader::after {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 3px dotted #8db57b;
  border-style: solid solid dotted;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  animation: rotationBack 1s linear infinite;
  transform-origin: center center;
}
    
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 
@keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
} 

.pattern {

    --s: 100px; /* control the size*/
    --c1: #ddf3e2;
    --c2: #d4ead1;
    --c3: #cfe6c6;
    
    --_g: 50%,#0000 37%,var(--c1) 39% 70%,#0000 72%;
    --_t: 50%,var(--c2) 40deg,var(--c3) 0 140deg,var(--c2) 0 180deg,#0000 0; 
    --_s: 47% 50% at;
    background: 
      radial-gradient(var(--_s) -10% var(--_g)) 0 calc(var(--s)/2),
      radial-gradient(var(--_s) -10% var(--_g)) calc(var(--s)/2) 0,
      radial-gradient(var(--_s) 110% var(--_g)),
      radial-gradient(var(--_s) 110% var(--_g)) calc(var(--s)/2) calc(var(--s)/2),
      conic-gradient(from   0deg at 55% var(--_t)) calc(var(--s)/4) 0,
      conic-gradient(from 180deg at 45% var(--_t)) calc(var(--s)/4) 0,
      var(--c2);
    background-size: var(--s) var(--s);
}