body
{
background-color: #006600;
background-image: URL('pozadi.png');
color: #eeeeee;
font-family: Georgia; 
}

.main
{
margin-top: 50px;
margin-left: auto; 
margin-right: auto;
width: 900px;
position: relative;
background-color: #336633;
}

h1
{
margin-top: 15px;
font-weight : normal;
font-size : 35pt;
text-align : center;
margin-bottom: 0px;
}

h2
{
font-weight : normal;
margin-left: 40px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 0px;
font-size : 11pt;
text-align : left;
}

h3
{
margin-top: 15px;
font-weight : normal;
font-size : 25pt;
text-align : center;
margin-bottom: 20px;
}

h5
{
font-family: Verdana; 
font-weight : normal;
font-size : 10pt;
text-align : center;
margin-top: 0px;
}

hr
{
color : white;
width : 95%;
/*noshade;*/
}


.vtextu
{
color : grey;
width : 55%;
/*noshade;*/
}

p
{
font-weight: normal;
margin-left: 35px;
margin-right: 35px;
margin-bottom: 30px;
margin-top: 0px;
text-align: justify;
}

.spatne
{
text-align : center;
}

.kondiciogram
{
font-family: Courier New;
font-size: 12pt;
font-weight: normal;
color: black;
text-align: left;
margin: 0px 0px 0px 30px;
}

form
{
margin-top: 20px;
margin-left: 30px;
color: #ffff99
}

a:link
{
color: #ccffcc;
text-decoration : underline;
}
a:visited
{
color: #ccffff;
text-decoration : none;
}

a:active
{
color: #99ff99;
text-decoration : none;
}

a:hover
{
color: #99ff99;
text-decoration : none;
}

img {
border : 0px solid #ff6;
}


        #herni-plocha {
            display: grid;
            grid-template-columns: repeat(30, 25px);
            grid-template-rows: repeat(10, 25px);
            gap: 2px;
            border: 3px solid #6b4d38;
            background-color: #a0826c;
            padding: 5px;
            width: fit-content;
            margin: 20px auto;
        }

                .pole {
            width: 25px;
            height: 25px;
            background-color: #6a994e;
            border: 1px solid #386641;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            font-weight: bold;
            font-family: Arial, sans-serif;
            cursor: pointer;
            user-select: none;
            transition: background-color 0.2s;
        }

        .pole:hover {
            background-color: #8abf69;
        }
        
        .pole.odkryte {
            background-color: #aadef0;
            border: 1px solid #74c6e5;
            cursor: default;
        }
        
        .pole.vlajka {
            background-color: #f7e06d;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">🚩</text></svg>');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            font-size: 0;
        }

        .pole.hroch {
            background-color: #e67e7e;
            font-size: 20px;
        }

        .c1 { color: #0000FF; }
        .c2 { color: #008000; }
        .c3 { color: #FF0000; }
        .c4 { color: #00008B; }
        .c5 { color: #8B0000; }
        .c6 { color: #48D1CC; }
        .c7 { color: #000000; }
        .c8 { color: #808080; }

        #herni-zprava {
            margin: 20px auto;
            max-width: 600px;
            padding: 15px;
            font-size: 1.2em;
            font-weight: bold;
            color: #2a652c;
            background-color: #dff0d8;
            border: 1px solid #c3e6cb;
            border-radius: 5px;
            text-align: center;
            visibility: hidden;
        }

        #herni-zprava.aktivni {
            visibility: visible;
        }