/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');


* {
	margin: 0;
	padding: 0;
}

html {
	font-size: 50%;
}

body {
	overflow-x: hidden;
	font-family: "Inter", serif;
	background-image: url(/template/img/pattern.jpg);
	background-attachment: fixed;
}

:root {
	--blue: #0f57a2;
	--cream: #f6efd9;
	--white: #fffcf89f;
	--grey: #353535;
}


.a3_cookie {
	width: 100%;
	margin: 0 auto;
}

.intro {
	margin: 0 auto;
	width: 100%;
	padding: 5px 0px 10px 0px;
}

.content_container {
	padding-top: -300px;
}

.backgroundimg{
	background-image: url(/template/img/backgroundimg.png);
	background-position: top;
	background-size: 210vh ;
	background-repeat: no-repeat;
}

.chinaplate {
	background-image: url(../img/plate.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 650px;
	align-content: center;
	position: relative;
}

.cookie {
	position: relative;
	width: 280px;
	height: 280px;
	margin: 0 auto;
}

.description {
	color: #353535;
	font-size: 2rem;
	text-align: center;
	font-weight: 500;
	text-shadow: 10px var(--cream);
}

.row {
	display: block;
	position: relative;
	height: fit-content;
}

.row img {
	width: 180px;
}

.cookie_half {
	transition: 2s;
}


#fortunePaper {
	background-image: url(../img/paper.png);
	width: 0px;
	height: fit-content;
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center;
	font-family: "Roboto Mono", monospace;
	font-style: normal;
	font-weight: 500;
	font-size: 1.8rem;
	color: #000;
	position: absolute;
	top: 5%;
	left: 50%;
	transform: translateX(-50%);
	transition: width 1s ease-out;
	overflow: visible;
	z-index: 5;
	white-space: normal;
	/* chnage to normal  */
	display: flex;
	align-items: top;
	justify-content: center;
	text-align: center;
	box-sizing: border-box;
	max-width: 350px;
	min-width: 100px;
	padding: 5px 25px;
	white-space: pre; 
	overflow:hidden;
}

#fortunePaper div {
	width:480px;
	display:block;
	margin-top: 13px; 
}


h1 {
	color: var(--blue);
	font-family: "Caveat Brush", cursive;
	font-weight: 400;
	font-style: normal;
	font-size: 50px;
	text-align: center;
}

.reset_banner {
	background-color: var(--white);
	border: 1px dashed var(--blue);
	width: 250px;
	margin: 0 auto;
	padding: 15px 0px;
	font-size: 1.6rem;
	color: var(--grey);
	font-style: normal;
	font-weight: 500;
	border-radius: 20px;
	text-align: center;
	align-content: center;
	/* 取消transition: 3s; */
	/* 增加以下添加过渡效果 */
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
	opacity: 0;
	/* 新增定位样式 */
	bottom: 350px;
	/* 调整这个值控制垂直位置 */
	left: 50%;
	/* 修改定位方式 */
	position: fixed;
	/* 改为fixed定位 */
	transform: translateX(-50%) translateY(10px);
	/* 初始下移20px */
	z-index: 10;
	display: none;
}


.reset_banner.show {
	opacity: 1;
	transform: translateY(0);
	/* 增加以下 */
	transform: translateX(-50%) translateY(0);
	/* 居中显示 */
}

h2 {
	color: var(--blue);
	font-weight: 500;
	font-size: 3.2rem;
	font-family: "Caveat Brush", cursive;
}

.footer {
	width: 100%;
	padding: 5px 0px 0px 0px;
	text-align: center;
	letter-spacing: 1px;
	font-size: 1.5rem;
	color: hwb(0 45% 55%);
	text-shadow:  0px 0px 20px var(--cream);
}

a:link, a:visited{
	color: var(--grey);

}

a:hover, a:active{
	color: var(--blue);

}

#buttons {
	background-color: var(--blue);
	color: var(--cream);

	padding: 10px 20px;
	font-weight: 700;
	border-radius: 20px;
	border: 0px;
	font-size: 1.3rem;
	letter-spacing: 2px;
	display: block;
	transition: 0.3s;
	text-transform: uppercase;
	margin-top: 10px !important;
	margin: auto;
}

#buttons:hover {
	background-color: #3b9ff6;
	color: var(--blue);
}

.musicBtn{
	background-color: var(--blue);
}

#musicToggle {
    background-color: var(--blue);
    color: var(--cream);
    padding: 10px 20px;
	font-family: "Inter", serif;
    font-weight: 700;
    border-radius: 20px;
    border: 1px solid var(--blue);
    font-size: 1.5rem;
    display: block;
    margin: 10px auto;
	position: relative;
    bottom: 150px;        
    margin-left: 50px;
	margin-bottom: 0px;   
	cursor: pointer;    
}

#musicToggle:hover {
    background-color: var(--white);
    color: var(--blue);
	border: 1px dashed var(--blue);
}