@import '../css/index.css';

.clown {
  width: 37vw;
  height: 46vw;
  position: absolute;
  left: 36vw;
  top: 5vw;
  background: url(./images/clown.png) center no-repeat;
  background-size: cover;
}
.clown img {
  position: absolute;
  display: none;
}

.pigment {
  display: flex;
  justify-content: center;
  position: absolute;
  left: 50%;
  bottom: 5vw;
  transform: translateX(-50%);
}
.pigment img {
  width: 10vw;
  margin: 0 0.5vw;
  cursor: pointer;
}

/* 音频按钮 */
.audio-btn {
  width: 6vw;
  position: absolute;
  left: 10vw;
  top: 5vw;
  cursor: pointer;
}

/* 头发 */
#hair {
  width: 18vw;
  left: 15.4vw;
  top: 5.4vw;
}
/* 脸 */
#face {
  width: 10vw;
  left: 17.7vw;
  top: 9vw;
}
/* 眼睛 */
#eye {
  width: 3.8vw;
  left: 21.7vw;
  top: 10.8vw;
}
/* 嘴巴 */
#mouth {
  width: 8.9vw;
  left: 17.1vw;
  top: 14.4vw;
}
/* 鼻子 */
#nose {
  width: 3.8vw;
  left: 16.8vw;
  top: 13.4vw;
}
/* 衣服 */
#clothing {
  width: 27vw;
  left: 6.6vw;
  top: 11.6vw;
}
/* 裤子 */
#trousers {
  width: 24vw;
  left: 5.8vw;
  top: 24.8vw;
}

/* 提示框 */
#prompt {
  border: 2px solid red;
  position: absolute;
  animation: flicker 1s linear infinite;
}
@keyframes flicker {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}
.prompt-hair {
  width: 18vw;
  height: 7vw;
  left: 15vw;
  top: 4vw;
}
.prompt-face {
  width: 11vw;
  height: 11vw;
  left: 16vw;
  top: 9vw;
}
.prompt-eyes {
  width: 8vw;
  height: 4vw;
  left: 18vw;
  top: 10vw;
}
.prompt-mouth {
  width: 7vw;
  height: 5vw;
  left: 18vw;
  top: 15vw;
}
.prompt-nose {
  width: 5vw;
  height: 3vw;
  left: 16vw;
  top: 13vw;
}
.prompt-clothing {
  width: 19vw;
  height: 10vw;
  left: 15vw;
  top: 20vw;
}
.prompt-trousers {
  width: 23vw;
  height: 10vw;
  left: 7vw;
  top: 30vw;
}