* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    font-family: Josefin Sans;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

img {
    user-select: none;
}

a:active,
a:link,
a:visited {
    color: inherit;
}

button {
    outline: none;
    border: none;
    cursor: pointer;
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
}

input {
  height: min-content;
  width: min-content;
  background: transparent;
  border: transparent;
}

input:focus {
  outline: none;
}

input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

&::-ms-expand {
    display: none;
  }

.d90{
    transform: rotate(90deg);
}

.d180{
transform: rotate(180deg);
}

.d270{
transform: rotate(270deg);
}

:root {
  --1: clamp(0.1875rem, 0.26vw, 0.5rem);    /* 4px */
  --2: clamp(0.375rem, 0.52vw, 1rem);       /* 8px */
  --3: clamp(0.5625rem, 0.78vw, 1.5rem);    /* 12px */
  --4: clamp(0.75rem, 1.04vw, 2rem);        /* 16px */
  --5: clamp(0.9375rem, 1.3vw, 2.5rem);     /* 20px */
  --6: clamp(1.125rem, 1.56vw, 3rem);       /* 24px */
  --7: clamp(1.6875rem, 2.34vw, 4.5rem);    /* 36px */
  --8: clamp(2.25rem, 3.13vw, 6rem);        /* 48px */
  --9: clamp(3rem, 4.17vw, 8rem);           /* 64px */
  --10: clamp(4.5rem, 6.25vw, 12rem);       /* 96px */
  --11: clamp(6rem, 8.34vw, 16rem);         /* 128px */
  --12: clamp(12rem, 16.67vw, 32rem);       /* 256px */
  
  --min-1: min(0.25rem, 8%);
  --min-2: min(0.5rem, 8%);
  --min-3: min(0.75rem, 8%);
  --min-4: min(1rem, 8%);
  --min-5: min(1.25rem, 8%);
  --min-6: min(1.5rem, 8%);
  --min-7: min(2.25rem, 8%);
  --min-8: min(3rem, 8%);
  --min-9: min(4rem, 8%);
  --min-10: min(6rem, 8%);
  --min-11: min(8rem, 8%);
  --min-12: min(16rem, 8%);

  --transition: 0.3s ease-in-out;
}

@font-face {
    font-family: 'Josefin Sans';
    src: url('./fonts/Josefin_Sans/JosefinSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Josefin Sans';
    src: url('./fonts/Josefin_Sans/JosefinSans-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
  }
  
  @font-face {
    font-family: 'Josefin Sans';
    src: url('./fonts/Josefin_Sans/JosefinSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Josefin Sans';
    src: url('./fonts/Josefin_Sans/JosefinSans-Bold Italic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
  }
  
  @font-face {
    font-family: 'Josefin Sans';
    src: url('./fonts/Josefin_Sans/JosefinSans-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Josefin Sans';
    src: url('./fonts/Josefin_Sans/JosefinSans-ExtraLight Italic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
  }
  
  @font-face {
    font-family: 'Josefin Sans';
    src: url('./fonts/Josefin_Sans/JosefinSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Josefin Sans';
    src: url('./fonts/Josefin_Sans/JosefinSans-Light italic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
  }
  
  @font-face {
    font-family: 'Josefin Sans';
    src: url('./fonts/Josefin_Sans/JosefinSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Josefin Sans';
    src: url('./fonts/Josefin_Sans/JosefinSans-Medium Italic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
  }
  
  @font-face {
    font-family: 'Josefin Sans';
    src: url('./fonts/Josefin_Sans/JosefinSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Josefin Sans';
    src: url('./fonts/Josefin_Sans/JosefinSans-SemiBold Italic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
  }
  
  @font-face {
    font-family: 'Josefin Sans';
    src: url('./fonts/Josefin_Sans/JosefinSans-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Josefin Sans';
    src: url('./fonts/Josefin_Sans/JosefinSans-Thin Italic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
  }