html {
    font-size: 16px;
    /* overflow: hidden; */
    margin: -8px;
    background-color: #eeeeee;
    
}

.wrap {
    text-align: center;
    margin: auto;
    width: 100%;
    max-width: 514px;
    /* height: 100%; */
}

.cashier {
    font-size: 1.3rem;
}

#cashier {
    font-size: 2rem;
}

.paymentOuter {
    margin: 1rem;
    border: 3px solid #000000;
    border-radius: 10px;
    background-color: #3353aa;
    height: 13rem;
}

#payment {
    position: relative;
    height: 13rem;
}

.overlap {
    position: absolute;
    top: 0.5rem;
    left: 2rem;
}

.overlap.coin50 {
    left: 50%;
    top: 5rem;
}

.overlap.coin100 {
    left: calc(50% - 3rem);
    top: 5rem;
}

.overlap.coin500 {
    left: 2rem;
}

.overlap.coin1000 {
    left: 3rem;
    top: 3rem;
}

.coinTray {
    position: relative;
    
}

#coinTray {
    margin: 1rem;
    border: 3px solid #000000;
    border-radius: 10px;
    height: 10rem;
    background-color: #3353ff;
    text-align: left;
}

#coinTray.boo {
    background-color: #ff5333;
}

.coinTray.coin1 {
    position: absolute;
    top: 6.8rem;
}
.coinTray.coin5 {
    position: absolute;
    top: 5.2rem;
}
.coinTray.coin10 {
    position: absolute;
    top: 3.6rem;
}
.coinTray.coin50 {
    position: absolute;
    top: 6.8rem;
}
.coinTray.coin100 {
    position: absolute;
    top: 5.2rem;
}

.coinTray.coin500 {
    position: absolute;
    top: 3.6rem;
}

.coinTray.coin1000 {
    position: absolute;
    top: 2rem;
}

.coinTray.coin5000 {
    position: absolute;
    top: 0.4rem;
}

#buttons.coin {
    margin-top: 1rem;
}

.button {
    font-size: 1.2rem;
    background-color: azure;
    border: 6px outset gray;
    width: 40%;
}

.button:active {
    color: #ffffff;
    background-color: gray;
    border: 6px outset azure;
}

#exchange {
    margin-right: 2rem;
}


.changes {
    margin-top: 2rem;
}

#money1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin-right: 3rem;
}
#money2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin-top: 1rem;
    margin-left: 3rem;
}

.bill {
    margin-top: 0.5rem;
    position: relative;
    height: 7.8rem;
}

.bill.coin1000 {
    position: absolute;
    right: 0.5rem;
    z-index: 2;
}
.bill.coin5000 {
    position: absolute;
    top: 0;
    left: 0.5rem;
    z-index: 1;
}

.coin1Size {
    z-index: 2;
    width: 2rem;
    height: 2rem;
    z-index: 3;
}
.coin5Size {
    width: 2.2rem;
    height: 2.2rem;
    z-index: 3;
}
.coin10Size {
    width: 2.35rem;
    height: 2.35rem;
    z-index: 3;
}
.coin50Size {
    width: 2.1rem;
    height: 2.1rem;
    z-index: 3;
}
.coin100Size {
    z-index: 2;
    width: 2.26rem;
    height: 2.26rem;
    z-index: 3;
}
.coin500Size {
    width: 2.65rem;
    height: 2.65rem;
    z-index: 3;
}
.coin1000Size {
    width: 15rem;
    height: 7.6rem;
    z-index: 2;
}
.coin5000Size {
    width: 15.6rem;
    height: 7.6rem;
    z-index: 2;
}
.coin10000Size {
    z-index: 1;
    width: 16rem;
    height: 7.6rem;
}