@keyframes pan-rotate {
	0% {
		background-position: 0% 0%;
		transform: rotate(0deg);
	}
	50% {
		background-position: 100% 100%;
		transform: rotate(360deg);
	}
	100% {
		background-position: 0% 0%;
		transform: rotate(0deg);
	}
}

@keyframes pan {
	0% {
	  background-position: 0% 0%;
	}
	100% {
	  background-position: 100% 0%;
	}
  }


@keyframes blink {
	0%, 47.5%, 52.5%, 100% {
		height: 20%;

		
	}
	50% {
		height: 0;
	}
}


* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	/* display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

	height: 100vh;

	/* --size: 60rem;
	--border-size: 1.25rem; */

	background-color: rgb(0 0 0 / 2.5%);

	--size: 15rem;
	--border-size: 0.25rem;
/* 
	.text {
		font-family: 'Itim';
		font-size: 4rem;
		overflow: hidden;
	} */

	.container {
		

		width: var(--size);
		position: relative;

		display: flex;
		justify-content: center;
		align-items: center;

		box-sizing: content-box;

		&:not(.card) {
			aspect-ratio: 1;
		}

		&.card {
			width: 100%;
			/* background-color: rgba(0 0 0 / 7.5%); */
			/* padding: 1.5rem;
			border-radius: 1rem; */
		}
	}

	.hat {
		--size: 7.5rem;
		--bottom-wider: 0.9;

		width: 100%;
		height: 50%;

		clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

		background-image:
			url("https://assets.codepen.io/1468070/Star+Pattern+3.svg"),
			linear-gradient(
				180deg,
				#76C3FF 0%,
				#fff 100%);
			;
		background-size: 25%;  
		position: absolute;
		animation: pan 20s linear infinite;
		will-change: background-position;

		border-radius: 15%;

		position: absolute;

		&.shadow {
			background-image: none;
			background-color: white;

			/* Make it bigger using transform. */
			transform: scale(1.1);
		}
	}

	.orb {
		position: absolute;
		background-color: white;


		background-size: 100% 100%;

		&.light {
			
			border: var(--border-size) solid #ffffff;
		}

		
		&.big {

			aspect-ratio: 1;
			width: 33.32%;
			top: 10%;

			background-image:
				url("https://assets.codepen.io/1468070/Star+Pattern+3.svg"),
				radial-gradient(circle farthest-corner at top left,
					#BADBEE 0%,
					rgba(225, 243, 97, 0) 50%),
				radial-gradient(circle farthest-side at top right,
					rgb(156, 176, 250) 0%,
					rgba(181, 176, 177, 0) 10%),
				radial-gradient(circle farthest-corner at bottom right,
					#a2d2e9 0%,
					rgba(204, 104, 119, 0) 33%),
				radial-gradient(circle farthest-corner at bottom left,
					#8eaaff 0%,
					rgba(204, 104, 119, 0) 33%),
				radial-gradient(circle farthest-corner at top right,
					#a4c7ff 0%,
					rgba(155, 221, 240, 0) 50%),
				radial-gradient(ellipse at bottom center,
					#ffffff 0%,
					rgba(254, 43, 0, 0) 80%);

			animation: pan-rotate 40s infinite linear alternate-reverse;
		}

		&.small {
			--padding-inside: 5%;
			
			height: 16.5%;
			width: 16.5%;
			
			top: 30%;
			transform: rotate(45deg);

			background-image:
				url("https://assets.codepen.io/1468070/Star+Pattern+3.svg"),
				radial-gradient(circle farthest-corner at top left,
					#c9d7ff 0%,
					rgba(225, 243, 97, 0) 50%),
				radial-gradient(circle farthest-side at top right,
					rgb(196, 206, 245) 0%,
					rgba(181, 176, 177, 0) 10%),
				radial-gradient(circle farthest-corner at bottom right,
					#ccdffc 0%,
					rgba(204, 104, 119, 0) 33%),
				radial-gradient(circle farthest-corner at bottom left,
					#dff1fb 0%,
					rgba(204, 104, 119, 0) 33%),
				radial-gradient(circle farthest-corner at top right,
					#d8f2fd 0%,
					rgba(155, 221, 240, 0) 50%),
				radial-gradient(ellipse at bottom center,
					#ffffff 0%,
					rgba(254, 43, 0, 0) 80%);
				

			&.left {
				left: var(--padding-inside);

				animation: pan-rotate 15s infinite linear alternate;
			}

			&.right {
				right: var(--padding-inside);

				animation: pan-rotate 15s infinite linear alternate-reverse;
			}

		}
	}

	.face {
		width: 50%;
		height: 50%;

		position: absolute;
		bottom: 0;
		
		border-radius: 50%;
		background-image: radial-gradient(
			circle,
			#f3c2af 0%,
			#ffccb7 50%,
			#fff0e9 100%
		);
		border: var(--border-size) solid white;
	}

	.eye {
		--padding-inside: 15%;

		width: 7.5%;
		border-radius: 40%;
		background-image: linear-gradient(
			180deg,
			#000 0%,
			#000 75%,
			#fff 75%,
			#fff 100%
		);
		position: absolute;
		bottom: 12.5%;

		animation: blink 10s infinite;

		&.left {
			margin-right: var(--padding-inside);
		}

		&.right {
			margin-left: var(--padding-inside);
		}
	}
}