@import url('https://fonts.googleapis.com/css?family=Raleway:900&display=swap');

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #87CEEB;
  font-size: 62.5%;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@media screen and (max-width: 520px) {
}


@keyframes blink {
  50% {
    background-color: transparent;
  }
}

#text-container {
	/* Center the text in the viewport. */
	position: absolute;
  left: 0;  /* Aligns the container to the left edge */
  right: 0; /* Aligns the container to the right edge */
	margin: auto;
	width: 100vw;
	height: 80pt;
	top: 8;
	bottom: 0;
	
	/* This filter is a lot of the magic, try commenting it out to see how the morphing works! */
	
}

#text1, #text2 {
	position: absolute;
	width: 100%;
	display: inline-block;
	font-family: 'Raleway', sans-serif;
	font-size: 30pt;
  font-family: 'SimSun', '宋体', serif; /* 添加宋体作为首选字体 */
	text-align: center;
	user-select: none;
  color: #213FB9
}

.container {
  width: 50rem;
  height: 20rem;
  position: absolute; /* 使用绝对定位 */
  top: 50%;           /* 垂直中心 */
  left: 50%;          /* 水平中心 */
  transform: translate(-50%, -50%); /* 修正偏移，确保精确居中 */
}

.svg-container {
  z-index: 2;
  position: absolute;
}

.mo-container {
  width: 100%;
  height: 100%;
}

.line {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

.lttr {
  fill: #213FB9;
}

.sound {
  position: fixed;
  color: #763C8C;
  font-size: 1.6rem;
  bottom: 1rem;
  right: 1rem;
  text-decoration: underline;
  cursor: default;
}
.sound--off {
  text-decoration: line-through;
}

.flex-container {
  position: absolute; /* 使用绝对定位 */
  right: 80px; /* 右下角 */
  bottom: 130px; /* 右下角 */
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.unit {
  text-align: center;
}
.unit p {
  margin-top: 100px;
  font-family: 'Lato', sans-serif;
  font-weight: 100;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #fff;
}
.heart {
  position: relative;
  font-size: 0;
  width: 138px;
}
[class*="heart-piece-"] {
  position: absolute;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
}
.heart-piece-4 {
  -webkit-animation: piece-4 3.2s infinite;
          animation: piece-4 3.2s infinite;
}
.heart-piece-3,
.heart-piece-5 {
  -webkit-animation: piece-3 3.2s infinite;
          animation: piece-3 3.2s infinite;
}
.heart-piece-2,
.heart-piece-6 {
  -webkit-animation: piece-2 3.2s infinite;
          animation: piece-2 3.2s infinite;
}
.heart-piece-1,
.heart-piece-7 {
  -webkit-animation: piece-1 3.2s infinite;
          animation: piece-1 3.2s infinite;
}
.heart-piece-0,
.heart-piece-8 {
  -webkit-animation: piece-0 3.2s infinite;
          animation: piece-0 3.2s infinite;
}
.heart-piece-0 {
  left: 0px;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  background-color: #ec2d73;
}
.heart-piece-1 {
  left: 16px;
  -webkit-animation-delay: 0.15s;
          animation-delay: 0.15s;
  background-color: #eb5324;
}
.heart-piece-2 {
  left: 32px;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
  background-color: #fdc800;
}
.heart-piece-3 {
  left: 48px;
  -webkit-animation-delay: 0.45s;
          animation-delay: 0.45s;
  background-color: #47b264;
}
.heart-piece-4 {
  left: 64px;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
  background-color: #1470bd;
}
.heart-piece-5 {
  left: 80px;
  -webkit-animation-delay: 0.75s;
          animation-delay: 0.75s;
  background-color: #76469a;
}
.heart-piece-6 {
  left: 96px;
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
  background-color: #ec2d73;
}
.heart-piece-7 {
  left: 112px;
  -webkit-animation-delay: 1.05s;
          animation-delay: 1.05s;
  background-color: #eb5324;
}
.heart-piece-8 {
  left: 128px;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
  background-color: #fdc800;
}
@-webkit-keyframes piece-4 {
  0%, 10%, 90%, 100% {
    height: 10px;
    top: -5px;
  }
  45%, 55% {
    height: 94px;
    top: -23px;
  }
}
@keyframes piece-4 {
  0%, 10%, 90%, 100% {
    height: 10px;
    top: -5px;
  }
  45%, 55% {
    height: 94px;
    top: -23px;
  }
}
@-webkit-keyframes piece-3 {
  0%, 10%, 90%, 100% {
    height: 10px;
    top: -5px;
  }
  45%, 55% {
    height: 90px;
    top: -31px;
  }
}
@keyframes piece-3 {
  0%, 10%, 90%, 100% {
    height: 10px;
    top: -5px;
  }
  45%, 55% {
    height: 90px;
    top: -31px;
  }
}
@-webkit-keyframes piece-2 {
  0%, 10%, 90%, 100% {
    height: 10px;
    top: -5px;
  }
  45%, 55% {
    height: 80px;
    top: -37px;
  }
}
@keyframes piece-2 {
  0%, 10%, 90%, 100% {
    height: 10px;
    top: -5px;
  }
  45%, 55% {
    height: 80px;
    top: -37px;
  }
}
@-webkit-keyframes piece-1 {
  0%, 10%, 90%, 100% {
    height: 10px;
    top: -5px;
  }
  45%, 55% {
    height: 60px;
    top: -31px;
  }
}
@keyframes piece-1 {
  0%, 10%, 90%, 100% {
    height: 10px;
    top: -5px;
  }
  45%, 55% {
    height: 60px;
    top: -31px;
  }
}
@-webkit-keyframes piece-0 {
  0%, 10%, 90%, 100% {
    height: 10px;
    top: -5px;
  }
  45%, 55% {
    height: 30px;
    top: -15px;
  }
}
@keyframes piece-0 {
  0%, 10%, 90%, 100% {
    height: 10px;
    top: -5px;
  }
  45%, 55% {
    height: 30px;
    top: -15px;
  }
}