/* definition */
@font-face {
  font-family: "Yu Mincho";
  src: url("yu-mincho-regular.ttf");
  font-weight: normal;
  font-style: normal;
  letter-spacing: -15em;
}

body {
  font-family: "Yu Mincho" !important;
  width: 100%;
  height: 100%;
  margin: 0px;
  letter-spacing: -0.05em !important;
}

.rotate {
  animation: spinner 2.5s linear infinite;
}
@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

img {
  position: absolute;
  top: 0;
  left: 0;
  scale: 75%;
  transform: translate(-25%, -25%);
}

.leoText {
  transform: skew(20deg);
}

.leoImage {
  height: 100%;
  width: 100%;
  background-image: url("leo.png");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.leo {
  top: -108px;
  left: -60px;
  border-radius: 100%;
  overflow: hidden;
  height: 300px;
  width: 300px;
  position: absolute;
  text-shadow: 3px 3px 0 #00000047;
  letter-spacing: -0.05em !important;
  font-size: 120px;
  font-weight: 600;
  color: white;
  z-index: 0;
  /* transform: translate(-75%, -75%); */
}

.gear {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  z-index: 10;
}

.title {
  letter-spacing: -0.05em !important;
  height: 140px;
  display: flex;
  justify-content: center;
  font-size: 78px;
  font-weight: 600;
  color: white;
  align-items: center;
  position: sticky;
  top: 0px;
  background: linear-gradient(180deg, #a0a0a0 -395.57%, #3a3a3a 100%);
  border-bottom: 9px solid #348171;
}

.container {
  font-family: "Yu Mincho";
  display: flex;
  align-items: center;
  flex-direction: column;
  background: linear-gradient(180deg, #21517d 0%, #2674b4 100%);
  height: 100%;
  padding-top: 40px;
  padding-bottom: 40px;
  gap: 40px;
}

.quiz {
  /* align-items: center; */
  display: flex;
  flex-direction: column;
}

.quizrow,
.resultText {
  font-family: "Yu Mincho";
  display: flex;
  gap: 16px;
  /* align-items: center; */
  width: fit-content;
  font-size: 22px;
  font-weight: 600px;
  color: white;
}

.submitButton {
  letter-spacing: -0.1em !important;
  font-family: "Yu Mincho";
  background: radial-gradient(
    70.31% 70.31% at 50% 50%,
    #1efae7 0%,
    #129489 100%
  );
  border: 4px solid #adf1fd;
  color: white;
  font-size: 32px;
  font-weight: 600;
  width: 364px;
  height: 82px;
  border-radius: 100px;
  cursor: pointer;
}

.resultRow {
  position: relative;
  letter-spacing: -0.1em !important;
  font-family: "Yu Mincho";
  background: linear-gradient(0deg, #414141 -37.93%, #484141 181.03%);
  height: 60px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: 600;
  font-size: 24px;
  border-top: 5px solid #fbea8f;
  border-bottom: 5px solid #fbea8f;
}

.resultIcon {
  position: absolute;
  max-height: 375px;
  top: -210px;
  left: 70%;
  z-index: 20;
}