@import url('https://fonts.googleapis.com/css?family=Cookie');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=ZCOOL+XiaoWei&display=swap');

@font-face {
  font-family: 'LXGWWenKai-Light'; /* 自定义字体名称 */
  src: url('./fonts/LXGWWenKai-Light') format('truetype'); /* 字体文件路径 */
  font-weight: normal; /* 可选：字体粗细 */
  font-style: normal; /* 可选：字体样式 */
}


body::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  background: url('./Image/desk_learn.jpg') no-repeat center center fixed;
  background-size: cover;
  z-index: -1;
  opacity: 0.85;
}



body {
  /* background-color: #FFF;
  background-color: #F24236;
  background-color: #FFF; */
  width: 100%;
  font-family: 'Cookie', cursive;
  overflow: hidden;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#days {
  font-size: 46px;
  color: #FFF;
  color:#F24236;
  color:coral;
  color: #dd935f;
  font-family: 'Cookie', cursive;
  text-align: center;
  letter-spacing: 3px;
  white-space: pre-line;
}

#emoji {
  font-size: 46px;
  text-align: center;
  position: inherit;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 300px;
  width: 300px; 
  color: #dd935f;
}

.drop {
	position: absolute;
	top: 0;	
	z-index: -1;
  opacity: 0;
}

.snow {
	height: 8px;  
  width: 8px;
	border-radius: 100%;
  border-width: 10;
  background-color: #FF7F50;
  background-color: #F24236;
  background-color: #FFF; 
  box-shadow: 0 0 10px #F24236;
  box-shadow: 0 0 10px #FFF;
}

.emoji {
  font-size: 36px;
}

.animate {
	animation: falling 11.5s infinite ease-in;	
}


@keyframes falling {
	0% {top: 0; opacity: 1;}
	100% {top: 1500px; opacity: 0}
}

body .video {
  text-align: center;
}

       /* Position the button on the right side of the page */
    button {
        margin-right: 20px;
        padding: 10px 20px;
        font-size: 64px;
        border: none;
        border-radius: 5px;
        background-color: inherit; /* Use body background */
        cursor: pointer;
        transition: all 0.3s ease;
    }

    button:hover {
      content: "🎁";
  }
  button:hover::after {
      content: "🎁";
  }