@font-face {
  /* font-properties */
  font-family: PingFang;
  src: url('../font/PingFang.ttf')
}


@font-face {
  /* font-properties */
  font-family: Britannic Bold;
  src: url('../font/britannic bold.ttf')
}

.pointer {
  cursor: pointer;
}


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

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

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

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

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

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

.flex-row-between-start {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}


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


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

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

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

.flex-column-between-center {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.flex-column-reverse-end-end {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end !important;
  align-items: flex-end !important;
  flex-wrap: wrap;
}