@font-face {
	font-family: happybirthday;
	src: url(../font/Pinyon_Script/PinyonScript-Regular.ttf)format('truetype');
	font-weight: normal;

}

@font-face {
	font-family: pcontent;
	src: url(../font/Pinyon_Script2/ZCOOL_QingKe_HuangYou/ZCOOLQingKeHuangYou-Regular.ttf);
	font-weight: normal;
}

* {
	padding: 0;
	margin: 0;
}



.note-fist{
	opacity: 0;
	box-sizing: border-box;
	height:500px;
	width: 300px;
	background-color: #FFF9F5;
	transition: transform 2s ease-out, opacity 2s linear, width 2s ease, height 2s ease;
	padding: 20px;
	padding-top: 8px;
	position: absolute;
	box-shadow:
		0 3px 8px rgba(0, 0, 0, 0.1),
		0 0 30px rgba(0, 0, 0, 0.08) inset;
}
.note {
	box-sizing: border-box;
	height: 260px;
	width: 220px;
	background-color: #FFF9F5;

	padding: 20px;
	padding-top: 8px;
	position: absolute;
	box-shadow:
		0 3px 8px rgba(0, 0, 0, 0.1),
		0 0 30px rgba(0, 0, 0, 0.08) inset;

}

.note-transform {
	opacity: 0;
	transition: transform 0.6s ease-out, opacity 0.6s linear;
	transform: scale(0.6);
}

.note-fist::before,
.note::before {
	content: "";
	position: absolute;
	top: -8px;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 12px;
	background-color: #d4d0a8;
	border-radius: 2px;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

.note-content {
	font-size: 16px;
	line-height: 1.6;
	color: #555;
}

.note-content h3 {
	color: white;
	font-family: "happybirthday";
	font-size: 18px;
	color: #333;
	margin-bottom: 10px;
	border-bottom: 1px dashed #999;
	padding-bottom: 5px;

}

.note-content p {
	font-family: "pcontent";
	font-size: 20px;

	text-align: center;
	overflow-wrap: break-word;
	margin-top: 20px;


}