body {
    overflow: hidden;
    margin: 0px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    background-color: #202124;
    overscroll-behavior-y: none;
    transform-origin: center top;
    height: 100vh;
}

.rope {
    position:absolute;
    transform-origin: top center;
    width: 4.5vh;
    height: 45vh;
    top:-32vh;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('img/crane.png');
    background-position: center bottom;
}

.hook {
    position:relative;
    width: 13vh;
    height: 13vh;
    top: 36vh;
    margin-left: -4.1vh;
    margin-top: 0.7vh;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('img/chain.png');
    background-position: center bottom;
    transition: opacity 300ms;
}

.fixpoint {
    position:relative;
    width: 1px;
    height: 1px;
    top: 36vh;
    left: 2.275vh;
}

.box {
    position: fixed;
    height: 13.6vh;
    width: 18.13vh;
    transform-origin: center top;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    transition: opacity 500ms;
}

.box1 {background-image: url('img/block1.png');}
.box2 {background-image: url('img/block2.png');}
.box3 {background-image: url('img/block3.png');}
.box4 {background-image: url('img/block4.png');}
.box5 {background-image: url('img/block5.png');}
.box6 {background-image: url('img/block6.png');}
.box7 {background-image: url('img/block7.png');}

.animate {
    transition: 2500ms ease-out;
}

#gamefield {
    width: 100vw;
    height: 100vh;
    background-color: #202124;
    margin: auto;
    position: relative;
    overflow: hidden;
}

#bg {
    width: 100vw;
    height: 500vw;
    top: calc(-500vw + 100vh);
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('img/bg.png');
    background-position: center bottom;
}

#towercount {
    width: 14vh;
    height: 5.6vh;
    top: 73vh;
    left: 5vh;
    border-radius: 5vh;
    background-color: #56beb7;
    position: absolute;
    color: white;
    display: flex;
    justify-content: center;
    font-size: 1.8vh;
    display: none;
}

#lostcount {
    width: 14vh;
    height: 5.6vh;
    top: 80vh;
    left: 5vh;
    border-radius: 5vh;
    background-color: #efa95d;
    position: absolute;
    color: white;
    display: flex;
    justify-content: center;
    font-size: 1.8vh;
    display: none;
}


#timer {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('img/timer.png');

    width: 30vh;
    height: 9vh;
    position: absolute;
    right: 2vw;
    top:0;
    z-index: 15;
}

#back {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('img/back.png');

    width: 8vh;
    height: 8vh;
    position: absolute;
    left: 2vw;
    top:0;
    z-index: 15;
}

.modal {
    position: absolute;
    width: 60vw;
    height: 40vw;
    top: calc(50vh - 20vw);
    left: 20vw;
    background-color: #202125;
    border-radius: 1vw;
    box-shadow: 0px 0px 5vw rgba(212, 191, 54, 0.5);
    color: white;
    transition: opacity 500ms;
}

.modal h1 {
    font-size: 4vw;
    margin-left: 5vw;
    margin-top: 5vw;
    margin-bottom: 5vw;
}

.modal>p {
    font-size: 1.5vw;
    margin-left: 5vw;
    margin-right: 5vw;
    margin-top: 2vw;
}

.btn>p {
    font-size: 1.5vw;
    pointer-events: none;
}

.btn {
    position: absolute;
    font-size: 1.5vw;
    background-color: #202125;
    border-style: solid;
    border-color: #4285f8;
    border-width: 0.2vw;
    border-radius: 1vw;
    height: 4.6vw;
    width: 15vw;
    display: flex;
    justify-content: center;
    align-content: center;
    cursor: pointer;
    color: white;
}

.cancel-btn {
    left: 5vw;
    bottom: 5vw;
    background-color: #202125;
}

.ok-btn {
        left: 23vw;
        bottom: 5vw;
        background-color: #4285f8;
}

.ok-btn:hover {
    background-color: #5d94f2;   
}
.cancel-btn:hover {
    background-color: #2f3036;   
}

#time-remained {
    position: absolute;
    color: white;
    font-size: 3.7vh;
    margin-left: 5.2vh;
    margin-top: 1.4vh;
}

#scores {
    position: absolute;
    color: #fde439;
    font-size: 3.7vh;
    margin-left: 22vh;
    margin-top: 1.4vh;
}


.coins {
    font-size: 4vw;
    font-weight: bold;
    color: #fde439;
    display: flex;
    margin-left: 5vw;
    padding-left: 3.5vw;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 2.5vw;
    background-image: url('img/coin.png');
}

#helper {
    position: fixed;
    display: flex;
    width: 100%;
    top: 50vh;
    font-size: 3.5vh;
    color: white;
    opacity: 0.5;
    justify-content: center;
    transition: opacity 500ms;

}

#helper p {
    text-align: center;
}