.pie

body {
	background: #fff;
	font-family: "Comfortaa", sans-serif;
}

:root {
	--light-brown: #f8d496;
	--light-brown-2: #f8c077;
	--light-brown-3: #f9aa4e;
	--light-brown-4: #ef9f3d;
	--brown: #d79457;
	--cherry: #ad2a3d;
	--cherry-dark: #961b2f;
	--cherry-light: #f83e48;
	--cherry-light-2: #ff5861;
	--pink: #f6b1c5;
	--pie: rgb(239,174,102);
}

$dark-shadow: #621725;

.pie {
	min-height: 100vh;
	min-width: 100vw;
	background-color: var(--cherry);
	background-image: linear-gradient(
			-45deg,
			rgba(255, 255, 255, 0) 63%,
			rgba($dark-shadow, 0.15) 65%,
			var(--light-brown) 65%,
			var(--brown) 65%,
			var(--light-brown-3) 74%,
			var(--light-brown-2) 86%,
			var(--pie) 89%,
			rgba(255, 255, 255, 0) 89%,
		),
		linear-gradient(
			45deg,
			rgba(255, 255, 255, 0) 63%,
			rgba($dark-shadow, 0.15) 65%,
			var(--light-brown) 65%,
			var(--brown) 65%,
			var(--light-brown-3) 74%,
			var(--light-brown-2) 86%,
			var(--pie) 89%,
			rgba(255, 255, 255, 0) 89%,
		),
		linear-gradient(
			-45deg,
			rgba(255, 255, 255, 0) 63%,
			rgba($dark-shadow, 0.15) 65%,
			var(--light-brown) 65%,
			var(--brown) 65%,
			var(--light-brown-3) 74%,
			var(--light-brown-2) 86%,
			var(--pie) 89%,
			rgba(255, 255, 255, 0) 89%,
		),
		linear-gradient(
			45deg,
			rgba(255, 255, 255, 0) 13%,
			rgba($dark-shadow, 0.15) 15%,
			var(--light-brown) 15%,
			var(--brown) 15%,
			var(--light-brown-3) 24%,
			var(--light-brown-2) 36%,
			var(--pie) 39%,
			rgba(255, 255, 255, 0) 39%,
		),
		linear-gradient(
			-45deg,
			rgba(255, 255, 255, 0) 13%,
			rgba($dark-shadow, 0.15) 15%,
			var(--light-brown) 15%,
			var(--brown) 15%,
			var(--light-brown-3) 24%,
			var(--light-brown-2) 36%,
			var(--pie) 39%,
			rgba(255, 255, 255, 0) 39%,
		), 
		/*shadowing*/
		linear-gradient(
			to bottom,
			rgba($dark-shadow,.6) 0,
			rgba(0, 0, 0, 0) 25%
		),
		/*cherry-light*/
		radial-gradient(
			circle,
			var(--cherry-light) 0%,
			rgba(255,255,255,.2) 2%,
			rgba(0, 0, 0, 0) 16%
		),
		/*cherries*/
		radial-gradient(
			circle,
			var(--cherry-light) 10%,
			var(--cherry) 30%,
			var(--cherry-dark) 38%,
			rgba(0, 0, 0, 0) 40%
		),
		radial-gradient(
			circle,
			var(--cherry-dark) 0%,
			var(--cherry) 10%,
			var(--cherry-dark) 25%,
			rgba(0, 0, 0, 0) 30%
		),
		radial-gradient(
			circle,
			$dark-shadow 0%,
			var(--cherry-dark) 30%,
			rgba(0, 0, 0, 0) 60%
		),
		/*light for cherries*/
		radial-gradient(
			circle,
			rgba(255,255,255,0.2) 0%,
			rgba(0, 0, 0, 0) 12%
		),
		linear-gradient(
			to right,
			rgba($dark-shadow,.6) 10%,
			rgba($dark-shadow,0) 100%,
			rgba(0, 0, 0, 0) 100%		
		),
		linear-gradient(
			-30deg,
			rgba($dark-shadow, .3) 40%,
			rgba(0,0,0,0) 55%,
		),
		/*side cherries*/
		radial-gradient(
			circle,
			var(--cherry-light) 8%,
			var(--cherry) 20%,
			var(--cherry-dark) 30%,
			rgba(0, 0, 0, 0) 25%
		),
		radial-gradient(
			circle,
			var(--cherry-light) 6%,
			var(--cherry-light) 20%,
			var(--cherry) 28%,
			rgba(0, 0, 0, 0) 35%
		),
		linear-gradient(
			to bottom,
			$dark-shadow 0%,
			rgba($dark-shadow,0.4) 50%,
			$dark-shadow 100%
		)
		;
	background-size: 150px 150px;
	background-position: 110px 40px, 0 0, 0 0, 0 0, 0 0, 0 -44px,70px 60px, 70px 40px, 105px 85px,
		60px 85px, 8px -4px, 0px 0, 0 0, -5px 0, -30px 0, 0 0;
	background-repeat: repeat;
}