* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.layer.small .canvas {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}
.layer.small .background {
  width: 90vmin;
  height: 65vmin;
  background-color: #ac67a7;
  border-radius: 50%;
  transform: rotate(-40deg);
  opacity: 0.48;
  z-index: -4;
  position: relative;
  box-shadow: 0 8 24vmin rgb(0,0,0,0.1);
}


.layer.small .girl {
  display: flex;
  flex-direction: column;
  position: absolute;
  align-items: center;
}
.head {
  position: relative;
}


.layer.small .face {
  width: 28vmin;
  height: 25vmin;
  background: #fcead5;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 30%;
  position: relative;
}

.eyes,
.eyebrows,
.blushes {
  display: flex;
  width: 60%;
  justify-content: space-around;
  align-items: center;
}
.layer.small .eye {
  width: 5vmin;
  height: 5.5vmin;
  border-radius: 50% 50% 5% 25%;
  background-color: white;
  box-shadow: 0 -5px 5px #eed3d9;
}

.iris {
  width: 3vmin;
  height: 3vmin;
  background: #434040;
  border-radius: 50%;
  position: relative;
  top: 30%;
  left:25%;
}
.light {
  position: relative;
  width: 1vmin;
  height: 1vmin;
  background: white;
  border-radius: 50%;
  top: 10%;
  left: 10%;
}

.e2 {
  transform: scaleX(-1);
}
.l2 {
  left: 61%;
}

.eyebrow {
  width: 7vmin;
  height: 2vmin;
  border-radius: 50%/1vmin;
  border: solid 0.6vmin;
  border-color: #713d0e transparent transparent transparent;
}
.blush {
  width: 8vmin;
  height: 2vmin;
  border-radius: 50%;
  background: #fbc0c0;
  box-shadow: 0 0 0.62rem #fbc0c0;
  filter: blur(4px);
  opacity: 0.9
}
.nose {
  width: 2.4vmin;
  height: 2.4vmin;
  border-radius: 50%;
  border: solid 0.5vmin;
  border-color: #caa482 #caa482 #caa482 transparent;
  transform: rotate(-30deg);
  opacity: 0.8;
}
.mouth {
  width: 9vmin;
  height: 6.5vmin;
  border-radius: 50%;
  border: solid 0.5vmin;
  border-color: transparent transparent #caa482 transparent;
  opacity: 0.8;
  position: relative;
  top: -19%;
}

.layer.small .hair {
  position: absolute;
  top: 5vmin;
  left: -1.7vmin
}

.layer.small .hair-front {
  display: flex;
  position: relative;
  left:-1vmin;
  top: -7vmin;
}
.layer.small .front {
  width: 17vmin;
  height: 17vmin;
  background: #713d0e;
  border-radius: 130% 0 130% 0;
  transform: rotate(10deg);
}
.layer.small .f2 {
  transform: scaleX(-1) rotate(10deg);
}

.layer.small .hair-back {
  width: 31vmin;
  height: 25vmin;
  border-radius: 50%;
  background: #713d0e;
  position: relative;
  top: -23vmin;
  z-index: -1;
}

.ponytail {
  position: absolute;
  top: 19vmin;
  width: 6vmin;
}

.ponytail.left {
  left: 0vmin;
}

.ponytail.right {
  right: 0vmin;
  transform: scaleX(-1); /* mirror braid */
}

.ponytail span {
  display: block;
  width: 7vmin;
  height: 9vmin;
  background: #713d0e;
  border-radius: 50% 50% 40% 40%;
  margin-top: -1.5vmin;
}

.layer.small .neck {
  width: 6vmin;
  height: 8vmin;
  background: #fcead5;
  position: relative;
  top: -1vmin;
}

.layer.small .body {
   width: 28vmin;
  height: 27vmin;
  background: #c08f8f;
  border-radius: 50% 50% 0 0 ;
  position: absolute;
  top: 85%;
}

.table {
  width: 100vmin;
  height: 5vmin;
  background-color: #d9bfa6;
  position: relative;
  top: 1vmin;
}

.on-table {
  width: 100vmin;
  display: flex;
  justify-content: space-around;
  align-items: end;
  position: relative;
}

.layer.small .shirt-neck {
  width: 5.9vmin;
  height: 5vmin;
  background: #fcead5;
  border-radius: 50%;
  position: absolute;
  left: 39.5%;
  top: -9%;
  z-index: 3;
}


.layer.small .tee {
  position: absolute;
  right: 30%;
}
.layer.small .cup {
  width: 10vmin;
  height: 8vmin;
  background: #A9C1E0;
  position: relative;
  border-radius: 0 0 50% 50%;
}
.layer.small .cup::before {
  content: '';
  display: block;
  width: 7vmin;
  height: 3vmin;
  border:  #A9C1E0 solid 1vmin;
  position: absolute;
  top: 0.5vmin;
  left: 4vmin;
  border-radius: 50%;
  z-index: -1;
}

.heart{
  width: 3vmin;
  height: 3vmin;
  position: absolute;
  
}
.heart.h1{
top: 1vmin;
  left: 1.5vmin;
}
.heart.h2{
top: 2vmin;
  left: 7.5vmin;
}
.heart.h3{
top: 4vmin;
  left: 4vmin;
}
.heart::before{
  content: '';
  display: block;
  width: 1.5vmin;
  height: 2.5vmin;
  background: #FAD6D6;
  border-radius: 50% 50% 0 0;
  position: absolute;
  left: -0.8vmin;
  transform: rotate(-45deg);
}
.heart::after{
  content: '';
  display: block;
  width: 1.5vmin;
  height: 2.5vmin;
  background: #ffcdcd;
  border-radius: 50% 50% 0 0;
  position: absolute;
  left: 0vmin;
  transform: rotate(45deg);
}
.bear {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  left: 33%;
}

.bear-head {
  width: 10vmin;
  height: 8.2vmin;
  background: #AD5A1D;
  border : #8b4a1a solid 0.1vmin;
  border-radius: 50%;
  z-index: 7;
  position: relative;
  top: 3vmin;
}
.bear-eye{
  width: 1.5vmin;
  height: 1.5vmin;
  background: #000;
  border-radius: 50%;
  position: relative;
  top: 3vmin;
  left: 2vmin;
}
.bear-eye::before{
  content: '';
  display: block;
  width: 0.5vmin;
  height: 0.5vmin;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 0.3vmin;
  left: 0.4vmin;
}
.bear-eye.eye2{
  left: 6vmin;
  top: 1.3vmin;
}
.bear-nose{
  width: 3vmin;
  height: 3vmin;
  background: #E79748;
  border-radius: 50%;
  position: relative;
  top: 1.5vmin;
  left: 3.3vmin;
  border : #8b4a1a solid 0.1vmin;
}
.bear-nose::before{
  content: '';
  display: block;
  width: 1.5vmin;
  height: 1vmin;
  background: #4C302C;
  border-radius: 50%;
  position: absolute;
  top: 0.5vmin;
  left: 0.6vmin;
  z-index: 3;
box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
}

.bear-nose::after{
  content: '';
  display: block;
  height: 0.8vmin;
  border : #500F01 solid 0.1vmin;
  position: absolute;
  top: 1.3vmin;
  left: 1.3vmin;
}

.bear-mouth{
  width: 2vmin;
  height: 2vmin;
  border :solid 0.3vmin;
  border-color: transparent transparent #500F01 transparent;
  border-radius: 50%;
  position: relative;
  top: 0.3vmin;
  left: 0.4vmin;
}
.bear-body {
  width: 10vmin;
  height: 11.2vmin;
  background: #AD5A1D;
  border : #8b4a1a solid 0.1vmin;
  border-radius: 50%;
  z-index: 6;
}

.bear-ear {
  width: 4vmin;
  height: 4vmin;
  background: #AD5A1D;
  border : #8b4a1a solid 0.1vmin;
  border-radius: 50%;
  position: absolute;
  left: -1.5vmin;
  top: 2.5vmin;
}
.bear-ear.ear2 {
  left: 7.5vmin;
}
.bear-arms{
  width: 13vmin;
  height: 9vmin;
  background: #AD5A1D;
  border : #8b4a1a solid 0.1vmin;
  border-radius: 50%;
  position: absolute;
  top: 9vmin;
  left: -1.5vmin;
}
.bear-leg{
  width: 7vmin;
  height: 4vmin;
  background: #AD5A1D;
  border : #8b4a1a solid 0.1vmin;
  border-radius: 50%;
  position: absolute;
  top: 15vmin;
  left: -3vmin;
  transform: rotate(45deg);
}
.bear-leg::before{
  content: '';
  display: block;
  width: 3vmin;
  height: 1.5vmin;
  background: #E79748;
  border : #8b4a1a solid 0.1vmin;
  border-radius: 50%;
  position: relative;
  top: 1vmin;
  left: 2vmin;
}
.bear-leg.leg2{
  left: 5.5vmin;
  transform: rotate(-45deg);
}