:root {
  --page-gap: 20rem;
  --color-gray-1: #f8f8f8;
  --color-gray-2: #f5f5f5;
  --color-gray-3: #c3c3c3;
  --color-gray-4: #CACACA;
  --color-gray-5: #949494;
  --color-gray-6: #595959;
  --color-gray-9: #363636;
  --color-yellow-5: #fffc00;
  --color-primary-2: #f94470;
  --color-secondary: #2088FA;
}

* {
  box-sizing: border-box;
}

body {
  background-color: #f0f2f5;
}

a,
img {
  display: block;
}

button {
  border: unset;
  padding: 0;
  background: unset;
  cursor: pointer;
}

.page__container {
  position: relative;
  max-width: 750px;
  margin: 0 auto;
  padding: 0;
  font-family: 'Microsoft Yahei', 'PingFangSC-Regular', 'sans-serif';
}

.page__content {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.page__content header {
  flex-shrink: 0;
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 999;
}
.page__content main {
  flex-grow: 1;
  background-color: var(--color-gray-1);
}
.page__content footer {
  flex-shrink: 0;
  background-color: var(--color-gray-1);
}