@font-face {
	font-family: 'Satoshi-Light';
	src: url('../../dist/fonts/Satoshi-Light.woff2') format('woff2'),
		url('../../dist/fonts/Satoshi-Light.woff') format('woff'),
		url('../../dist/fonts/Satoshi-Light.ttf') format('truetype');
	font-weight: 300;
	font-display: swap;
	font-style: normal;
}
@font-face {
	font-family: 'Satoshi-LightItalic';
	src: url('../../dist/fonts/Satoshi-LightItalic.woff2') format('woff2'),
		url('../../dist/fonts/Satoshi-LightItalic.woff') format('woff'),
		url('../../dist/fonts/Satoshi-LightItalic.ttf') format('truetype');
	font-weight: 300;
	font-display: swap;
	font-style: italic;
}
@font-face {
	font-family: 'Satoshi-Regular';
	src: url('../../dist/fonts/Satoshi-Regular.woff2') format('woff2'),
		url('../../dist/fonts/Satoshi-Regular.woff') format('woff'),
		url('../../dist/fonts/Satoshi-Regular.ttf') format('truetype');
	font-weight: 400;
	font-display: swap;
	font-style: normal;
}
@font-face {
	font-family: 'Satoshi-Italic';
	src: url('../../dist/fonts/Satoshi-Italic.woff2') format('woff2'),
		url('../../dist/fonts/Satoshi-Italic.woff') format('woff'),
		url('../../dist/fonts/Satoshi-Italic.ttf') format('truetype');
	font-weight: 400;
	font-display: swap;
	font-style: italic;
}
@font-face {
	font-family: 'Satoshi-Medium';
	src: url('../../dist/fonts/Satoshi-Medium.woff2') format('woff2'),
		url('../../dist/fonts/Satoshi-Medium.woff') format('woff'),
		url('../../dist/fonts/Satoshi-Medium.ttf') format('truetype');
	font-weight: 500;
	font-display: swap;
	font-style: normal;
}
@font-face {
	font-family: 'Satoshi-MediumItalic';
	src: url('../../dist/fonts/Satoshi-MediumItalic.woff2') format('woff2'),
		url('../../dist/fonts/Satoshi-MediumItalic.woff') format('woff'),
		url('../../dist/fonts/Satoshi-MediumItalic.ttf') format('truetype');
	font-weight: 500;
	font-display: swap;
	font-style: italic;
}
@font-face {
	font-family: 'Satoshi-Bold';
	src: url('../../dist/fonts/Satoshi-Bold.woff2') format('woff2'),
		url('../../dist/fonts/Satoshi-Bold.woff') format('woff'),
		url('../../dist/fonts/Satoshi-Bold.ttf') format('truetype');
	font-weight: 700;
	font-display: swap;
	font-style: normal;
}
@font-face {
	font-family: 'Satoshi-BoldItalic';
	src: url('../../dist/fonts/Satoshi-BoldItalic.woff2') format('woff2'),
		url('../../dist/fonts/Satoshi-BoldItalic.woff') format('woff'),
		url('../../dist/fonts/Satoshi-BoldItalic.ttf') format('truetype');
	font-weight: 700;
	font-display: swap;
	font-style: italic;
}
@font-face {
	font-family: 'Satoshi-Black';
	src: url('../../dist/fonts/Satoshi-Black.woff2') format('woff2'),
		url('../../dist/fonts/Satoshi-Black.woff') format('woff'),
		url('../../dist/fonts/Satoshi-Black.ttf') format('truetype');
	font-weight: 900;
	font-display: swap;
	font-style: normal;
}
@font-face {
	font-family: 'Satoshi-BlackItalic';
	src: url('../../dist/fonts/Satoshi-BlackItalic.woff2') format('woff2'),
		url('../../dist/fonts/Satoshi-BlackItalic.woff') format('woff'),
		url('../../dist/fonts/Satoshi-BlackItalic.ttf') format('truetype');
	font-weight: 900;
	font-display: swap;
	font-style: italic;
}

:root {
    /* Colors */
	--clr-dark: 12, 11, 16;
	--clr-lightdark: 21, 24, 35;
	--clr-lighterdark: 40, 41, 63;
	--clr-purple: 21, 24, 35;
	--clr-white: 255, 255, 255;
	--clr-black: 0, 0, 0;
	--clr-red: 79, 29, 22;
	--clr-redLabel: 255, 68, 68;
	--clr-gold: 242, 213, 175;
	--clr-lightGrey: 224, 228, 234;

    /* Others */
    --gapSmall: 5px;
    --gapMedium: 10px;
    --gapLarge: 20px;
    --borderRadiusSmall: 6px;
    --borderRadiusMedium: 10px;
    --borderRadiusLarge: 20px;
	--avatar-size: 50px;
	--logoSize: 120px;
	--max-btnSize: 210px;
	--avatar-row-size: 40px;
	--cart-minimized-size:60px;
	--iconSize: 20px;

	/* Fonts */
	--fsNormal: 16px;
	--fsMedium: 14px;
	--fsMini: 13px;
	--fsMicro: 11px;
	--fsBullet: 8px;
}

*,*::before,*::after {
    margin: 0;
    padding:0;
    box-sizing: border-box;
    position: relative;
}

html,body {
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    scroll-behavior: smooth;
    font-family: "Satoshi-Light", sans-serif;
	font-size: var(--fsNormal);
	background-image: linear-gradient(to right,rgb(var(--clr-dark)), rgb(var(--clr-purple)));
	color: rgb(var(--clr-white));
	font-size: var(--fsNormal);
}

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

::-webkit-scrollbar {width:4px;height:4px; }
::-webkit-scrollbar-track {-webkit-border-radius: 3px;border-radius: 3px; }
::-webkit-scrollbar-thumb {-webkit-border-radius: 3px;border-radius: 3px;background: rgb(var(--clr-dark)); }
::-webkit-scrollbar-thumb:window-inactive {background: rgb(var(--clr-dark)); }

@media screen and (max-width: 500px) {
    :root {
		--fsNormal: 13px;
		--fsMini: 10px;
    } 
}