#main{
    background: yellow ;
    background-repeat: no-repeat;
    width: 700px;
    height: 500px;
    margin: 10px auto;
    border: black 1px solid;
    box-shadow: black 3px 3px 3px;
}

#ovl{
    width: 700px;
    height: 70px;
    background: #ffff00 ;
    box-shadow: black 3px 3px 5px;
}
#game{
    width: 700px;
    height: 370px;
    background-image: url(images/bg.png);
}
.prvek{
    stroke:black;
    stroke-width:5px;
};
svg#obr{
    background: white;
};
.kola{
    transform-origin: 50% 50%;
}

.but{
    height: 30px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    margin: 19px;
    
}
.typ{
    width:50px;
    height: 50px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    margin: 7px;
    border-radius: 5px;
    margin-right:2px;
    border:1px solid;
    background-color:#e8ad06;
    box-shadow:1px 2px 2px;
}
#t0{background-image:  url(images/jaro.png);}
#t1{background-image:  url(images/leto.png);}
#t2{background-image:  url(images/podzim.png);}
#t3{background-image:  url(images/zima.png);}
#t4{background-image:  url(images/hudba.png);}
#t5{background-image:  url(images/chovani.png);}
#t6{background-image:  url(images/zver.png);}
#t7{background-image:  url(images/kytky.png);}
#t8{background-image:  url(images/doprava.png);}
#t9{background-image:  url(images/zeme.png);}
#t10{
    background-image:  url(images/zvuk_ano.png);
    background-color:white;
    width: 30px;
    height: 30px;
    float: right;
    margin-right: 10px;
}
#zvuk{
    background: white url(images/zvuk.png);
    width: 30px;
    cursor: pointer;
}

#t0,#t1,#t2,#t3,#t4,#t5,#t6,#t7,#t8,#t9,#t10,#t11,#zvuk{background-size: cover;}
#t0:hover,#t1:hover,#t2:hover,#t3:hover,#t4:hover,#t5:hover,#t6:hover,#t7:hover,#t8:hover,#t9:hover,#t10:hover,#t11:hover{    box-shadow: #02ff02 1px 1px 1px;}
.klikaci{pointer-events:auto;}
.neklikaci{pointer-events:none;}
#hod{
    width: 700px;
    height: 60px;
    display: flex;
    font-size: 21px;
    font-weight: bold;
}
#tl1,#tl2 {
    flex:1;
}
#intro{
        width: 700px;
    height: 380px;
    background: #e8ad06 url(images/intro.png);
    background-size: cover;
    position: relative;
    top: -580px;
    box-shadow: 3px 3px 3px;
    margin: 0 auto;
    
    
}

#nazev{
    width: 400px;
    height: 100px;
    margin: 0 auto;
    font-size: 40px;
    font-weight: bold;
    text-align:center;
    line-height:100px;
}
#obsah{
    width: 680px;
    height: 280px;
    padding:10px;
    font-size: 20px;
    font-weight: bold;
}
#otazka{
    height: 50px;
    flex: 8;
    margin:0 auto;
}
#tlacitka{
    height: 50px;
    //background:red;
}

#otazka_text{
    height: 50px;
    font-size: 21px;
    font-weight: bold;
    
    padding: 5px;
    text-align: center;
    line-height: 50px;
}

.pozadi_brown{
    background-color:#bd5500ff;
}

.pozadi_green{
    background-color:green;
}

#cube{
    width: 100px;
    height: 100px;
    background-size: cover;
    position: relative;
    top: -300px;
    left: 450px;
    box-shadow: 3px 3px 5px;
    border-radius: 10px;
    visibility:hidden;
    border: 1px solid;
}

#ano{
  float:left;
}
#ne{
  float:right;
}

#zprava{
    width: 500px;
    height: 120px;
    position: relative;
    top: -200px;
    font-size: 21px;
    font-weight: bold;
    text-align: center;
    margin: 0 auto;
    visibility:hidden;
}