/*TOUCH ME*/
/*Z-indexes can be whatever you want, just keep 1 and 2 for the background doll respectively*/
body{
    font-family: KaiTi;
    image-rendering:auto;
    
}
#base {
    background-image: url('dr3ssUp-img/base-1.png');
    z-index: 2;
}


#accessory-9 {
    background-image: url('dr3ssUp-img/accessory-9.png');
    z-index: 7;
}

#accessory-8 {
    background-image: url('dr3ssUp-img/accessory-8.png');
    z-index: 7;
}

#accessory-7 {
    background-image: url('dr3ssUp-img/accessory-7.png');
    z-index: 7;
}

#accessory-6 {
    background-image: url('dr3ssUp-img/accessory-6.png');
    z-index: 7;
}

#accessory-5 {
    background-image: url('dr3ssUp-img/accessory-5.png');
    z-index: 7;
}

#accessory-4 {
    background-image: url('dr3ssUp-img/accessory-4.png');
    z-index: 7;
}

#accessory-3 {
    background-image: url('dr3ssUp-img/accessory-3.png');
    z-index: 7;
}

#accessory-2 {
    background-image: url('dr3ssUp-img/accessory-2.png');
    z-index: 7;
}

#accessory-1 {
    background-image: url('dr3ssUp-img/accessory-1.png');
    z-index: 7;
}

/*DON'T TOUCH ME IF YOU'RE NOT CONFIDENT*/
/*style for basic layout and buttons*/


#main{
    background-color:#fff;
    margin-right: auto;
    margin-left: auto;
    width: 80vw;
    height: 80vh;
    border: 2px solid grey;
}

#background {
    float: center;
    width: 100%;
    min-width: 300px;
    height: 80vh;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 1;
}

#doll {
    z-index: 2;
    background-image: url('dr3ssUp-img/doll.png');
}

#controlpanel{
    margin-right: auto;
    margin-left: auto;
    width: 80vw;
    border: 2px solid grey;
    overflow: scroll;
}


.togglebutton{
    background-color: #ff9fc8;
    box-shadow: 0px 5px #ff59a0;
    border: 0px;
    border-radius: 3px;
    margin: 10px;
}


.checked{
    box-shadow: 0px 2px #ff59a0;
    translate: 0px 3px;
}

.nextbutton{
    background-color: #c8ff68;
    box-shadow: 0px 5px #a9ff13;
    border: 0px;
    border-radius: 3px;
    margin: 10px;
}

.lastbutton{
    background-color: #8ffbff;
    box-shadow: 0px 5px #34f8ff;
    border: 0px;
    border-radius: 3px;
    margin: 10px;
}

.removebutton{
    background-color: #ff9fc8;
    box-shadow: 0px 5px #ff59a0;
    border: 0px;
    border-radius: 3px;
    margin: 10px;
}

.nextbutton:active, .lastbutton:active, .removebutton:active{
    box-shadow: 0px 2px;
    translate: 0px 3px;
}

.dollLayer{
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
}

.hidden{
    display: none;
}