*{
    box-sizing: border-box;
    user-select: none;
    user-zoom: none;
    margin: 0;
    font-family: 'minepixel';
}
body {
    background: url(./craftmine.jpeg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    transition: .2s;
    height: 100%;
    overflow: hidden;
}
@font-face {
    font-family: minepixel;
    src: url(./font/minecraft.ttf);
}

#nadpis {
    text-align: center;
    font-size: 60px;
    position: absolute;
    top: 270px;
    background: url(./pozadi.jpg);
    width: 500px;
    height: 300px;
    margin: 0 auto;
    left: 0px;
    right: 0px;
    border: 4px groove black;
    transition: .2s;
}
#textNadpis {
    position: relative;
    top: 35%;
    color: goldenrod;
    text-shadow: 0px 4px black;
}
#menu {
    top: 600px;
    width: 500px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}
#play {
    width: 150px;
    float: left;
    font-size: 20px;
    color: whitesmoke;
    cursor: pointer;
    text-shadow: 0px 3px black;
    background-color: gray;
    border: 2px solid black;
    padding-top: 10px;
    transition: .2s;
}
#play:hover{
    background-color:dimgray;
}
#settings {
    width: 170px;
    float: right;
    font-size: 20px;
    color: whitesmoke;
    cursor: pointer;
    text-shadow: 0px 3px black;
    background-color: gray;
    border: 2px solid black;
    padding-top: 10px;
    transition: .2s;
}
#settings:hover{
    background-color:dimgray;
}

#kulicka {
    width: 75px;
    height: 75px;
    background: url(./creeper.jpg);
    background-size: 70px;
    position: absolute;
    border: 2px solid black;
    left: 0px;
    top: 0px;
    display: none;
    transition: .2s;
    opacity: 1;
}

#pole {
    top: 100px;
    width: 1500px;
    height: 850px;
    margin: 0 auto;
    position: relative;
    border: 5px solid gray;
    display: none;
    left: 0px;
    transition: .2s;
    cursor: crosshair;
}

#casomira {
    color: whitesmoke;
    display: none;
    text-align: center;
   position: relative;
   top: -822px;
   font-size: 50px;
   text-shadow: 0px 3px black;
}
#info {
   text-align: center;
   position: relative;
   top: -822px;
   color: greenyellow;
   display: none;
   font-size: 30px;
   text-shadow: 0px 4px black;
}
#score {
    color: whitesmoke;
    text-shadow: 0px 2px black;
    font-size: 20px;
    text-align: center;
    display: none;
}
#barva {
    color: yellow;
    display: none;
    position: relative;
    font-size: 20px;
    text-align: center;
    text-shadow: 0px 2px black;
    top: -15px;
    
    
}
#chabr {
    width: 100%;
   position: relative;
   top: -822px;
   display: none;
}
#dedText {
    max-width: 600px;
   position: relative;
   text-align: center;
   display: none;
   color: whitesmoke;
    text-shadow: 0px 2px black;
    font-size: 20px;
    background-color: gray;
    border: 2px solid black;
    top: -550px;
    margin: 0 auto;
}
#dedText:hover {
    background-color:dimgray;
    cursor: pointer;
}
#dedTextDva {
    max-width: 600px;
   position: relative;
   text-align: center;
   display: none;
   color: whitesmoke;
    text-shadow: 0px 2px black;
    font-size: 20px;
    background-color: gray;
    border: 2px solid black;
    top: -680px;
    margin: 0 auto;
}
#dedTextDva:hover {
    background-color:dimgray;
    cursor: pointer;
}

#text {
    margin-top: 10px;
}

#point {
    position: absolute;
    display: none;
    top: 20px;
    left: 20px;
    color: whitesmoke;
    text-shadow: 0px 2px black;
    font-size: 20px;
}

#pauza {
    position: absolute;
    top: 0px;
    right: 0px;
    display: none;
    width: 50px;
    height: 50px;
    cursor: pointer;
    margin: 5px;
}
#hrat {
    position: absolute;
    top: 0px;
    right: 0px;
    display: none;
    width: 50px;
    height: 50px;
    cursor: pointer;
    margin: 5px;
}


#jedna {
    top: -870px;
    position: relative;
   text-align: center;
   color: whitesmoke;
    text-shadow: 0px 2px black;
    font-size: 20px;
    display: none;
}
#dva {
    top: -870px;
    position: relative;
   text-align: center;
   color: whitesmoke;
    text-shadow: 0px 2px black;
    font-size: 20px;
    display: none;
}
#tri {
    top: -870px;
    position: relative;
   text-align: center;
   color: whitesmoke;
    text-shadow: 0px 2px black;
    font-size: 20px;
    display: none;
}
#ctyri {
    top: -870px;
    position: relative;
   text-align: center;
   color: whitesmoke;
    text-shadow: 0px 2px black;
    font-size: 20px;
    display: none;
}
#pet {
    top: -870px;
    position: relative;
   text-align: center;
   color: whitesmoke;
    text-shadow: 0px 2px black;
    font-size: 20px;
    display: none;
}
#sest {
    top: -870px;
    position: relative;
   text-align: center;
   color: whitesmoke;
    text-shadow: 0px 2px black;
    font-size: 20px;
    display: none;
}
#sedm {
    top: -890px;
    position: relative;
   text-align: center;
   color: whitesmoke;
    text-shadow: 0px 2px black;
    font-size: 30px;
    display: none;
}
#osm {
    top: -870px;
    position: relative;
   text-align: center;
   color: whitesmoke;
    text-shadow: 0px 2px black;
    font-size: 20px;
    display: none;
}
#devet {
    top: -870px;
    position: relative;
   text-align: center;
   color: whitesmoke;
    text-shadow: 0px 2px black;
    font-size: 20px;
    display: none;
}
#deset {
    top: -870px;
    position: relative;
   text-align: center;
   color: whitesmoke;
    text-shadow: 0px 2px black;
    font-size: 20px;
    display: none;
}
#jedenact {
    top: -870px;
    position: relative;
   text-align: center;
   color: whitesmoke;
    text-shadow: 0px 2px black;
    font-size: 20px;
    display: none;
}
#dvanact {
    top: -870px;
    position: relative;
   text-align: center;
   color: whitesmoke;
    text-shadow: 0px 2px black;
    font-size: 20px;
    display: none;
}
#trinact {
    top: -870px;
    position: relative;
   text-align: center;
   color: whitesmoke;
    text-shadow: 0px 2px black;
    font-size: 20px;
    display: none;
}
#ctrnact {
    top: -870px;
    position: relative;
   text-align: center;
   color: whitesmoke;
    text-shadow: 0px 2px black;
    font-size: 20px;
    display: none;
}
#patnact {
    top: -870px;
    position: relative;
   text-align: center;
   color: whitesmoke;
    text-shadow: 0px 2px black;
    font-size: 20px;
    display: none;
}
#sestnact {
    top: -870px;
    position: relative;
   text-align: center;
   color: whitesmoke;
    text-shadow: 0px 2px black;
    font-size: 20px;
    display: none;
}
#sedmnact {
    top: -870px;
    position: relative;
   text-align: center;
   color: whitesmoke;
    text-shadow: 0px 2px black;
    font-size: 20px;
    display: none;
}
#osmnact {
    top: -870px;
    position: relative;
   text-align: center;
   color: whitesmoke;
    text-shadow: 0px 2px black;
    font-size: 20px;
    display: none;
}
#devatenact {
    top: -870px;
    position: relative;
   text-align: center;
   color: whitesmoke;
    text-shadow: 0px 2px black;
    font-size: 20px;
    display: none;
}
#dvacet {
    top: -870px;
    position: relative;
   text-align: center;
   color: whitesmoke;
    text-shadow: 0px 2px black;
    font-size: 20px;
    display: none;
}

#hlasitost {
    right: 0px;
    width: 400px;
   text-align: center;
   display: none;
   color: whitesmoke;
    text-shadow: 0px 2px black;
    font-size: 20px;
    background-color: gray;
    border: 2px solid black;
    padding-top: 10px;
    margin: 0 auto;
    position: relative;
    top: 200px;
}
#hlasitost:hover {
    background-color:dimgray;
    cursor: pointer;
    
}
#hlasitostDva {
    width: 400px;
   text-align: center;
   display: none;
   color: whitesmoke;
    text-shadow: 0px 2px black;
    font-size: 20px;
    background-color: gray;
    border: 2px solid black;
    padding-top: 10px;
    margin: 0 auto;
    position: relative;
    top: 210px;
}
#hlasitostDva:hover {
    background-color:dimgray;
    cursor: pointer;
}
#cislo {
    width: 400px;
    text-align: center;
    color: whitesmoke;
    font-size: 30px;
    display: none;
    text-shadow: 0px 2px black;
    margin: 0 auto;
    position: relative;
    top: 210px;
}
#done {
    width: 500px;
   text-align: center;
   display: none;
   color: whitesmoke;
    text-shadow: 0px 2px black;
    font-size: 20px;
    background-color: gray;
    border: 2px solid black;
    padding-top: 10px;
    margin: 0 auto;
    position: relative;
    top: 300px;
}
#done:hover {
    background-color:dimgray;
    cursor: pointer;
}


#cisloSpeed {
    width: 400px;
    position: absolute;
    text-align: center;
    color: whitesmoke;
    font-size: 30px;
    display: none;
    text-shadow: 0px 2px black;
    top: 250px;
    margin: 0 auto;
    position: relative;
}
#speed {
    width: 400px;
   position: absolute;
   text-align: center;
   display: none;
   color: whitesmoke;
    text-shadow: 0px 2px black;
    font-size: 20px;
    background-color: gray;
    border: 2px solid black;
    padding-top: 10px;
    top: 240px;
    margin: 0 auto;
    position: relative;

}
#speed:hover {
    background-color:dimgray;
    cursor: pointer;
}
#speedDown {
    width: 400px;
   position: absolute;
   text-align: center;
   display: none;
   color: whitesmoke;
    text-shadow: 0px 2px black;
    font-size: 20px;
    background-color: gray;
    border: 2px solid black;
    padding-top: 10px;
    top: 250px;
    margin: 0 auto;
    position: relative;
}
#speedDown:hover {
    background-color:dimgray;
    cursor: pointer;
}