body {
	background-color: lightblue;
	font-family: Arial, sans-serif;
	overflow: hidden;
}

.note-icon::before {
	content: "\1F4DD";
	font-size: 24px;
	display: inline-block;
	margin-right: 5px;
}

.note-icon {
	position: absolute;
	font-size: 80px;
	animation: bounce 3.0s infinite ease-in-out;
}

@keyframes bounce {
	0% { transform: translateX(-00px); }
	50% { transform: translateX(445px); }
	100% { transform: translateX(-00px); }
}

.jiggle-text {
	display: inline-block;
	animation: jiggle 0.05s infinite alternate; 
}

@keyframes jiggle {
	0% { transform: translateY(0px) translateX(0px) rotate(-1deg); }
	100% { transform: translateY(0px) translateX(2px) rotate(1deg); } 
	/* from { transform: rotate(-1deg); }
	to { transform: rotate(1deg); } */
}

.rotating {
	display: inline-block;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.rainbow {
	0% { filter: hue-rotation(0deg); }
	100% { filter: hue-rotation(360deg); }
	animation: colorChange 1s linear infinite;
}

@keyframes colorChange {
	0% { color: magenta; }
	25% { color: cyan; }
	50% { color: lime; }
	75% { color: yellow; }
	100% { color: orange; }
}

.spincolor {
	display: inline-block;
	animation: spin 2s linear infinite, rainbow 4s linear infinite;
}


h1 {
	color: white;
}

body {
	color: white;
}