/* CSS Docu5ent */
html, body {
    height: 90%;
    width: 100%;
    margin: 0 auto;
}

html {
    display: table;
    margin: auto;
}

body {
vertical-align: middle;
background: #111;
max-width: 1060px;
}

h1, h2 {
font-size: 24px;
color: #f9f4e1;
margin: 40px; 
}


h3 {
color: #fff0b3;
font-size: 20px;
font-weight: bold;
text-align: left;
}

a {
color: #00a66d;
font-weight: bold;
text-decoration-style: dotted;
}

ul.pos {
  list-style-image: url('img/pos.png');
}

ul.neg {
  list-style-image: url('img/neg.png');
}

p {
line-height: 200%;
}

#bodyblock {
position: relative;
padding: 10px;
background: #111;
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}

#lang {
margin-top: -10px;
text-align: left;
max-height: 20px;
width: 100%;
background: #111;
}

.cz {
content:url("img/cz.svg");
margin: 5px;
max-height: 20px;
}

.en {
content:url("img/en.svg");
margin: 5px;
max-height: 20px;
}

.de {
content:url("img/de.svg");
margin: 5px;
max-height: 20px;
}

.ita {
content:url("img/ita.svg");
margin: 5px;
max-height: 20px;
} 

.logo {
content:url("img/kryptomenybezpecne.svg");
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 100px;
margin-top: 50px;
max-width: 80%;
} 

.logo-en {
content:url("img/kryptomenybezpecne-en.svg");
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 100px;
margin-top: 50px;
max-width: 80%;
} 


#content {
font: 100% system-ui;
font-size: 18px;
text-align: center;

}

#contentcontainer {
border-radius: 15px;
font: 100% system-ui;
font-size: 18px;
text-align: center;
color: #ddd;
background-color: #292929;
max-width: 1060px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 30px;
padding-right: 30px;
margin: 20px 0;
background-image: url("img/back.svg"); /* The image used */
  background-position: right top; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: auto 128px; /* Resize the background image to cover the entire container */
}

#burzovnicontainer {
font: 100% system-ui;
line-height: 200%;
font-size: 18px;
text-align: left;
color: #ddd;
background-color: #292929; 
border-radius: 15px;
max-width: 1060px;
padding-top: 5px;
padding-bottom: 30px;
padding-left: 30px;
padding-right: 30px;
margin: 20px 0;
  background-image: url("img/back.svg"); /* The image used */
  background-position: right top; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: auto 128px;
}

#obal {
 display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: auto 0;
}
.image {
width: 30%;
float: right;
vertical-align: middle;
}
.thumb {
max-width: 100%;	
vertical-align: middle;
border: 1px;
border-color: grey;
border-radius: 15px;
margin-top: 30px;
transition: transform 0.1s;

}
.thumb:hover {
	transform: scale(2);
	
	}

.text{
width: 65%;
float: left;
}


.boxcontainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: auto 0;
}

.box {
  width: calc(30% - 20px);
  border-radius: 15px;
  color: #ddd;
  transition: transform 0.1s;
  background-color: #1c1c1c; 
  font: 100% system-ui;
  font-size: 18px;
  font-weight: bold;
  padding: 20px;
  text-align: center;
  background-image: url("img/back.svg"); /* The image used */
  background-position: right top; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: auto 64px;
  }
  
.box:hover {
         transform: scale(1.17);
      }
      
@media (max-width: 1080px) {
  .box {
    width: 100%;
    margin: 10px 0;
  }
.image {
width: 100%;

 }
  .text{
width: 100%;
}
}

.zlodej  {
content:url("img/burglar.svg");
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 20px;
max-height: 128px;
}

.stit  {
content:url("img/shield.svg");
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 20px;
max-height: 128px;
}

.graf  {
content:url("img/graph.svg");
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 20px;
max-height: 128px;
}

.handshake  {
content:url("img/handshake.svg");
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 20px;
max-height: 128px;
}

.sealedbox  {
content:url("img/sealedbox.svg");
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 20px;
max-height: 128px;
}

.read  {
content:url("img/read.svg");
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 20px;
max-height: 128px;
}


#footerstrip {
background-color: #1c1c1c;
border-radius: 15px;
max-width: 1060px;
padding: 20px;
margin-top: 15px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
text-align: center;
color: #ccc;
font: 100% system-ui;
font-size: 14px;
position: relative;
bottom: 0;
  background-image: url("img/back.svg"); /* The image used */
  background-position: right top; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: auto 128px;
}


@media (prefers-color-scheme: light) {

html, body {
    height: 90%;
    width: 100%;
    margin: 0 auto;
}

html {
    display: table;
    margin: auto;
}

body {
vertical-align: middle;
background: #fafafa;
max-width: 1060px;
}

h1, h2 {
font-size: 24px;
color: #333;
margin: 40px; 
}


h3 {
color: #fff0b3;
font-size: 20px;
font-weight: bold;
text-align: left;
}

a {
color: #00a66d;
font-weight: bold;
text-decoration-style: dotted;
}

ul.pos {
  list-style-image: url('img/pos.png');
}

ul.neg {
  list-style-image: url('img/neg.png');
}

p {
line-height: 200%;
}

#bodyblock {
 position: relative;
padding: 10px;
background: #fafafa;
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}

#lang {
margin-top: -10px;
text-align: left;
max-height: 20px;
width: 100%;
background: #fafafa;
}

.cz {
content:url("img/cz.svg");
margin: 5px;
max-height: 20px;
}

.en {
content:url("img/en.svg");
margin: 5px;
max-height: 20px;
}

.de {
content:url("img/de.svg");
margin: 5px;
max-height: 20px;
}

.ita {
content:url("img/ita.svg");
margin: 5px;
max-height: 20px;
} 

.logo {
content:url("img/kryptomenybezpecnedark.svg");
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 100px;
margin-top: 50px;
max-width: 80%;
} 
.logo-en {
content:url("img/kryptomenybezpecnedark-en.svg");
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 100px;
margin-top: 50px;
max-width: 80%;
} 

#content {
font: 100% system-ui;
font-size: 18px;
text-align: center;

}

#contentcontainer {
border-radius: 15px;
font: 100% system-ui;
font-size: 18px;
text-align: center;
color: #222;
background-color: #f0f0f0;
max-width: 1060px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 30px;
padding-right: 30px;
margin: 20px 0;
background-image: url("img/backlight.svg"); /* The image used */
  background-position: right top; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: auto 128px; /* Resize the background image to cover the entire container */
}

#burzovnicontainer {
font: 100% system-ui;
line-height: 200%;
font-size: 18px;
text-align: left;
color: #222;
background-color: #f0f0f0; 
border-radius: 15px;
max-width: 1060px;
padding-top: 5px;
padding-bottom: 30px;
padding-left: 30px;
padding-right: 30px;
margin: 20px 0;
background-image: url("img/backlight.svg"); /* The image used */
  background-position: right top; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: auto 128px; /* Resize the background image to cover the entire container */
}
#obal {
 display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: auto 0;
}
.image {
width: 30%;
float: right;
vertical-align: middle;
}
.thumb {
max-width: 100%;	
vertical-align: middle;
border: 1px;
border-color: grey;
border-radius: 15px;
margin-top: 30px;
transition: transform 0.1s;

}
.thumb:hover {
	transform: scale(2);

 }

.text{
width: 65%;
float: left;
}


.boxcontainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: auto 0;
}

.box {
  width: calc(30% - 20px);
  border-radius: 15px;
  color: #222;
  transition: transform 0.1s;
  background-color: #ddd; 
  font: 100% system-ui;
  font-size: 18px;
  font-weight: bold;
  padding: 20px;
  text-align: center;
background-image: url("img/backlight.svg"); /* The image used */
  background-position: right top; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: auto 64px; /* Resize the background image to cover the entire container */
  }
  
.box:hover {
         transform: scale(1.17);
      }
      
@media (max-width: 1080px) {
  .box {
    width: 100%;
    margin: 10px 0;
  }
.image {
width: 100%;
 }
 .text{
width: 100%;
}
}

.zlodej  {
content:url("img/burglar.svg");
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 20px;
max-height: 128px;
}

.stit  {
content:url("img/shield.svg");
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 20px;
max-height: 128px;
}

.graf  {
content:url("img/graph.svg");
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 20px;
max-height: 128px;
}

.handshake  {
content:url("img/handshake.svg");
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 20px;
max-height: 128px;
}

.sealedbox  {
content:url("img/sealedbox.svg");
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 20px;
max-height: 128px;
}

.read  {
content:url("img/read.svg");
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 20px;
max-height: 128px;
}


#footerstrip {
background-color: #ddd;
border-radius: 15px;
max-width: 1060px;
padding: 20px;
margin-top: 15px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
text-align: center;
color: #222;
font: 100% system-ui;
font-size: 14px;
position: relative;
bottom: 0;
background-image: url("img/backlight.svg"); /* The image used */
  background-position: right top; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: auto 128px; /* Resize the background image to cover the entire container */
}

}