@charset "UTF-8";
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

html {
  background: url("/src/image/background.jpg");
  background-size: cover;
  background-position: center;
}

.container {
  display: flex;
  max-width: 400px;
  height: 100%;
  margin: 0 auto;
  flex-wrap: wrap;
  text-align: center;
  align-content: center;
  -webkit-backdrop-filter: blur(4px) brightness(80%);
  backdrop-filter: blur(4px) brightness(80%);
}
.container #cover {
  margin-bottom: 1rem;
}
.container #cover h1,
.container #cover h2 {
  font-family: "kaisei-tokumin", "source-han-serif-tc", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.container #cover h1 {
  margin: 1rem 5px;
  font-size: 3rem;
  color: #523721;
}
.container #cover h1::before {
  content: "幻想森林";
  position: absolute;
  z-index: -1;
  -webkit-text-stroke: 10px white;
  text-stroke: 10px white;
}
.container #cover h2 {
  margin: 0.3rem 5px 1.2rem;
  color: #ffea8a;
}
.container #cover h2::before {
  content: "§ 發掘你的命定動物 §";
  position: absolute;
  z-index: -1;
  -webkit-text-stroke: 8px #523721;
  text-stroke: 8px #523721;
}
.container #cover p {
  margin: 10px 5px;
  color: white;
  text-shadow: black 0em 0em 0.3em;
}
.container #test {
  padding: 15px;
}
.container #test p {
  margin: 10px 5px 30px;
  color: white;
  text-shadow: black 0em 0em 0.3em;
}
.container #test form {
  display: flex;
  flex-wrap: wrap;
}
.container #test form input[type=radio] {
  display: none;
}
.container #test form input[type=radio]:checked + label {
  -webkit-filter: brightness(120%);
  filter: brightness(120%);
}
.container #test form label {
  width: 100%;
  cursor: pointer;
  position: relative;
  background: #523721;
  margin: 5px;
  padding: 15px 25px;
  color: white;
}
.container #test form label:hover {
  -webkit-filter: brightness(120%);
  filter: brightness(120%);
}
.container #test form label::after, .container #test form label::before {
  content: "✕";
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50px;
  background: #000;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  line-height: 12px;
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: #523721;
  font-weight: bold;
  text-align: center;
}
.container #test form label::after {
  right: 10px;
}
.container #test form label::before {
  left: 10px;
}
.container #wait,
.container #result,
.container #askName {
  padding: 15px;
}
.container #wait p,
.container #result p,
.container #askName p {
  margin: 10px 5px 30px;
  color: white;
  text-shadow: black 0em 0em 0.3em;
}
.container #wait h2,
.container #result h2,
.container #askName h2 {
  margin: 0.3rem 5px 1.2rem;
  color: #ffea8a;
  font-family: "kaisei-tokumin", "source-han-serif-tc", sans-serif;
  font-size: 1.8rem;
}
.container #wait input[type=text],
.container #result input[type=text],
.container #askName input[type=text] {
  background: #523721;
  color: #ffea8a;
  padding: 15px;
  border: none;
  border-radius: 10px;
  width: calc(100% - 30px);
  outline: none;
  text-align: center;
}
.container #wait .chartandfriedns,
.container #result .chartandfriedns,
.container #askName .chartandfriedns {
  display: inline-flex;
  width: 100%;
  max-height: 200px;
}
.container #wait .chartandfriedns #radarChart,
.container #result .chartandfriedns #radarChart,
.container #askName .chartandfriedns #radarChart {
  max-width: 50%;
  max-height: 200px;
}
.container #wait .chartandfriedns .friend,
.container #result .chartandfriedns .friend,
.container #askName .chartandfriedns .friend {
  width: 50%;
}

button {
  font-family: "kaisei-tokumin", "source-han-serif-tc", sans-serif;
  border: none;
  font-size: 1.2rem;
  line-height: 1.2rem;
  font-weight: bold;
  padding: 0.8rem 1.2rem;
  cursor: pointer;
  margin-top: 1.5rem;
  color: #523721;
  border: #523721 solid 2px;
  background-image: linear-gradient(30deg, #ffffd5 45.45%, #ffea8a 45.45%, #ffea8a 50%, #ffffd5 50%, #ffffd5 95.45%, #ffea8a 95.45%, #ffea8a 100%);
  background-size: 37.43px 27.19px;
}
button:hover {
  filter: brightness(80%);
}/*# sourceMappingURL=style.css.map */