<!--<section class="hero1">
	<h1>Barkin' Baxter's Treat Truck</h1>
	<p>Poppin' Up Soon at a Dog Park Near You!</p>
</section>-->

<section class="testimonials">
	<h2>What Our Fans Are Saying</h2>
	<div class="testimonial">
		<h3 class="a">&#8220;These treats are real tail-waggers&#8221;</h3>
		<p class="a"> My pug Sir Biscuit is obsessed with the Salmon Snackers! He does a little dance when he hears the Barkin' Baxter's truck coming. - Lily R.</p>
		<h3 class="b">"A bona-fido game-changer"</h3>
		<p class="b">Baxters are at the top of the food chain! Maximus is a picky eater but he loves these treats. - Albert Z. </p>
		<h3 class="c">"Treat time has never been so dog-gone amazing"</h3>
		<p class="c">Our little Mabel gives them two paws up and a whole lot of slobbery kisses. - Jennifer T. </p>
	</div>
	<div class="testimonial hid">
		<h3 class="b">"A bona-fido game-changer"</h3>
		<p class="b">Baxters are at the top of the food chain! Maximus is a picky eater but he loves these treats. - Albert Z. </p>
	</div>
	<div class="testimonial hid">
		<h3 class="c">"Treat time has never been so dog-gone amazing"</h3>
		<p class="c">Our little Mabel gives them two paws up and a whole lot of slobbery kisses. - Jennifer T. </p>
	</div>
</section>

<!--<section class="hero2">
	<h2>What's on the Menu This Weekend?</h2>
</section>

<section class="menu">
	<div class="menu-item">
		<h3>Friday</h3>
		<ul>
			<li>Salmon Snackers</li>
			<li>Veggie Patch Poppers</li>
			<li>Chicken Pawsta Bites</li>
		</ul>
	</div>
	<div class="menu-item">
		<h3>Saturday</h3>
		<ul>
			<li>Peanut Butter Pupcakes</li>
			<li>Turkey Tenderloin Twists</li>
			<li>Carrot Cake Pupsicles</li>
		</ul>
	</div>
	<div class="menu-item">
		<h3>Sunday</h3>
		<ul>
			<li>Sweet Potato Surprise</li>
			<li>Beefy Bites</li>
			<li>Pumpkin Pup Pops</li>
		</ul>
	</div>
</section>-->

@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Passion+One:wght@400;700&display=swap');

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	--color-yellow: #F7C41F;
	--color-orange: #FC930A;
	--color-red: #FF003D;
	--color-mint: #CCF390;
	--color-slime: #E0E05A;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
}

html, body {
  height: 100%;
}

h2 {
	text-align: center;
	color: #333;
	font-weight: 400;
}

body {
	background: rgb(247,196,31);
  background: radial-gradient(circle, rgba(247,196,31,1) 0%, rgba(252,147,10,1) 65%);
	display: grid;
	place-items: center;
	//display: flex;
	//justify-content: center;
  //align-items: center;
	font-family: 'Passion One', cursive;
	font-weight: 400;
	perspective: 500px;
	-webkit-perspective: 500px;
  perspective-origin: 50% 50%;
	-webkit-perspective-origin: 50% 50%;
	
}

.testimonial {
	//opacity: 0;
	//transform-origin: 50% 50% 0;
	background: var(--color-red);
background: linear-gradient(215deg, rgba(255,86,126,1) 0%, rgba(255,0,61,1) 35%, rgba(218,0,52,1) 70%);
  background-size: 200% 200%;
	padding: 30px;
	border-radius: 20px;
	width: 400px;
	position: relative;
	color: white;
	animation: spin 12s infinite 0.2s ease-in-out, shade 12s infinite 0.2s ease-in-out;
}

.testimonial:nth-child(2) {
	//animation-delay: 4s;
}
.testimonial:nth-child(3) {
	//animation-delay: 8s;
}

.testimonial:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	bottom: -22px;
	right: 0;
	background: var(--color-red);
	background: linear-gradient(215deg, rgba(255,86,126,1) 0%, rgba(255,0,61,1) 35%, rgba(218,0,52,1) 70%);
	background-size: 200% 200%;
	clip-path: polygon(80% 80%, 90% 100%, 90% 80%);
	animation: shade 12s infinite 0.2s ease-in-out;
}

.testimonial:nth-child(2):after {
	//animation-delay: 4s;
}
.testimonial:nth-child(3):after {
	//animation-delay: 8s;
}

.testimonial:before { // shadow
	content: "";
	width: 300px;
	height: 50px;
	left: 50px;
	top: 50px;
	position: absolute;
	background: rgb(0 0 0 / 0.2);
	transform: translateY(200px) translateZ(-50px) rotateX(90deg);
	filter: blur(20px);
}

.testimonial.hid {
	display: none;
}

.testimonial h3.b,
.testimonial h3.c,
.testimonial p.b,
.testimonial p.c,{
	display: none;
}
.testimonial h3,
.testimonial p {
	//animation: showhide 36s infinite 0.2s;
}
.testimonial h3.b,
.testimonial p.b {
	//animation-delay: 12.2s;
}
.testimonial h3.c,
.testimonial p.c {
	//animation-delay: 24.4s;
}

.testimonial h3 {
	font-size: 22px;
	font-weight: 700;
	line-height: 26px;
	margin-bottom: 15px;
	//font-family: 'Alfa Slab One', cursive;
}

@keyframes spinnew {
	0% {
		transform: rotateY(90deg) rotateX(0deg);
		//display: block;
		//opacity: 1;
	};
	5% {
		transform: rotateY(38deg) rotateX(8deg);
			
	}
	95% {
		transform: rotateY(-30deg) rotateX(-2deg);	
	}
	100% {
		transform: rotateY(-90deg) rotateX(0deg);
		//display: block;
		//opacity: 1;
	}
}

@keyframes spin {
	0%,
	100% {
		transform: rotateY(-30deg) rotateX(-2deg);		
	}
	50% {
		transform: rotateY(38deg) rotateX(8deg);
	}
}

@keyframes shade {
	0%,
	100% {
		background-position: 0% 100%
	}
	50% {
		background-position: 100% 0%
	}
}
@keyframes showhide {
	// can't animate display!
	0% {
		display: block;
	}
	33.3333% {
		display: block;
	}
	33.3334% {
		display: none;
	}
	100% {
		display: none;
	}
}



/* ---- forget this! ---- */

.hero1 {
	background-image: url("https://images.unsplash.com/photo-1568640347023-a616a30bc3bd?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODQ1MTcyMTd8&ixlib=rb-4.0.3&q=85"); /*photo by okeykat for Unsplash */
	background-size: cover;
	background-position: center;
	text-align: center;
	padding: 100px 0;
	color: black;
	-webkit-text-stroke: 1px hotpink;
	text-stroke: 1px hotpink;
}

.hero1 h1,
.hero2 h1 {
	font-size: 3rem;
	margin-bottom: 0.5rem;
}

.hero1 p {
	font-size: 1.5rem;
}

h2 {
	font-size: 2rem;
	margin-bottom: 1.5rem;
}

.hero2 {
	background-color: #8e9eb8;
	background-image: /* photo by Michael G for Unsplash */ url("https://images.unsplash.com/photo-1649923625228-3d2c89437a6e?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODQ1MTk2ODh8&ixlib=rb-4.0.3&q=85"),
		url("https://images.unsplash.com/photo-1582798358481-d199fb7347bb?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODQ1MjQxMjJ8&ixlib=rb-4.0.3&q=85"); /* photo by Susan Q Yin for Unsplash */
	background-position: left, right;
	background-size: contain;
	background-blend-mode: hard-light;
	background-repeat: no-repeat;
	text-align: center;
	padding: 150px 0;
	color: white;
	text-shadow: 1px -1px 1px black;
}

.menu {
	display: flex;
	justify-content: space-around;
	padding: 0.5rem 0;
}

.menu-item {
	width: 30%;
	text-align: center;
}

.menu-item h2 {
	font-size: 1.5rem;
}

.menu-item ul {
	list-style: none;
	font-size: 1.2rem;
}

@media all AND (max-width: 500px) {
	.hero2 {
		background-image: url("https://images.unsplash.com/photo-1649923625228-3d2c89437a6e?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODQ1MTk2ODh8&ixlib=rb-4.0.3&q=85"); /* photo by Michael G for Unsplash */
		background-position: center;
		background-size: cover;
		background-blend-mode: hard-light;
		background-repeat: no-repeat;
	}
	
.menu {
    flex-direction: column;
    align-items: center;
  }
	
	.menu-item {
		width: 80%;
		padding: .5rem 0;
		border-bottom: 1px dotted black;
	}

}