body {
  margin: 0;
}

.wrapper {
  display: flex;
  background: #3E0364;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  font-family: Helvetica, sans serif;
  color: #ffffff99;
}
.wrapper .title {
  position: absolute;
  top: 10px;
  left: 20px;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.wrapper .title div {
  background: #ffffff99;
  width: 20px;
  height: 2px;
  margin: 10px 0;
}
.wrapper .credit {
  position: absolute;
  bottom: 10px;
  right: 20px;
  font-weight: 300;
}

.artboard {
  position: relative;
  margin: auto;
  width: 80vmin;
  height: 80vmin;
}
.artboard div {
  box-sizing: border-box;
  position: absolute;
  background: #999;
}

#bed {
  width: 32vmin;
  height: 60vmin;
  left: 24vmin;
  top: 5vmin;
  background: #4E057E;
}

#bed-end {
  width: 32vmin;
  height: 20vmin;
  left: 24vmin;
  bottom: 5vmin;
  background: #4E057E;
}

#pillow {
  width: 20vmin;
  height: 10vmin;
  left: 30vmin;
  top: 15vmin;
  background: #601E8B;
}

#quilt {
  width: 40vmin;
  height: 40vmin;
  left: 20vmin;
  top: 30vmin;
  background: #601E8B;
}

#body {
  width: 12vmin;
  height: 10vmin;
  left: 34vmin;
  top: 28vmin;
  background: #FFE0BD;
}

#arm-right {
  width: 12vmin;
  height: 14vmin;
  left: 34vmin;
  top: 29vmin;
  border-radius: 0 0 6vmin 6vmin;
  background: none;
  border-left: 2vmin solid #FFE0BD;
  border-right: 2vmin solid #FFE0BD;
  border-bottom: 2vmin solid #FFE0BD;
}

#hand {
  width: 3vmin;
  height: 3vmin;
  left: 43.5vmin;
  top: 32vmin;
  border-radius: 100%;
  background: #FFE0BD;
}

#arm-left {
  width: 14vmin;
  height: 12vmin;
  left: 40vmin;
  top: 18vmin;
  border-radius: 0 6vmin 6vmin 0;
  background: none;
  border-top: 2vmin solid #FFE0BD;
  border-right: 2vmin solid #FFE0BD;
  border-bottom: 2vmin solid #FFE0BD;
}

#neck {
  width: 3vmin;
  height: 5vmin;
  left: 38.5vmin;
  top: 24vmin;
  background: #FFE0BD;
}

#head {
  width: 10vmin;
  height: 11vmin;
  left: 35vmin;
  top: 16vmin;
  border-radius: 5vmin;
  background: #FFE0BD;
}

#hair {
  width: 10vmin;
  height: 13vmin;
  left: 35.5vmin;
  top: 15.5vmin;
  background: none;
  transform: rotate(-7deg);
}
#hair div {
  background: grey;
}
#hair div:first-child {
  width: 10vmin;
  height: 3vmin;
  border-radius: 5vmin 5vmin 0 0 /3vmin 3vmin 0 0;
}
#hair div:nth-child(2) {
  width: 5vmin;
  height: 2vmin;
  left: 5vmin;
  top: 2.5vmin;
  border-radius: 0 0 5vmin 5vmin /0 0 5vmin 5vmin;
}
#hair div:nth-child(3) {
  width: 6vmin;
  height: 3vmin;
  left: 0;
  top: 2.5vmin;
  border-radius: 0 0 5vmin 5vmin /0 0 5vmin 5vmin;
}
#hair div:last-child {
  width: 2vmin;
  height: 2vmin;
  left: -.5vmin;
  top: .5vmin;
  border-radius: 2vmin;
  transform: scaley(1.3) rotate(30deg);
}

#braid {
  width: 4vmin;
  height: 12vmin;
  left: 34.1vmin;
  top: 19.3vmin;
  background: none;
}
#braid div {
  background: grey;
}
#braid div:first-child {
  width: 3vmin;
  height: 3vmin;
  border-radius: 100%;
  transform: scaley(2);
}
#braid div:nth-child(2) {
  width: 2vmin;
  height: 3vmin;
  left: .5vmin;
  top: 3vmin;
  border-radius: 100%;
  transform: scaley(2);
}
#braid div:last-child {
  width: 1.5vmin;
  height: 3vmin;
  left: .75vmin;
  top: 6vmin;
  border-radius: 100%;
  transform: scaley(2);
}

#eye-left {
  width: 1vmin;
  height: 1vmin;
  left: 40vmin;
  top: 22vmin;
  transform: scale(1.2, 2);
  background: #000;
  border-radius: 100%;
  animation: eye 2500ms ease-in-out 0s infinite normal;
}

#eye-right {
  width: 1vmin;
  height: 1vmin;
  left: 42.5vmin;
  top: 22vmin;
  transform: scale(1.2, 2);
  background: #000;
  border-radius: 100%;
  animation: eye 2500ms ease-in-out 0s infinite normal;
}

@keyframes eye {
  0%,86%,100% {
    transform: scale(1.2, 2);
  }
  93% {
    transform: scale(1.2, 0);
  }
}
#mouth {
  width: 2.5vmin;
  height: 1vmin;
  border-radius: 100%;
  left: 40.5vmin;
  top: 24.5vmin;
}

#phone {
  width: 5vmin;
  height: 8vmin;
  left: 42vmin;
  top: 26vmin;
  border-radius: .5vmin;
}