@import url("https://fonts.googleapis.com/css2?family=Signika:wght@300..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

:root {
	--scroll-percent: 0;
}

html {
	font-family: "Signika", sans-serif;
	font-optical-sizing: auto;
	font-weight: 800;
	font-style: normal;
	font-variation-settings: "GRAD" 0;
}

p {
	font-family: "Poppins", serif;
	font-weight: 300;
	font-style: normal;
}

body {
	background-color: pink;
	background: linear-gradient(
		324deg,
		rgb(196, 195, 220) 0%,
		rgb(235, 190, 209) 35%,
		rgb(186, 220, 227) 100%
	);
  background-size: 200% 200%;
	animation: Animation 4s ease infinite;
}

main {
  margin-inline: auto;
  max-width: 70ch;
}

@keyframes Animation {
	0% {
		background-position: 10% 0%;
	}
	50% {
		background-position: 91% 100%;
	}
	100% {
		background-position: 10% 0%;
	}
}

img {
	width: 100%;
}

.shyguy {
	object-fit: contain;
	position: fixed;
	bottom: 1rem;
	left: calc(var(--scroll-percent) * 90%);
	width: fit-content;
  animation: Wiggle 4s ease-in-out infinite alternate;
  filter: drop-shadow(3px 3px 5px black);
}

@keyframes Wiggle {
	0% {
		transform: rotate(-10deg);
	}
	100% {
		transform: rotate(10deg);
	}
}