/* css for text */

.container-text, .container-text-sub {
  position: relative;
  width: 100%;
  height: 100%;
  /* display: flex;
  justify-content: end;
  align-items: start; */
}

.bg {
  position: absolute;
  inset: 0;
  font-size: 1em;
  font-weight: bold;
  text-shadow:
  0 0 0.1em black,
  0 0 0.1em black,
  0 0 0.1em black,
  0 0 0.1em black,
  0 0 0.1em black,
  0 0 0.1em black,
  0 0 0.1em black,
  0 0 0.1em black,
  0 0 0.1em black,
  0 0 0.1em black,
  0 0 0.1em black,
  0 0 0.1em black,
  0 0 0.1em black,
  0 0 0.1em black;
  z-index: 1;
}
.bg1 {
  position: absolute;
  inset: 0;
  font-size: 1em;
  font-weight: bold;
  text-shadow:
      0.1em 0.1em 0.05em black,
      0.1em 0.1em 0.05em black,
      0.1em 0.1em 0.05em black,
      0.1em 0.1em 0.05em black,
      0.1em 0.1em 0.05em black,
      0.1em 0.1em 0.05em black,
      0.1em 0.1em 0.05em black,
      0.1em 0.1em 0.05em black,
      0.1em 0.1em 0.05em black,
      0.1em 0.1em 0.05em black,
      0.1em 0.1em 0.05em black,
      0.1em 0.1em 0.05em black,
      0.1em 0.1em 0.05em black,
      0.1em 0.1em 0.05em black;
  z-index: 1;
}

.text {
  background-color: transparent;
  position: absolute;
  inset: 0;
  font-family: "layiji_TarMineTine1";
  width: 100%;
  height: 100%;
  font-size: 6em;
  font-weight: 800;
  letter-spacing: 0em;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: 0;
}

.container-text-sub .text {
  background-color: transparent;
  position: absolute;
  font-family: "layiji_TarMineTine1";
  width: 100%;
  height: 100%;
  font-size: 3.5em;
  font-weight: 800;
  letter-spacing: 0em;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: 0;
}


.bg-gradient {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFEA7E 60.61%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: 1;
}

.container-text-sub .bg-gradient {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: #fff;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: 1;
}


/* css for character name */
.container-character1,
.container-character2,
.container-character3,
.container-character4 {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.select-character-1,
.select-character-2,
.select-character-3,
.select-character-4 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  font-family: "layiji_TarMineTine1";
  font-size: 3em;
  font-weight: 800;
  letter-spacing: 0em;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 0;
}

.character-bg {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  font-weight: bold;
  text-shadow: 0 0 0.1em black, 0 0 0.1em black, 0 0 0.1em black,
    0 0 0.1em black, 0 0 0.1em black, 0 0 0.1em black, 0 0 0.1em black,
    0 0 0.1em black, 0 0 0.1em black, 0 0 0.1em black, 0 0 0.1em black,
    0 0 0.1em black, 0 0 0.1em black, 0 0 0.1em black;
  z-index: 1;
}

.select-character-1.character-gradient,
.select-character-2.character-gradient,
.select-character-3.character-gradient,
.select-character-4.character-gradient {
  position: absolute;
  inset: 0;
  background: #ffffff;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  z-index: 1;
}


.container-info {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.select-info-1,
.select-info-2,
.select-info-3 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  font-family: "layiji_TarMineTine1";
  font-size: 3em;
  font-weight: 800;
  letter-spacing: 0em;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 0;
}

.info-bg {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  font-weight: bold;
  text-shadow: 0 0 0.1em black, 0 0 0.1em black, 0 0 0.1em black,
    0 0 0.1em black, 0 0 0.1em black, 0 0 0.1em black, 0 0 0.1em black,
    0 0 0.1em black, 0 0 0.1em black, 0 0 0.1em black, 0 0 0.1em black,
    0 0 0.1em black, 0 0 0.1em black, 0 0 0.1em black;
  z-index: 1;
}

.select-info-1.info-gradient,
.select-info-2.info-gradient,
.select-info-3.info-gradient {
  position: absolute;
  inset: 0;
  background: #ffffff;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  z-index: 1;
}