@import url("https://fonts.googleapis.com/css2?family=Archivo&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Syne:wght@500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter&family=Syne:wght@500&display=swap");
@font-face {
     font-family: "Satoshi";
     src: url(../fonts/Satoshi-Regular.otf);
     font-size: 500;
}
@font-face {
     font-family: "Satoshi";
     src: url(../fonts/Satoshi-Bold.otf);
     font-size: 700;
}
@font-face {
     font-family: "Satoshi";
     src: url(../fonts/Satoshi-Light.otf);
     font-size: 300;
}
:root {
     --archivo: "Archivo", sans-serif;
     --satoshi: "Satoshi", sans-serif;
     --syne: "Syne", sans-serif;
     --inter: "Inter", sans-serif;
     /* main background */
     --main-background: #fafff9;
     /* linear */
     --linear-from: #182719;
     --linear-to: #054b03;
     --linear-from2: #0d250b;
     --linear-to2: #35be32;
     /* green palette */
     --green-100: #e7ffe0;
     --green-150: #b2eda9;
     --green-200: #b5fca1;
     --green-250: #c7fea5;
     --green-300: #84e168;
     --green-400: #52bb33;
     --green-500: #2a8210;
     --green-600: #257a0b;
     --green-700: #1b5e07;
     --green-800: #124802;
     --green-850: #061d03;
     --green-900: #071f00;
     --green-950: #172114;
     /* gray  palette */
     --gray-300: #979f95;
     /* gray green palette */
     --gray-green-100: #d9e8d4;
     --gray-green-200: #bfd2ba;
     --gray-green-300: #93a78d;
     --gray-green-400: #6b7e65;
     --gray-green-500: #3b4b36;
     --gray-green-600: #35482e;
     --gray-green-700: #22351b;
     --gray-green-800: #162b0f;
     --gray-green-850: #0a2300;
     --gray-green-900: #0c1d06;
     /* black */
     --black: #000000;
     /* socials color */
     --socials-color: #77f253;
     /* form bg */
     --form-background: #1a1b1a;
     /* avatar color */
     --avatar-background: #123409;
     /* links color */
     --links-color : #0A1706;

     /* danger color */
     --red-200 : #FAB6B6;
}