/* stranka hry design */

body {
    margin: 0;
    background-color:rgb(203, 247, 122);
    padding: 0px 15%;
    

}

.hello {
margin: 0;
color:rgb(209, 212, 17);
font-size: 30px; 
padding: 10px;
    
}


#typewriter {
    font-family: monospace;
    text-align: center;
    overflow: hidden;
    border-right: .15em solid rgb(203, 247, 122);
    white-space: nowrap;
    margin: 0 auto; 
    letter-spacing: .15em;
    animation: 
      typing 4s steps(13, end) infinite,
      blink-caret .5s step-end;
  }
  
  @keyframes typing {
    from { width: 0 }
    to { width:50% }
  }
  @keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: rgb(203, 247, 122) }
  }











h1 {text-align: center;   /*videostop nadpis*/
font-style:italic ;
font-size: 80px;
margin: 0;
color: rgb(92, 6, 109);


 animation: pulz 3s infinite;
              
       @keyframes pulz {
        from {transform: scale(1);}
        to {transform: scale(20%);}



}
} 

/*pocty hodů a pocty pokusů*/

.pocty {
    text-align: left;
     padding: 0px 0px 0px 200px ;
    background-color:rgb(125, 245, 101);
}

.pocty h2 {

    display: inline-block;     /*je text vedle sebe*/
    
    font-size: 30px;
  font-style: bold;
}
.pPokusu {
    padding: 0px 200px 0px 0px;

}
.pocetbodu{
    color: rgb(230, 17, 17);
   
}
.pBodu {
    color: rgb(230, 17, 17);

}


/* info kolik bodu za co- shoda cisel obrazek a konec hry */


.parek {
  display: inline-block; 
  
}

.hodybody {
   
    text-align: left;
    background-color: rgb(123, 233, 123);
    float: left;
}

.hodybody h3 {     
  font-size: 20px;
    
    padding: 0px 80px; 

}


img {
  margin: 10px 0 0 490px;
  padding: 10px;
  box-sizing: 150%;
}

/*nahodna cisla - nadpis a vypis cisel*/

.nadpisNCisla {
   
    font-size: 30px;
    margin: 10px 0 0 400px;
   /* background-image: linear-gradient(yellow, green);*/
    padding: 0 ;
    width: 300px;
    text-align: center;
}
  #nacisla {
    animation: colors 30s infinite;
   }

   @keyframes colors {
    0% {background-color: red;}
    10% {background-color: MediumVioletRed;}
    20% {background-color: OrangeRed;}
    30% {background-color: yellow;}
    40% {background-color: LawnGreen;}
    50% {background-color: ForestGreen;}
    60% {background-color: Cyan;}
    70% {background-color: RoyalBlue;}
    80% {background-color: Gray;}
    90% {background-color: Indigo;}
    100% {background-color:red;}

   }

.nahodnacisla{
    margin: 0;
   
    text-align: center;
    font-size: 60px;
  }

.nahodnacisla li {
    padding: 20px 50px;    /*mezery mezi slovy */
    font-weight: bold;
    display: inline-block;
      }




/*tlacitka - STOP    HRAJ    NOVA HRA*/

button {

    padding: 40px 40px;
   border-radius: 20px;
    
font-weight: bold;
 font-size: 30px;
  margin: 0 60px 0 90px;
}

button:hover { background-color:rgb(238, 220, 61); }

.tlacitkaDole {
      display: inline;
      text-align: center;
      
}

 .stop{
   
    color: red;
    background-color:rgb(123, 233, 123) ;
 border-style: outset; 	
 border: solid red 4px;
}

.novahra {
    
    color: rgb(56, 6, 85);
    background-color:rgb(123, 233, 123) ;
    border-style: outset; 	
 border: solid red 4px;
}

.pokracuj {
    color:rgb(12, 66, 10);
    background-color: rgb(123, 233, 123) ; 
    border-style: outset; 	
 border: solid red 4px;
}

/* KONEC HRY */


.konecHry {
    color: rgb(12, 66, 10);
    font-weight: bold;
    font-size: 40px;
    text-align: center;
    margin: 0 0 0 400px ;
    padding: 0;
}

/* navod na hru */
p {
  text-align: center;
}

/*animace----------------
.animace {
    animation: colors 20s infinite;
   }

   @keyframes colors {
    0% {background-color: red;}
    25% {background-color: blue;}
    50% {background-color: yellow;}
    75% {background-color: green;}
    100% {background-color:white;}

   }*/