/*
* Spacing and font classes
* ========================
* These classes and custom properties were generated on https://utopia.fyi/.
* The objective of all those calculations is to achieve a fluid design as explained here: https://archive.is/NMFow.
* The good thing about using those values for font-size, widths, margins and paddings is that they will vary depending
* the screen size.
*/

:root {
  --font-size--3: var(--step--3);
  --font-size--2: var(--step--2);
  --font-size--1: var(--step--1);
  --font-size-0: var(--step-0);
  --font-size-1: var(--step-1);
  --font-size-2: var(--step-2);
  --font-size-3: var(--step-3);
  --font-size-4: var(--step-4);
  --font-size-5: var(--step-5);
  --font-size-6: var(--step-6);
  --font-size-7: var(--step-7);
  --font-size-8: var(--step-8);
}

/* @link https://utopia.fyi/type/calculator?c=480,14,1.067,1024,14,1.125,8,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */

:root {
  --step--3: clamp(0.6145rem, 0.8136rem + -0.3111vw, 0.7203rem);
  --step--2: clamp(0.6914rem, 0.8367rem + -0.2271vw, 0.7686rem);
  --step--1: clamp(0.7778rem, 0.8574rem + -0.1243vw, 0.8201rem);
  --step-0: clamp(0.875rem, 0.875rem + 0vw, 0.875rem);
  --step-1: clamp(0.9336rem, 0.8888rem + 0.1493vw, 0.9844rem);
  --step-2: clamp(0.9962rem, 0.898rem + 0.3272vw, 1.1074rem);
  --step-3: clamp(1.0629rem, 0.9015rem + 0.538vw, 1.2458rem);
  --step-4: clamp(1.1341rem, 0.8982rem + 0.7866vw, 1.4016rem);
  --step-5: clamp(1.2101rem, 0.8866rem + 1.0784vw, 1.5768rem);
  --step-6: clamp(1.2912rem, 0.8653rem + 1.4196vw, 1.7739rem);
  --step-7: clamp(1.3777rem, 0.8325rem + 1.8173vw, 1.9956rem);
  --step-8: clamp(1.47rem, 0.7862rem + 2.2795vw, 2.2451rem);
}


/* @link https://utopia.fyi/space/calculator?c=480,12,1.067,1024,14,1.125,8,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */

:root {
  --fluid-min-width: 480;
  --fluid-max-width: 1024;

  --fluid-screen: 100vw;
  --fluid-bp: calc((var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width)));
}

@media screen and (min-width: var(--ats-max-width)) {
  :root {
    --fluid-screen: calc(var(--fluid-max-width) * 1px);
  }
}

:root {
  --fc-3xs-min: (var(--fc-s-min) * 0.25); 
  --fc-3xs-max: (var(--fc-s-max) * 0.25);

  --fc-2xs-min: (var(--fc-s-min) * 0.5); 
  --fc-2xs-max: (var(--fc-s-max) * 0.5);

  --fc-xs-min: (var(--fc-s-min) * 0.75); 
  --fc-xs-max: (var(--fc-s-max) * 0.75);

  --fc-s-min: (var(--f-0-min, 12)); 
  --fc-s-max: (var(--f-0-max, 14));

  --fc-m-min: (var(--fc-s-min) * 1.5); 
  --fc-m-max: (var(--fc-s-max) * 1.5);

  --fc-l-min: (var(--fc-s-min) * 2); 
  --fc-l-max: (var(--fc-s-max) * 2);

  --fc-xl-min: (var(--fc-s-min) * 3); 
  --fc-xl-max: (var(--fc-s-max) * 3);

  --fc-2xl-min: (var(--fc-s-min) * 4); 
  --fc-2xl-max: (var(--fc-s-max) * 4);

  --fc-3xl-min: (var(--fc-s-min) * 6); 
  --fc-3xl-max: (var(--fc-s-max) * 6);

  /* T-shirt sizes */
  --space-3xs: calc(((var(--fc-3xs-min) / 16) * 1rem) + (var(--fc-3xs-max) - var(--fc-3xs-min)) * var(--fluid-bp));
  --space-2xs: calc(((var(--fc-2xs-min) / 16) * 1rem) + (var(--fc-2xs-max) - var(--fc-2xs-min)) * var(--fluid-bp));
  --space-xs: calc(((var(--fc-xs-min) / 16) * 1rem) + (var(--fc-xs-max) - var(--fc-xs-min)) * var(--fluid-bp));
  --space-s: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-s-max) - var(--fc-s-min)) * var(--fluid-bp));
  --space-m: calc(((var(--fc-m-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-m-min)) * var(--fluid-bp));
  --space-l: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-l-min)) * var(--fluid-bp));
  --space-xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-xl-min)) * var(--fluid-bp));
  --space-2xl: calc(((var(--fc-2xl-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-2xl-min)) * var(--fluid-bp));
  --space-3xl: calc(((var(--fc-3xl-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-3xl-min)) * var(--fluid-bp));
  
  /* One-up pairs */
  --space-3xs-2xs: calc(((var(--fc-3xs-min) / 16) * 1rem) + (var(--fc-2xs-max) - var(--fc-3xs-min)) * var(--fluid-bp));
  --space-2xs-xs: calc(((var(--fc-2xs-min) / 16) * 1rem) + (var(--fc-xs-max) - var(--fc-2xs-min)) * var(--fluid-bp));
  --space-xs-s: calc(((var(--fc-xs-min) / 16) * 1rem) + (var(--fc-s-max) - var(--fc-xs-min)) * var(--fluid-bp));
  --space-s-m: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-s-min)) * var(--fluid-bp));
  --space-m-l: calc(((var(--fc-m-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-m-min)) * var(--fluid-bp));
  --space-l-xl: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-l-min)) * var(--fluid-bp));
  --space-xl-2xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-xl-min)) * var(--fluid-bp));
  --space-2xl-3xl: calc(((var(--fc-2xl-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-2xl-min)) * var(--fluid-bp));

  /* Custom pairs */
  --space-s-l: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-s-min)) * var(--fluid-bp));
}

@keyframes atsAppear {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
  }
}

.ats-animation-appear {
  animation: atsAppear;
  animation-duration: 300ms;
  animation-fill-mode: backwards;
  animation-timing-function: ease-in-out;
}

.ats-animation-delay-1 {
  animation-delay: 300ms;
}

.ats-animation-delay-2 {
  animation-delay: 400ms;
}

.ats-animation-delay-3 {
  animation-delay: 500ms;
}

.ats-animation-delay-4 {
  animation-delay: 600ms;
}

.ats-clickable {
  transition: filter 100ms;
}

.ats-clickable:not(:disabled):hover {
  filter: brightness(0.8);
}

.ats-custom-scroll::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

.ats-custom-scroll {
  scrollbar-color: var(--color-primary) rgba(255, 255, 255, 0);
  scrollbar-width: thin;
}

.ats-custom-scroll::-webkit-scrollbar-track {
  display: none;
}

.ats-custom-scroll::-webkit-scrollbar-thumb {
  background-color: var(--color-primary);
  border-radius: 10px;
}

.ats-center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}