#container{
    position: absolute;
    margin: auto;
    width: 600px;
    height: 710px;
}

#background{
    transform: scale(0.5); 
    transform-origin: top left;
    position: absolute;
    margin: auto;
    width: 800px;
    height: 1420px;
    background-image: url("img/bg.jpg");
}

#hair, #lip, #base {
    position: absolute;
    width: 800px;
    height: 1420px;
}

/*face*/
#face{
    position: absolute;
    width: 800px;
    height: 1420px;
    background-image: url("img/face.png");
}

#gloss{
    display: none;
    position: absolute;
    width: 800px;
    height: 1420px;
    background-image: url(img/makeup/lips/gloss.png);
}
#liner{
    display: none;
    position: absolute;
    width: 800px;
    height: 1420px;
    background-image: url(img/makeup/lips/brown\ liner.png);
}
.lip1{
    position: absolute;
    width: 800px;
    height: 1420px;
    background-image: url(img/makeup/lips/blur\ persimmon.png);
}
.lip2{
    position: absolute;
    width: 800px;
    height: 1420px;
    background-image: url(img/makeup/lips/blur\ red.png);
}
.lip3{
    position: absolute;
    width: 800px;
    height: 1420px;
    background-image: url(img/makeup/lips/blur\ rose.png);
}
.lip4{
    position: absolute;
    width: 800px;
    height: 1420px;
    background-image: url(img/makeup/lips/black.png);
}
.lip5{
    position: absolute;
    width: 800px;
    height: 1420px;
    background-image: url(img/makeup/lips/brown.png);
}
.lip5{
    position: absolute;
    width: 800px;
    height: 1420px;
    background-image: url(img/makeup/lips/berry.png);
}
.lip6{
    position: absolute;
    width: 800px;
    height: 1420px;
    background-image: url(img/makeup/lips/red.png);
}
.lip7{
    position: absolute;
    width: 800px;
    height: 1420px;
    background-image: url(img/makeup/lips/pink\ sheer.png);
}



/*clothes*/
#top{
    position: absolute;
    width: 800px;
    height: 1420px;
}
#bra{
    position: absolute;
    width: 800px;
    height: 1420px;
}
#panties{
    position: absolute;
    width: 800px;
    height: 1420px;
}
#piercing{
    display: none;
    position: absolute;
    width: 800px;
    height: 1420px;
    background-image: url(img/belly\ piercing.png);
}
#bottom{
    position: absolute;
    width: 800px;
    height: 1420px;
}
#socks{
    position: absolute;
    width: 800px;
    height: 1420px;
}
#shoe{
    position: absolute;
    width: 800px;
    height: 1420px;
}


/* ── BUTTONS ── */
input[type="button"] {
  font-family: 'Share Tech Mono', monospace;
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ff85b3;
  background: #2a0018;
  border: 1px solid #ff2d7855;
  padding: .2rem .55rem;
  cursor: pointer;
  position: absolute;
}
input[type="button"]:hover {
  border-color: #ff2d78;
  color: #ff2d78;
}
input[type="button"]:active {
  background: #ff2d78;
  color: #1a0010;
  border-color: #ff2d78;
}

/* ── BUTTON POSITIONS ── */
#nextHair     { right: 210px; top: 10px; }
#nextBase     { right: 210px; top: 40px; }
#nextLip      { right: 210px; top: 70px; }
#nextLipTop   { right: 210px; top: 90px; }
#nextTop      { right: 210px; top: 130px; }
#nextBra      { right: 210px; top: 150px; }
#nextPiercing { right: 210px; top: 230px; }
#nextPanties  { right: 210px; top: 260px; }
#nextBottom   { right: 210px; top: 290px; }
#nextSocks    { right: 210px; bottom: 55px; }
#nextShoe     { right: 210px; bottom: 25px; }