.background {
  top: 0%;
  left: 50%;
  transform: translate(-50%, 0%);
  position: absolute;
  text-align:center;
  height: 100%;
  margin-top: 0;
  z-index:2;
}
.buddha{  
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, 0%);
  position: absolute;
  text-align:center;
  height: 100%;
  margin-top: 0;
  z-index:5;
  animation: fadeEffect 20s ease-in-out infinite;
}

/* Định nghĩa hiệu ứng mờ dần sang rõ nét */
@keyframes fadeEffect {
  0% {
    opacity: 0; /* Lúc bắt đầu: Ẩn hoàn toàn */
  }
  50% {
    opacity: 0.8; /* Ở giữa chu kỳ: Hiện rõ nét */
  }
  100% {
    opacity: 0; /* Kết thúc chu kỳ: Ẩn hoàn toàn để quay lại bước 0% */
  }
}

@media (height < 768px) {
  .content{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, 20%);
	vertical-align: bottom;
	text-align: center;
	padding: 20px 40px;
	font-size:15px;
	color:#5F0309;
	font-weight: bold;
	border-radius: 8px;
	z-index:3;
  }
  .avatar{
	top: 27%;
	left: 50%;
	transform: translate(-50%, 0%);
	position: absolute;
	width:100px;
	z-index:1;
  }
}

@media (min-height: 768px) {
  .content{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, 20%);
	vertical-align: bottom;
	text-align: center;
	padding: 20px 40px;
	font-size:20px;
	color:#5F0309;
	font-weight: bold;
	border-radius: 8px;
	z-index:3;
  }
  .avatar{
	top: 27%;
	left: 50%;
	transform: translate(-50%, 0%);
	position: absolute;
	width:150px;
	z-index:1;
  }
}

/* 3. Dành cho máy tính/laptop (Màn hình từ 1024px trở lên) */
@media (min-height: 1024px) {
  .content{
    position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, 20%);
	vertical-align: bottom;
	text-align: center;
	padding: 20px 40px;
	font-size:30px;
	color:#5F0309;
	font-weight: bold;
	border-radius: 8px;
	z-index:3;
  }
  .avatar{
    top: 27%;
	left: 50%;
	transform: translate(-50%, 0%);
  	position: absolute;
  	width:200px;
    z-index:1;
  }
}

#flowerCanvas {
	position: absolute;
	top: 0%;
	left: 0%;
	width:100%;
	height:100%;
	z-index:99;
}