body {
	background-color: steelblue;
	color: white;
	font-family: Arial, sans-serif;
	overflow: auto;
	font-size: 24px;
	margin: 0px;
	padding: 0px;
}

h1 {	
	margin-top: 0px;
	color: darkseagreen;
	font-weight: bold;
}	



h3 {
	margin-top: 30px;
	font-weight: bold;
	color: darkseagreen;
}

.summary {
	font-weight: bold;
	color: darkseagreen;
	font-size: 28;
	cursor: pointer;
}


.button {
	padding: 15px 30px;
	font-size: 24px;
	cursor: pointer;
	border-radius: 50px;
}

.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(20px); }
	100% { transform: translateX(-00px); }
}

.jiggle-text {
	display: inline-block;
	animation: jiggle 0.03s 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; }
}

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

@keyframes RedBlink {
	0% { color: black; }
	25% { color: red; }
	50% { color: red; }
	75% { color: red; }
	100% { color: black; }
}