.elementtitle {
  width: 80%;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
  margin-top: 1%;
  margin-bottom: 1%;
  text-align: center;
  font-size: 1.9em;
  color: #fff;
  /* 渐变背景 */
  background: linear-gradient(to right,#03a9f4,#f441a5,#ffeb3b,#09a8f4);
  /* 背景渐变色大小 */
  background-size: 200%;
  /* 圆角 */
  border-radius: 50px;
} 
@keyframes flow {
  100% {
    background-position: -400% 0;
  }
}
.elementtop1 {
  width: 77%;
  height: 50px;
  line-height: 50px;
  margin: 0 auto;
  margin-bottom: 1%;
  text-align: center;
  font-size: 1.21em;
  color: aliceblue;
  background: linear-gradient(to right,#03a9f4,#f441a5,#ffeb3b,#09a8f4);
  background-size: 400%;
  border-radius: 10px;
  animation: flow 8s infinite;
} 
.cardoutside2 {
  width: 75%;
  height: 50px;
  margin: 0 auto;
  margin-bottom: 1%;
  line-height: 50px;
  text-align: center;
  font-size: 1.2em;
  color: #fff;
  background-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%);
  border-radius: 8px;
  box-shadow: 0px 0px 10px 1px rgba(0, 255, 117, 0.30);
 }
 .cardoutside3 {
  width: 75%;
  height: 50px;
  margin: 0 auto;
  margin-bottom: 2%;
  line-height: 50px;
  text-align: center;
  font-size: 1.2em;
  color: #fff;
  background-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%);
  border-radius: 8px;
  box-shadow: 0px 0px 10px 1px rgba(0, 255, 117, 0.30);
 }
 .card0 {
  width: 75%;
  height: 50px;
  margin: 0 auto;
  margin-bottom: 2%;
  line-height: 50px;
  text-align: center;
  font-size: 1.2em;
  color: #f9f2e0;
  border-radius: 30px;
  background: #1660AB;
  transition: border-radius 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1),
             0 0  0 2px rgb(190, 190, 190),
             0.3em 0.3em 1em rgba(0,0,0,0.3);
 }
 .card1 {
  width: 75%;
  height: 50px;
  margin: 0 auto;
  margin-bottom: 2%;
  line-height: 50px;
  text-align: center;
  font-size: 1.2em;
  color: #e2e7bf;
  border-radius: 30px;
  background: #2b313f;
  transition: border-radius 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1),
             0 0  0 2px rgb(190, 190, 190),
             0.3em 0.3em 1em rgba(0,0,0,0.3);
 }
 .card2 {
  width: 75%;
  height: 50px;
  margin: 0 auto;
  margin-bottom: 2%;
  line-height: 50px;
  text-align: center;
  font-size: 1.2em;
  color: #f9ffd3;
  border-radius: 30px;
  background: #ee3f4d;
  transition: border-radius 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1),
             0 0  0 2px rgb(190, 190, 190),
             0.3em 0.3em 1em rgba(0,0,0,0.3);
 }
 .card3 {
  width: 75%;
  height: 50px;
  margin: 0 auto;
  margin-bottom: 2%;
  line-height: 50px;
  text-align: center;
  font-size: 1.2em;
  color: #c9f4ff;
  border-radius: 30px;
  background: #1781b5;
  transition: border-radius 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1),
             0 0  0 2px rgb(190, 190, 190),
             0.3em 0.3em 1em rgba(0,0,0,0.3);
 }
 .card4 {
  width: 75%;
  height: 50px;
  margin: 0 auto;
  margin-bottom: 2%;
  line-height: 50px;
  text-align: center;
  font-size: 1.2em;
  color: #e3e3e5;
  border-radius: 30px;
  background: #707899;
  transition: border-radius 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1),
             0 0  0 2px rgb(190, 190, 190),
             0.3em 0.3em 1em rgba(0,0,0,0.3);
 }
 .card5 {
  width: 75%;
  height: 50px;
  margin: 0 auto;
  margin-bottom: 2%;
  line-height: 50px;
  text-align: center;
  font-size: 1.2em;
  color: #F5F4F7;
  border-radius: 30px;
  background: #2c9678;
  transition: border-radius 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1),
             0 0  0 2px rgb(190, 190, 190),
             0.3em 0.3em 1em rgba(0,0,0,0.3);
 }
 .card6 {
  width: 75%;
  height: 50px;
  margin: 0 auto;
  margin-bottom: 2%;
  line-height: 50px;
  text-align: center;
  font-size: 1.2em;
  color: #c6e6e8;
  border-radius: 30px;
  background: #373834;
  transition: border-radius 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1),
             0 0  0 2px rgb(190, 190, 190),
             0.3em 0.3em 1em rgba(0,0,0,0.3);
 }
 .card7 {
  width: 75%;
  height: 50px;
  margin: 0 auto;
  margin-bottom: 2%;
  line-height: 50px;
  text-align: center;
  font-size: 1.2em;
  color: #FAFBE6;
  border-radius: 30px;
  background: #A48CE6;
  transition: border-radius 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1),
             0 0  0 2px rgb(190, 190, 190),
             0.3em 0.3em 1em rgba(0,0,0,0.3);
 }
 .card8 {
  width: 75%;
  height: 50px;
  margin: 0 auto;
  margin-bottom: 2%;
  line-height: 50px;
  text-align: center;
  font-size: 1.2em;
  color: #F7ECE7;
  border-radius: 30px;
  background: #A61B29;
  transition: border-radius 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1),
             0 0  0 2px rgb(190, 190, 190),
             0.3em 0.3em 1em rgba(0,0,0,0.3);
 }