*{
    box-sizing: border-box;
    margin:0;
}
div{
    user-select: none;
}
#mainStart{
    background-image: url(../img/main.png);
    background-repeat: no-repeat;
    background-size:cover ;
    background-position:center;
    height: 100vh;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
#start{
    position: absolute;
    height:100px;
    width:200px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#play{
    position: absolute; 
    font-size: 100px;
    font-family: 'Bangers', cursive;
    color:yellow;
    text-shadow: 6px 6px rgb(0, 0, 0);
    transition: 0.2s;
}
#help{
    height:400px;
    position: absolute;
    right:1%;
    bottom:3%;
    transition: .3s;;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}
#help:hover{
    right:3.5%;
    bottom: 9.5%;
    transform: scale(1.3);
}
#hello{
    position: absolute;
    bottom:4%;
    left:30%;
    transition: 500ms;
}
#warning{
    position: absolute;
    bottom:20%;
    left:1%;
    font-size: 60px;
    font-family: 'Bangers';
    color:rgb(236, 0, 0);
    text-shadow: 3px 3px rgb(0, 0, 0);
    word-spacing: 6px;
}
#info1{
    position: absolute;
    bottom:12%;
    left:1%;
    font-size: 60px;
    font-family: 'Bangers';
    color:rgb(255, 255, 255);
    text-shadow: 3px 3px rgb(0, 0, 0);
    word-spacing: 6px;
}
#info2{
    position: absolute;
    bottom:4%;
    left:1%;
    font-size: 60px;
    font-family: 'Bangers';
    color:rgb(255, 255, 255);
    text-shadow: 3px 3px rgb(0, 0, 0);
    word-spacing: 6px;
}
#mainEnd{
    background-image: url(../img/main.png);
    background-repeat: no-repeat;
    background-size:cover ;
    background-position:center;
    height: 100vh;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    display:none;
}
#start2{
    position: absolute;
    height:100px;
    width:500px;
    display: none;
    justify-content: center;
    align-items: center;
}
#play2{
    position: absolute;
    font-size: 100px;
    font-family: 'Bangers', cursive;
    color:yellow;
    margin-top:400px;
    text-shadow: 6px 6px rgb(0, 0, 0);
    display:none;
    animation-duration: 300ms;
    animation-play-state: paused;
    animation-name: none;
    transition: 0.2s;
}
#yourScore{
    position: absolute;
    top:5%;
    font-size: 120px;
    font-family: 'Bangers';
    color:yellow;
    text-shadow: 3px 3px rgb(0, 0, 0);
    word-spacing: 6px;
}
#newBest{
    position: absolute;
    top:20%;
    font-size: 60px;
    font-family: 'Bangers';
    color:rgb(14, 13, 13);
    text-shadow: 1px 1px rgb(0, 0, 0);
    letter-spacing: 2px;
    word-spacing: 5px;
    animation-duration: 5000ms;
    animation-play-state: running;
    animation-name: rainbow2;
    animation-iteration-count: infinite;
    display:none;
}
#joke{
    display:none;
    position: absolute;
    top:40%;
    font-size: 30px;
    font-family: 'Bangers';
    color:rgb(14, 13, 13);
    text-shadow: 1px 1px rgb(0, 0, 0);
    letter-spacing: 3px;
    word-spacing: 5px;
}
#play:hover{
    transform: scale(1.2);
}
#play2:hover{
    transform: scale(1.2);
}
#end{
    position: absolute;
    top:0%;
    left:0%;
    height: 0%;
}
#thief{
    display:none;
    height: 200px;
    margin-top: 6em;;
}
#whac{
    position: absolute;
    top:5%;
    font-size: 120px;
    font-family: 'Bangers';
    color:rgb(14, 13, 13);
    text-shadow: 3px 3px rgb(36, 36, 36);
    word-spacing: 6px;
}
#flak{
    position: absolute;
    top:20%;
    font-size: 60px;
    font-family: 'Bangers';
    color:rgb(14, 13, 13);
    text-shadow: 1px 1px rgb(0, 0, 0);
    letter-spacing: 2px;
    word-spacing: 5px;
}
#score{
    position: absolute;
    font-size: 130px;
    margin-top:1em;
    font-family: 'Bangers', cursive;
    animation-duration: 300ms;
    animation-play-state: paused;
    animation-name: none;
}

#double_points{
    position: absolute;
    font-size: 80px;
    margin-top:.3em;
    font-family: 'Bangers', cursive;
    animation-duration: 5000ms;
    animation-play-state: paused;
    animation-name: none;
    opacity: 0%;
    text-shadow: black 3px 3px;
}
#time{
    position: absolute;
    margin:.2em;
    margin-right: .4em;
    right:0%;
    top:0%;
    font-size: 120px;
    font-family: 'Bangers', cursive;
    color: rgb(4, 143, 4);
    text-shadow: black 3px 3px;
    letter-spacing: 3px;
    animation-duration: 5000ms;
    animation-play-state: paused;
    animation-name: none;
}
#best{
    position: absolute;
    margin:.2em;
    left:0%;
    top:0%;
    font-size: 60px;
    font-family: 'Bangers', cursive;
    color: rgb(255, 251, 6);
    text-shadow: black 3px 3px;
    letter-spacing: 3px;
}
#music1{
    position: absolute;
    top:0%;
    left:0%;
    height: 0%;
}
#music2{
    position: absolute;
    top:0%;
    left:0%;
    height: 0%;
}
#lobby{
    background-image: url(../img/background.png);
    background-repeat: no-repeat;
    background-size:cover ;
    background-position:center;
    height: 100vh;
    width: auto;
    display:none;
    cursor: url('../img/shovel.png'), auto;
}
#flex{
    display:flex;
    justify-content: center;
}
#krtecek1{
    position: absolute;
    top:80%;
    height: 50px;
    left:18%;
    visibility: hidden;
    z-index: 1;
    animation-duration: 1000ms;
    animation-play-state: paused;
    animation-name: none;
    
}
#big_krtecek1{
    position: absolute;
    top:80%;
    height: 50px;
    left:18%;
    visibility: hidden;
    z-index: 1;
    animation-duration: 1000ms;
    animation-play-state: paused;
    animation-name: none;
}
#krtecek1_freeze{
    position: absolute;
    top:80%;
    height: 50px;
    left:18%;
    visibility: hidden;
    z-index: 1;
    animation-duration: 1000ms;
    animation-play-state: paused;
    animation-name: none;
}
#krtecek1_double{
    position: absolute;
    top:80%;
    height: 50px;
    left:18%;
    visibility: hidden;
    z-index: 1;
    animation-duration: 1000ms;
    animation-play-state: paused;
    animation-name: none;
}
#krtecek1_thief{
    position: absolute;
    top:80%;
    height: 50px;
    left:18%;
    visibility: hidden;
    z-index: 1;
    animation-duration: 1000ms;
    animation-play-state: paused;
    animation-name: none;
}
@keyframes jump1 {
    0% {left:20%;height:50px;top:80%}
    50% {left:18%;height:150px;top:55%}
    100% {left:20%;height:50px;top:80%}
}
@keyframes jump2 {
    0% {left:48%;height:50px;top:80%}
    50% {left:46%;height:150px;top:55%}
    100% {left:48%;height:50px;top:80%}
}
@keyframes jump3 {
    0% {left:76%;height:50px;top:80%}
    50% {left:74%;height:150px;top:55%}
    100% {left:76%;height:50px;top:80%}
}
@keyframes jump4 {
    0% {left:20%;height:50px;top:64%}
    50% {left:18%;height:150px;top:39%}
    100% {left:20%;height:50px;top:64%}
}
@keyframes jump5 {
    0% {left:48%;height:50px;top:64%}
    50% {left:46%;height:150px;top:39%}
    100% {left:48%;height:50px;top:64%}
}
@keyframes jump6 {
    0% {left:76%;height:50px;top:64%}
    50% {left:74%;height:150px;top:39%}
    100% {left:76%;height:50px;top:64%}
}
@keyframes increase {
    0% {font-size: 130px;}
    50% {font-size: 140px;}
    100% {font-size: 130px;}
}
@keyframes freeze {
    0% {color: rgb(52, 133, 209);}
    90% {color: rgb(15, 173, 166);}
    100% {color: rgb(4, 143, 4);}
}
@keyframes opacity {
    0% {opacity: 0%;}
    50% {opacity: 50%;}
    100% {opacity: 100%;}
}
@keyframes rainbow {
    0% {color: rgb(255, 0, 0);opacity: 0%;}
    10% {color: rgb(255, 145, 0);opacity: 100%;}
    20% {color: rgb(217, 255, 0);opacity: 100%;}
    30% {color: rgb(0, 255, 106);opacity: 100%;}
    40% {color: rgb(0, 255, 255);opacity: 100%;}
    50% {color: rgb(0, 183, 255);opacity: 100%;}
    60% {color: rgb(1, 103, 255);opacity: 100%;}
    70% {color: rgb(119, 0, 255);opacity: 100%;}
    80% {color: rgb(255, 0, 179);opacity: 100%;}
    90% {color: rgb(255, 0, 157);opacity: 100%;}
    100% {color: rgb(255, 0, 0);opacity: 0%;}
}
@keyframes rainbow2 {
    0% {color: rgb(255, 0, 0);}
    10% {color: rgb(255, 145, 0);}
    20% {color: rgb(217, 255, 0);}
    30% {color: rgb(0, 255, 106);}
    40% {color: rgb(0, 255, 255);}
    50% {color: rgb(0, 183, 255);}
    60% {color: rgb(1, 103, 255);}
    70% {color: rgb(119, 0, 255);}
    80% {color: rgb(255, 0, 179);}
    90% {color: rgb(255, 0, 157);}
    100% {color: rgb(255, 0, 0);}
}
#krtina1{
    position: absolute;
    top:76%;
    left:10%;
    width:25%;
    z-index: 4;
    
}
#krtina2{
    position: absolute;
    top:76%;
    left:38%;
    width:25%;
    z-index: 4;  
}
#krtina3{
    position: absolute;
    top:76%;
    left:66%;
    width:25%;
    z-index: 4;
}
#krtina4{
    position: absolute;
    top:61%;
    left:12%;
    width:20%;
    z-index: 2;
}
#krtina5{
    position: absolute;
    top:61%;
    left:40%;
    width:20%;
    z-index: 2;
}  
#krtina6{
    position: absolute;
    top:61%;
    left:68%;
    width:20%;
    z-index: 2;  
}