:root {
	--primary:hsl(339, 83%, 52%);
	--primary-hover:hsl(339, 83%, 42%);
	--color:hsl(0, 0%, 9%);
	--second:hsl(99, 48%, 51%);
	--third:hsl(38, 95%, 54%);
    --third-hover:hsl(38, 95%, 44%);
	--four: hsl(210, 100%, 61%);
    --four-hover: hsl(210, 100%, 51%);
	--btn-color:hsl(0, 0%, 100%);
	--btn-sm:8.5px 21px;
	--btn:12px 35px;
	--btn-lg:12px 50px;
	--h1:4.8rem;
	--h2:4rem;
	--h3:3.2rem;
	--h4:2.4rem;
	--h5:2rem;
	--h6:1.6rem;
	--p:1.6rem;
	--pmd:2rem;
	--plg:2.4rem;
	--container-padding:26px;
	--letter-section:30rem;
	--letter-section_lg:40rem;
	--h1-lg:7.2rem;
	--h1-md:6.4rem;
	--h2-lg:5.6rem;
}

[data-theme=pink] {
	--primary:hsl(339, 83%, 52%);
	--primary-hover:hsl(339, 83%, 42%);
}

[data-theme=yellow] {
	--primary:hsl(38, 95%, 54%);
	--primary-hover:hsl(38, 95%, 44%);
}

[data-theme=green] {
	--primary:#389AFF;
	--primary-hover:#389AFF;
}

[data-theme=blue] {
	--primary:#389AFF;
	--primary-hover:#389AFF;
}

[data-theme=teal] {
	--primary:#009688;
	--primary-hover:#017c70;
}
@media screen and (max-width:1023px) {
	:root {
		--h1-lg:4.8rem;
	}
}

@media screen and (max-width:992px) {
	:root {
		--container-padding:17px;
		--h1-lg:28px;
	}
}

@media screen and (max-width:768px) {
	:root {
		--btn-sm:9px 19px;
		--btn:14px 28px;
		--btn-lg:14px 38px;
		--h1:28px;
		--h2:24px;
		--h3:18px;
		--h4:16px;
		--h5:16px;
		--h6:14px;
		--p:14px;
		--pmd:16px;
		--plg:18px;
		--letter-section:17rem;
		--letter-section_lg:23rem;
		--h1-lg:28px;
	}

	[data-mobile] {
		--h1:32px;
		--h2:28px;
		--h3:24px;
		--h4:20px;
		--h5:18px;
		--h6:16px;
		--p:14px;
		--pmd:18px;
		--plg:20px;
		--container-padding:24px;
	}
}