body {
  background-color: rgb(73, 75, 184);
  background-image: linear-gradient(
    -10deg,
    #3d4e81 0%,
    #5753c9 58%,
    #6e7ff3 100%
  );
  background-repeat: no-repeat;
  background-attachment: fixed;
}
#box {
  background-color: rgb(150, 152, 247);
  border-radius: 20px;
  margin: auto;
  text-align: center;
  height: 800px;
  width: 600px;
}
#linksBox {
  text-align: center;
  margin: auto;
  opacity: 65%;
  border-radius: 30px;
}

#linksBox a {
  padding: 0px 5px;
}
#linksBox a img {
  border-radius: 7px;
  box-shadow: 0px 0px 2px 1px rgb(209, 196, 255);
}
#linksBox:hover {
  opacity: 100%;
}
#heading {
  font-size: 30px;
  text-align: center;
  color: snow;
  text-shadow: 0px 4px 5px rgb(24, 25, 88);
  font-family: "j'aime le poisson !", "Trebuchet ms";
}
#backdrop {
  top: 2em;
  margin: auto;
  position: relative;
  background-color: rgb(246, 240, 255);
  border-radius: 20px;
  height: 700px;
  width: 400px;
}
.buttonBox {
  position: relative;
  margin: 1rem;
}
button {
  margin-top: 2em;
  margin-right: 0.4em;
  color: black;
  background-color: rgb(243, 240, 255);
  box-shadow: 0px 1px 2px 1px rgb(73, 75, 184);
  border-radius: 10px;
  padding: 5px 12px;
  font-size: larger;
  transition: 0.1s linear;
}
button:hover {
  background-color: rgb(248, 252, 255);
  box-shadow: 0px 2px 4px 1px rgb(73, 75, 184);
}

#hairback {
  position: absolute;
  height: 700px;
  width: 400px;
}
#girl {
  background-image: url("./images4/1.png");
  background-repeat: no-repeat;
  background-repeat: no-repeat;
  position: absolute;
  height: 700px;
  width: 400px;
  z-index: 1;
}
#dress {
  background-repeat: no-repeat;
  position: absolute;
  height: 700px;
  width: 400px;
  z-index: 6;
}
#shoes {
  background-repeat: no-repeat;
  position: absolute;
  height: 700px;
  width: 400px;
  z-index: 2;
}

@keyframes waveHands {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(5deg); }
  100% { transform: rotate(0deg); }
}

#girl {
  animation: waveHands 2s infinite ease-in-out;
  transform-origin: top center;
}

#hair {
  background-repeat: no-repeat;
  position: absolute;
  height: 700px;
  width: 400px;
  z-index: 2;
}
#face {
  background-repeat: no-repeat;
  position: absolute;
  height: 700px;
  width: 400px;
  z-index: 6;
}
#hat {
  background-repeat: no-repeat;
  position: absolute;
  height: 700px;
  width: 400px;
  z-index: 6;
}

.dress0 {
  background-image: url("./images4/dress0.png");
  background-repeat: no-repeat;
  position: absolute;
  height: 700px;
  width: 400px;
  z-index: 4;
}
.dress1 {
  background-image: url("./images4/dress1.png");
  background-repeat: no-repeat;
  position: absolute;
  height: 700px;
  width: 400px;
  z-index: 4;
}

.dress2 {
  background-image: url("./images4/dress2.png");
  background-repeat: no-repeat;
  position: absolute;
  height: 700px;
  width: 400px;
  z-index: 4;
}
.dress3 {
  background-image: url("./images4/dress3.png");
  background-repeat: no-repeat;
  position: absolute;
  height: 700px;
  width: 400px;
  z-index: 4;
}
.dress4 {
  background-image: url("./images4/dress4.png");
  background-repeat: no-repeat;
  position: absolute;
  height: 700px;
  width: 400px;
  z-index: 4;
}
.dress5 {
  background-image: url("./images4/dress5.png");
  background-repeat: no-repeat;
  position: absolute;
  height: 700px;
  width: 400px;
  z-index: 4;
}
.dress6 {
  background-image: url("./images4/dress6.png");
  background-repeat: no-repeat;
  position: absolute;
  height: 700px;
  width: 400px;
  z-index: 4;
}
.dress7 {
  background-image: url("./images4/dress7.png");
  background-repeat: no-repeat;
  position: absolute;
  height: 700px;
  width: 400px;
  z-index: 4;
}

.shoes1 {
  background-image: url("./images4/shoes1 2.png");
  background-repeat: no-repeat;
  position: absolute;
  height: 700px;
  width: 400px;
}
.shoes2 {
  background-image: url("./images4/shoes2 2.png");
  background-repeat: no-repeat;
  position: absolute;
  height: 700px;
  width: 400px;
}
.shoes3 {
  background-image: url("./images4/shoes3.png");
  background-repeat: no-repeat;
  position: absolute;
  height: 700px;
  width: 400px;
}

.hat1 {
  background-image: url("./images4/accessory1.png");
  background-repeat: no-repeat;
  position: absolute;
  height: 700px;
  width: 400px;
}

.hat2 {
  background-image: url("./images4/accessory2.png");
  background-repeat: no-repeat;
  position: absolute;
  height: 700px;
  width: 400px;
}

.hat3 {
  background-image: url("./images4/accessory3.png");
  background-repeat: no-repeat;
  position: absolute;
  height: 700px;
  width: 400px;
}
.hat4 {
  background-image: url("./images4/accessory4.png");
  background-repeat: no-repeat;
  position: absolute;
  height: 700px;
  width: 400px;
}

.hair0 {
  background-image: url("./images4/hair0.png");
  background-repeat: no-repeat;
  position: absolute;
  height: 700px;
  width: 400px;
}
.hair1 {
  background-image: url("./images4/hair1.png");
  background-repeat: no-repeat;
  position: absolute;
  height: 700px;
  width: 400px;
}
.hair2 {
  background-image: url("./images4/hair2.png");
  background-repeat: no-repeat;
  position: absolute;
  height: 700px;
  width: 400px;
}
.hair3 {
  background-image: url("./images4/hair3.png");
  background-repeat: no-repeat;
  position: absolute;
  height: 700px;
  width: 400px;
}
.hair4 {
  background-image: url("./images4/hair4.png");
  background-repeat: no-repeat;
  position: absolute;
  height: 700px;
  width: 400px;
}
.hair5 {
  background-image: url("./images4/hair5.png");
  background-repeat: no-repeat;
  position: absolute;
  height: 700px;
  width: 400px;
}

.face1 {
  background-image: url("./images4/face1.png");
  background-repeat: no-repeat;
  position: absolute;
  height: 700px;
  width: 400px;
}
.face2 {
  background-image: url("./images4/face2.png");
  background-repeat: no-repeat;
  position: absolute;
  height: 700px;
  width: 400px;
}