sticky-note-wrapper {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	border: 1px solid transparent;
	border-radius: 50%;
	display: inline-block;
	height: 0.5rem;
	position: relative;
	width: 0.5rem;
}
sticky-note-wrapper * {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
sticky-note-wrapper sticky-note {
	cursor: -webkit-grab;
	cursor: grab;
	display: -ms-grid;
	display: grid;
	float: left;
	font-size: 1rem;
	height: 13rem;
	left: 0;
	place-items: stretch;
	position: absolute;
	top: 0;
	width: 13rem;
	z-index: 100;
}
sticky-note-wrapper sticky-note:active {
	cursor: -webkit-grabbing;
	cursor: grabbing;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}
sticky-note-wrapper sticky-note.right {
	float: right;
}
sticky-note-wrapper sticky-note > div {
	-ms-grid-row: 1;
	grid-row: 1;
	-ms-grid-column: 1;
	grid-column: 1;
}
sticky-note-wrapper sticky-note > div:nth-child(1) {
	background-color: rgba(0, 0, 0, 0.25);
	-webkit-box-shadow: -2px 2px 15px 0 rgba(0, 0, 0, 0.5);
	        box-shadow: -2px 2px 15px 0 rgba(0, 0, 0, 0.5);
	display: -ms-grid;
	display: grid;
	margin: 2rem 1rem 0.25rem 0.36rem;
	width: calc(100% - 1rem);
}
sticky-note-wrapper sticky-note > div:nth-child(2) {
	clip-path: url(#stickyClip);
	display: -ms-grid;
	display: grid;
	font-family: "Kalam", cursive;
	font-style: 1rem;
	font-weight: 300;
	line-height: 1.25rem;
	padding: 1rem;
	place-items: center;
	text-align: center;
}
sticky-note-wrapper sticky-note > div:nth-child(2) > * {
	font-family: "Kalam", cursive !important;
	font-style: normal !important;
	font-weight: 300 !important;
}
@media screen and (max-width: 1024px) {
	sticky-note-wrapper sticky-note > div:nth-child(2) {
		max-width: 13rem;
		min-width: 13rem;
		width: 1rem;
	}
}
@media screen and (max-width: 768px) {
	sticky-note-wrapper sticky-note > div:nth-child(2) {
		font-size: 1.75rem;
		max-width: 21rem;
		min-height: 21rem;
	}
}
@media screen and (max-width: 640px) {
	sticky-note-wrapper sticky-note > div:nth-child(2) {
		font-size: 2.5rem;
		max-width: 26rem;
		min-height: 26rem;
	}
}
sticky-note-wrapper sticky-note > div:nth-child(2) {
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(255, 255, 221.2)), color-stop(2%, #ffffd3), color-stop(12%, #ffffd3), color-stop(75%, rgb(255, 255, 200.8)), to(rgb(255, 255, 185.5)));
	background: linear-gradient(180deg, rgb(255, 255, 221.2) 0%, #ffffd3 2%, #ffffd3 12%, rgb(255, 255, 200.8) 75%, rgb(255, 255, 185.5) 100%);
}
sticky-note-wrapper sticky-note.blue > div:nth-child(2) {
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(156.5265625, 220.9484375, 235.6734375)), color-stop(2%, #94daea), color-stop(12%, #94daea), color-stop(75%, rgb(139.4734375, 215.0515625, 232.3265625)), to(rgb(126.68359375, 210.62890625, 229.81640625)));
	background: linear-gradient(180deg, rgb(156.5265625, 220.9484375, 235.6734375) 0%, #94daea 2%, #94daea 12%, rgb(139.4734375, 215.0515625, 232.3265625) 75%, rgb(126.68359375, 210.62890625, 229.81640625) 100%);
}
sticky-note-wrapper sticky-note.pink > div:nth-child(2) {
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(250.3493150685, 123.8506849315, 147.104109589)), color-stop(2%, #fa728b), color-stop(12%, #fa728b), color-stop(75%, rgb(249.6506849315, 104.1493150685, 130.895890411)), to(rgb(249.1267123288, 89.3732876712, 118.7397260274)));
	background: linear-gradient(180deg, rgb(250.3493150685, 123.8506849315, 147.104109589) 0%, #fa728b 2%, #fa728b 12%, rgb(249.6506849315, 104.1493150685, 130.895890411) 75%, rgb(249.1267123288, 89.3732876712, 118.7397260274) 100%);
}
sticky-note-wrapper sticky-note.green > div:nth-child(2) {
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(196.6333333333, 251.5666666667, 200.925)), color-stop(2%, #bbfbc0), color-stop(12%, #bbfbc0), color-stop(75%, rgb(177.3666666667, 250.4333333333, 183.075)), to(rgb(162.9166666667, 249.5833333333, 169.6875)));
	background: linear-gradient(180deg, rgb(196.6333333333, 251.5666666667, 200.925) 0%, #bbfbc0 2%, #bbfbc0 12%, rgb(177.3666666667, 250.4333333333, 183.075) 75%, rgb(162.9166666667, 249.5833333333, 169.6875) 100%);
}
sticky-note-wrapper:has(sticky-note:hover) {
	background-color: #ffffd3;
	border: 1px solid black;
}
sticky-note-wrapper:has(sticky-note.yellow:hover) {
	background-color: #ffffd3;
}
sticky-note-wrapper:has(sticky-note.blue:hover) {
	background-color: #94daea;
}
sticky-note-wrapper:has(sticky-note.pink:hover) {
	background-color: #fa728b;
}
sticky-note-wrapper:has(sticky-note.green:hover) {
	background-color: #bbfbc0;
}