@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
	/* Colors */
	--black: #333333;
	--gray: #666666;
	--white: #fff;
	--body-color: #faf4fb;
	--primary-color: #7b2cbf;
	--primary-light-color: #d5aafa;
	--secondary-color: #ff9f1c;
	--neutral-color: #adb5bd;

	--header-start: #f6c4a785;
	--header-middle: #ea936185;
	--header-end: #ce6fbb85;

	--unrated: #33333365;
	--rate-0: #ff3849;
	--rate-1: #f76875;
	--rate-2: #fabd40;
	--rate-3: #f5d938;
	--rate-4: #90ed1f;
	--rate-5: #3ecf7a;

	--background-gradient: linear-gradient(to bottom,
			var(--header-start),
			var(--header-middle),
			var(--header-end));

	--background-gradient-card: linear-gradient(to bottom right,
			var(--primary-color),
			var(--secondary-color));
	/* Fonts */
	--font-family: 'Poppins',
		sans-serif;
	--text-primary-color: var(--primary-color);
	--text-secondary-color: var(--secondary-color);
	--text-black: var(--black);
	--text-white: var(--white);
	--text-neutral: var(--neutral-color);

	/* Paddings */
	--padding-xs: 0.125rem;
	--padding-sm: 0.3125rem;
	--padding-md: 0.625rem;
	--padding: 1rem;
	--padding-lg: 1.25rem;
	--padding-xl: 2rem;

	/* Gaps */
	--gap-xs: 0.125rem;
	--gap-sm: 0.3125rem;
	--gap-md: 0.7rem;
	--gap-lg: 1.25rem;
	--gap-xl: 2rem;

	/* Radius */
	--radius-xs: 5px;
	--radius: 15px;
	--round: 999px;

	/* Pages */
	--page-top-offset: 93px;

	/* Shadows */
	--shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
	--shadow-dark: 0 0 10px 0 rgba(0, 0, 0, 0.3);

	/* Buttons */
	--button-primary-color: var(--primary-color);
	--button-primary-background: var(--white);
	--button-primary-border: 2px solid var(--primary-color);
	--button-primary-color-hover: var(--white);
	--button-primary-background-hover: var(--primary-color);

	--header-height: clamp(70px, 70px, 70px);
	--navbar-width: 260px;
}