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

html {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

span {
  font-family: PingFangSC, PingFang SC;
}

ul {
  list-style-type: square;
  list-style-position: outside;
}

ul li::marker{
  font-size: 0.12rem;
  color: #D8D8D8;
}

li {
  margin: 0.24rem 0 0.24rem 0.16rem;
}

body {
  background: linear-gradient(to bottom, #F7D3D2, #FDF7F5 30%);
}

@media screen and (min-width: 300px) {
  html {
    font-size: 25px;
  }
}

@media screen and (min-width: 400px) {
  html {
    font-size: 33.3px;
  }
}

@media screen and (min-width: 500px) {
  html {
    font-size: 41.6px;
  }
}

@media screen and (min-width: 600px) {
  html {
    font-size: 50px;
  }
}

@media screen and (min-width: 900px) {
  html {
    font-size: 75px;
  }
}

@media screen and (min-width: 1200px) {
  html {
    font-size: 100px;
  }
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.flex-wrap {
  flex-wrap: wrap;
}
.align-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content:space-between;
}

.flex-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}