html {
    min-height: 100%;
    display: flex;
    justify-content: center;
}

body {
    background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5)),
        url(https://itziks.com/coins_puzzle/imgs/background.jpg);
    background-size: cover;
    min-height: 100%;
    background-position: center;
    margin: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    font-family: 'Rubik', sans-serif;
    text-align: center;
    color: #A47216;
}

h1 {
    font-family: 'Rubik Microbe', cursive;
    color: #C8A047;
    margin: 10px;
}

p {
    margin: 10px;
}

#stage {
    position: absolute;
    right: 5px;
}

.bigScales {
    background: url(https://itziks.com/coins_puzzle/imgs/bigscalce.png) center no-repeat;
    background-size: 500px;
    height: 400px;
    display: flex;
}

.scales {
    background: url(https://itziks.com/coins_puzzle/imgs/scalce.png) center no-repeat;
    width: 200px;
    height: 180px;
    padding: 2px;
    margin-top: 90px;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap-reverse;
    transition: margin-top 2s cubic-bezier(0, 1, .4, 1.2);
}

.top {
    margin-top: 30px;
}

.bottom {
    margin-top: 150px;
}

.boxBack {
    border-radius: 8px;
    background-color: #b7e9ffb3;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.coins {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    min-height: 50px;
    width: 600px;
    margin: 5px;
}

.coin {
    width: 50px;
    cursor: grab;
}

.Control {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 3fr 1fr;
    align-items: center;
    justify-items: center;
    height: 160px;
    width: 600px;
    padding: 10px;
    margin: 10px;
}

.Control>button:nth-child(1) {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    height: 55px;
    width: 120px;
    font-size: 22px;
}

.Control>p:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    font-size: 18px;
}

.Control>div:nth-child(3) {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}

.Control>p:nth-child(4) {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
    font-size: 18px;
}


#test {
    margin-top: 8px;
    width: 75%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
    border-radius: 8px;
}

.testBackground1 {
    background: url(https://itziks.com/coins_puzzle/imgs/test1.png) center no-repeat;
}

.testBackground2 {
    background: url(https://itziks.com/coins_puzzle/imgs/test2.gif) center no-repeat;
}

.spiner {
    animation: rotation 3s infinite linear;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

.draggable.dragging {
    opacity: .5;
}

#equal {
    visibility: hidden;
    height: 30px;
    margin-top: 208px;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    width: 50%;
    margin: auto;
    display: flex;
    justify-content: center;
}

/* button */
.button {
    align-items: center;
    appearance: none;
    background-image: radial-gradient(100% 100% at 100% 0, #F9EFB0 0, #EDD17A 100%);
    border: 0;
    border-radius: 6px;
    box-shadow: rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, rgba(58, 65, 111, .5) 0 -3px 0 inset;
    box-sizing: border-box;
    color: #A47216;
    cursor: pointer;
    display: inline-flex;
    font-family: "JetBrains Mono", monospace;
    justify-content: center;
    line-height: 1;
    list-style: none;
    overflow: hidden;
    position: relative;
    transition: box-shadow .15s, transform .15s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
    will-change: box-shadow, transform;
}

.button:hover {
    box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #D1AC53 0 -3px 0 inset;
    transform: translateY(-2px);
}

.button:active {
    box-shadow: #D1AC53 0 3px 7px inset;
    transform: translateY(2px);
}

#winBox {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    width: 100%;
    height: 100%;
    padding: 10px;
}

#winBox>img {
    width: 90px;
    margin: 15px;
}

#winStep {
    font-size: 25px;
    margin: auto;
}

.media {
    display: none;
}

@media only screen and (max-width:850px) {
    body {
        background: rgba(255, 0, 0, 0.562);
    }

    .noMedia {
        display: none;
    }

    .media {
        display: block;
        width: 100%;
    }
}