html, body {
    height: 100%;
    overflow: hidden;
}
.spark {
    background-color: #DE4A00;
    font-family: 'Helvetica', sans-serif;
    visibility: hidden;
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 30%;
    box-shadow: 0 0 5px #AB000B;
}


body
{
background-color:#000000;
font-family: "Amatic SC", sans-serif;
color:#eeeeee;
}

.room
{
display:none;
position:relative;
}

.popis
{
 font-family: "Amatic SC", sans-serif;
 color:#f0f0f0;
 font-size:3rem;
 width:80%;
 text-align:center;
 margin-left:auto;
 margin-right:auto;
 
}

.deadpopis
{
 font-family: "Amatic SC", sans-serif;
 color:#f02222;
 font-size:2.8rem;
 width:80%;
 text-align:center;
 margin-left:auto;
 margin-right:auto;
 
}

.picture
{
width:60%;
 text-align:center;
 margin-left:auto;
 margin-right:auto;
 
}


@media screen and (max-width: 1024px) {
  .picture {
width:90%;
  }
}


.prikazy
{
width:60%;
 text-align:center;
 margin-left:auto;
 margin-right:auto;
 font-size:2.2rem;
}

.cmd1, .cmd2
{
color: #ff8137;
font-size: 1.8rem;
font-weight: 800;
transition-timing-function: linear;
transition-duration: 0.4s;
display:inline;
}

.cmd1:hover, .cmd2:hover
{
color: #81ff37;
transition-timing-function: linear;
transition-duration: 0.4s;
text-decoration:underline;
}

.denik:hover, .klic:hover, .klice:hover, .lahvicka:hover, .binarybook:hover, .baterie:hover
{
transition-timing-function: linear;
transition-duration: 0.2s;
transform: scale(1.3);
}


.denik, .klic, .klice, .lahvicka, .binarybook, .baterie
{
transition-timing-function: linear;
transition-duration: 0.2s;
transform: scale(1.0);
}

.cepice
{
transform: rotate(20deg) scale(1.0);
transition-timing-function: linear;
transition-duration: 0.2s;
}

.cepice:hover
{
transform: rotate(20deg) scale(1.3);
transition-timing-function: linear;
transition-duration: 0.2s;
}


.obrazek
{
width:100%;
}


.items
{
display:none;
width:80%;
margin-left:auto;
margin-right:auto;
text-align:center;
bottom:10px;
}

.startovaci
{
width:640px;
height:300px;
z-index:100;
  margin: -150px 0 0 -320px;
position:absolute;
left:50%;
top:50%;
font-size:3rem;
text-align:center;
background-color:#000000;
border:2px solid #eeeeee;
display:none;
filter:grayscale(100%);
transition-timing-function: linear;
transition-duration: 0.1s;
}

.startovaci:hover
{
transition-timing-function: linear;
transition-duration: 0.1s;
filter:grayscale(0%);
}

.akce
{
text-align:center;
width:640px;
//height:300px;
z-index:100;
  margin: -150px 0 0 -320px;
position:absolute;
left:50%;
top:30%;
font-size:2.1rem;
background-color:#000000;
border:2px solid #eeeeee;
display:none;
padding:10px;
font-weight:700;
}

.oprojektu
{
color:#ffffff;
width:640px;
height:300px;
z-index:100;
margin: -150px 0 0 -320px;
position:absolute;
left:50%;
top:50%;
font-size:3rem;
text-align:center;
background-color:#000000;
border:2px solid #eeeeee;
transition-timing-function: linear;
transition-duration: 0.1s;
display:none;
}


.deadman
{
color:#ff2222;
width:640px;
height:300px;
z-index:100;
margin: -150px 0 0 -320px;
position:absolute;
left:50%;
top:30%;
font-size:3rem;
text-align:center;
background-color:#000000;
border:2px solid #eeeeee;
transition-timing-function: linear;
transition-duration: 0.1s;
display:none;
}

.title1
{
font-size:1.4em;
}


.projektlink
{
color: #666666;
margin-left:10px;
margin-right:auto;
font-size:1.3rem;
bottom: 10px;
position: fixed;
width:200px;
left:0%;
text-align:left;

}

.projektlink:hover
{
color: #81ff37;
}

h3
{
margin-top:0px;
margin-bottom:0px;
}


button
{
background-color:#000000;
font-family: "Amatic SC", sans-serif;
color:#444444;
border: none;
text-decoration: none;
font-size:1.5rem;
}

button:hover
{
color:#ff0000;
}

.popiska
{
width: 200px;
z-index:10;
position:absolute;
}

.popistext
{
background-color: #000000;
color: #37d3ff;
padding: 10px;
font-size: 1.4rem;
font-weight:800;
}

.popisroh
{
text-align:left;
width:32px;
}

.dot {
  height: 50px;
  width: 50px;
  border: 2px solid #222222;
  border-radius: 50%;
  display: inline-block;
  z-index:10;
}



.diary
{
width:70%;
 margin-left:auto;
 margin-right:auto;
 z-index:300;
 position:absolute;
}

.page
{
 z-index:301;
 position:absolute;
 top:0px;
}

.pageindex
{
 z-index:302;
 position:absolute;
 top:0px;
}

.pagenext
{
 z-index:302;
 position:absolute;
 opacity:0.5;
}

.pagenext:hover
{
 opacity:1;
}

.beforepage
{
 z-index:302;
 position:absolute;
 opacity:0.5;
}

.beforepage:hover
{
opacity:1.0;
}


.diarylink
{
z-index:200;
display:none;
color: #666666;
margin-left:10px;
margin-right:auto;
left: 10px;
position: fixed;
width:64px;
left:0%;
top:10px;
opacity:0.5;
transition-timing-function: linear;
transition-duration: 0.4s;

}

.diarylink:hover
{
opacity:1.0;
transition-timing-function: linear;
transition-duration: 0.4s;

}


.pagea, .pageb
{
position:absolute;
font-size: 1.6em;
color: #000000;
font-weight:800;
z-index:301;
}




.pagea h1, .pageb h1
{
color:#660000;
margin: 0 0 0 0;
font-size:1.8em;
}

.strankovani
{
position:absolute;
font-size: 1.4em;
z-index:301;
font-weight:800;
color: #000000;
text-align:center;
}


.binary
{
padding: 10px;
    background-color: #000000;
    font-size: 1.2rem;
    border: 2px dotted;
    font-family: Arial;
    text-align: center;
}


.main
{

overflow-y: scroll;
}

::-webkit-scrollbar {
  background: #000000;
}

::-webkit-scrollbar-thumb {
  background: #333333; 
}

::-webkit-scrollbar-thumb:hover {
  background: #aaaaaa; 
}


#scroll-container {
  width: 100%;
  height: 100%; /* Nastavte výšku dle potřeby */
  overflow: hidden;
  position: relative;
}

#scroll-content {
  position: absolute;
  bottom: 0;
  animation: scroll-up 40s linear infinite;
  font-size:0.75em;
}

@keyframes scroll-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(-100%);
  }
}