html {
    box-sizing: border-box;
    min-height: 100%; /*prenastavenie gradientu na celej stránku i pre Pravidla nebo použít min-height:100vh v body*/
}

  *,
  ::after,
  ::before {
    box-sizing: inherit;
  }

.nadpisPravidla,
.nadpisPiskvorky {
    font-family: 'Lobster', cursive;
    font-size: 50px; 
    font-weight: normal;
    background-color: #283e50;
    margin: 0;
    padding:30px 0;
}   


body { 
font-family: Arial, Helvetica, sans-serif;
background: linear-gradient(#615dad,#ffc8da);
background-size: cover;
background-repeat: no-repeat;
/* height: 100vh;  */
color: #ffffff;
font-size: 18px;
font-weight: normal;
text-align: center;
margin-top: 5%; 
}

.uvodni {
    font-size: 0px;
    border-radius: 6px 6px 0 0;
    width: 100%;
}

.kontejnerUvod {
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 350px;
    margin: 0 auto;
    /* position: relative;
    left: calc(50% - 350px / 2); */
}


.text {
    background-color: #283e50;
    margin: 0;
    padding:0 15px 40px 15px;
}


.tlacitka {
    display: flex;
    flex-direction: column;
}


.pravidla,
.stranka_uvod {
    height: 50px;
    background-color: #1fcca4;
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: solid 1px #283e50;
}

.pravidla:hover,
.stranka_uvod:hover {
    background-color: #1cbb96;
}

.hrat {
    height: 50px;
    background-color: #0197f6;
    padding-top: 15px;
    padding-bottom: 15px;
}

.hrat:hover {
    background-color: #0090e9;
}


a {
text-decoration: none;
color: #ffffff;
}

.kontejnerPravidla {
    background-color: #283e50;
    display: flex;
    flex-direction: column;
    border-radius: 6px 6px 0 0;
    overflow: hidden;
}

img {
    width: 100%;
}

.obrazky,
.seznam {
    margin:30px;
}

.kdoHrajeImg,
.cross,
.circle {
    width: 1em;
    height: 1em;
    filter: invert(100%);
    vertical-align: -0.1em;

}

li {
    padding: 0 0 15px 0;
  }


figure {
  margin: 0 0 40px 0;
  padding: 0;
}

figcaption {
    text-align: center;
}

@media (min-width: 650px) {
 .kontejnerPravidla {
    width: 640px;
    position: relative;
    left: calc(50% - 640px / 2);
}

.obrazky {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

 figure {
  width: calc(100% / 2.2);
}

h1 {
    text-align: center;
}

.seznam {
    text-align: left;
}

figcaption {
    font-size: 12px;
}
}

/* ..................... */
/* 3.úkol */

.nadpisHraciPlocha {
    font-family: 'Lobster', cursive;
    font-size: 60px; 
    font-weight: normal;
    margin-top: 0px;
}

.kontejnerHra {
    max-width: 80vmin;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

.menu {
    font-size: 18px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}


.ikony{
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    align-items: center;
    margin-bottom: 20px;
}


.ikony__home {
    width: 2.5rem;
    background-color: #1fcca4;
    padding: 5px;
    margin-right: 15px;
    border-radius: 3px;
}


.ikony__restart {
    width: 2.5rem;
    background-color: #0197f6;
    padding: 5px;
    border-radius: 3px;
}

.kdoHrajePopis {
 margin-bottom: 10px;
}


.mrizka {
    max-width: 80vmin;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    font-size: 0px;
    border-color: #2a3035;
    border-width: 1.5px;
}

button {
    width: calc(100% / 10);
    height: 8vmin;
    margin: 0;
    padding: 0;
    border-color: #2a3035;
    border-width: 1.5px;
    background-color: rgba(255, 255, 255, 0.3);
}

button:hover,
button:focus {
   background-color: rgba(255, 255, 255, 0.5);
}

.ikony__home:hover {
    background-color: #1cbb96;
}

.ikony__restart:hover {
    background-color: #0090e9;
}

/* ....................
4.úkol */

.board__field--circle {
    background-image: url('circle.svg');
    background-size: 65%;
    background-repeat: no-repeat;
    background-position: center;
    animation-name: gradual-growth;
    animation-duration: 0.15s;
    
}


.board__field--cross {
    background-image: url('cross.svg');
    background-size: 65%;
    background-repeat: no-repeat;
    background-position: center;
    animation-name: gradual-growth;
    animation-duration: 0.15s;
}

@keyframes gradual-growth {
    0% {
        background-size: 0%;
    }

    100% {
        background-size: 65%;
    }
}