html{
    overflow: hidden;
    touch-action: manipulation;
}

body{
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
}


#front {
    position: absolute;
    top: 400px;
    left: calc(50% - 294px);
    z-index: 16;
}

#frame {
    position: absolute;
    top: 400px;
    left: calc(50% - 294px);
    z-index: 1;
}

#layer0 {
    position: absolute;
    top: 400px;
    left: calc(50% - 294px);
    z-index: 3;
}
#layer1 {
    position: absolute;
    top: 400px;
    left: calc(50% - 294px);
    z-index: 4;
}

#layer2 {
    position: absolute;
    top: 400px;
    left: calc(50% - 294px);
    z-index: 5;
}

#layer3 {
    position: absolute;
    top: 400px;
    left: calc(50% - 294px);
    z-index: 6;
}

#layer3 {
    position: absolute;
    top: 400px;
    left: calc(50% - 294px);
    z-index: 7;
}

#layer4 {
    position: absolute;
    top: 400px;
    left: calc(50% - 294px);
    z-index: 8;
}

#layer5 {
    position: absolute;
    top: 400px;
    left: calc(50% - 294px);
    z-index: 9;
}
#layer6 {
    position: absolute;
    top: 400px;
    left: calc(50% - 294px);
    z-index: 10;
}

#layer7 {
    position: absolute;
    top: 400px;
    left: calc(50% - 294px);
    z-index: 10;
}

.left {
    position: absolute;
    top: 400px;
    left: calc(50% - 288px);
    z-index: 2;
}

.right {
    position: absolute;
    top: 400px;
    left: calc(50% - 186px);
    z-index: 2;
}