body {
background-image: url(obrazky/bg.gif);
font-family:'Press Start 2p';
}

.press-start-2p-regular {
    font-family: "Press Start 2P", system-ui;
    font-weight: 400;
    font-style: normal;
  }


/* Reset */
body, ul {
    margin: 0;
    padding: 0;
    
 }

/* Skrytí checkboxu */
#menu-checkbox {
   display: none;
}

/* Stylování burger/křížek ikony */
.menu-icon {
   display: block;
   width: 35px;
   height: 35px;
   position: fixed;
   top: 15px;
   right: 15px;
   cursor: pointer;
   z-index: 100;
}

/* Čáry burger ikony */
.menu-icon span {
   display: block;
   position: absolute;
   height: 4px;
   width: 100%;
   background: #fff;
   border-radius: 5px;
   transition: all 0.4s ease;
}

/* Pozice čar */
.menu-icon span:nth-child(1) {
   top: 0;
}
.menu-icon span:nth-child(2) {
   top: 12px;
}
.menu-icon span:nth-child(3) {
   top: 24px;
}

/* Změna burger ikony na křížek */
#menu-checkbox:checked + .menu-icon span:nth-child(1) {
   transform: rotate(45deg);
   top: 12px;
}
#menu-checkbox:checked + .menu-icon span:nth-child(2) {
   opacity: 0;
}
#menu-checkbox:checked + .menu-icon span:nth-child(3) {
   transform: rotate(-45deg);
   top: 12px;
}

/* Kontejner pro menu */
#menu-container {
   position: fixed;
   top: 0;
   right: -400px;
   width: 200px;
   height: 100%;
   background: rgba(0, 0, 0, 0.9);
   padding: 50px 20px;
   transition: right 0.4s ease;
   z-index: 99;
   display: flex;
   flex-direction: column;
   justify-content: space-between; /* Oddělí menu a obrázek */
}

/* Otevření menu */
#menu-checkbox:checked ~ #menu-container {
   right: 0;
}

/* Stylování menu */
#menu {
   display: flex;
   flex-direction: column;
   gap: 40px;
}

/* Zvýšení mezery mezi položkami */
#menu li {
   list-style: none;
}

/* Stylování odkazů */
#menu li a {
   color: white;
   text-decoration: none;
   font-size: 20px;
   position: relative;
   display: inline-block;
   padding-bottom: 5px;
   transition: color 0.3s ease;
}

/* Podtržení při hoveru s plynulým efektem */
#menu li a::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   width: 0;
   height: 2px;
   background-color: white;
   transition: width 0.3s ease;
}

#menu li a:hover::after {
   width: 100%;
}

/* Styl pro obrázek panáčka */
.menu-image {
   text-align: center;
   padding-bottom: 200px;
}

.menu-image img {
   width: 200px; /* Nastav velikost podle potřeby */
   height: auto;
}
 
 .rozcestnik {
   font-family:'Press Start 2p';
    position: absolute;
    top: 13%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4vw; /* Velikost nadpisu relativní k šířce obrazovky */
    font-weight: bold;
    color: rgb(50, 148, 55);
    text-shadow: 8px 8px 10px rgb(0, 0, 0);
    text-align: center;
    white-space: nowrap; /* Zabrání zalomení textu */
 }
 
/* Pro menší displeje (mobilní telefony) */

@media (max-width: 768px) {
    .rozcestnik {
        font-size: 8vw; /* Větší text na menších zařízeních */
    }
}

/* Pro velmi malé telefony */

@media (max-width: 480px) {
    .rozcestnik {
        font-size: 10vw;
    }
} 

.cards-container {
   display: flex;
   flex-wrap: wrap; /* Umožní zalamování karet */
   justify-content: center;
   align-items: center;
   gap: 20px;
   padding: 15%;
   height: auto; /* Odstranění fixní výšky */
}

/* Karta */
.card {
   background: rgba(255, 255, 255, 0.3);
   padding: 20px;
   border-radius: 10px;
   text-align: center;
   width: 250px;
   max-width: 90%; /* Přizpůsobení menším obrazovkám */
   text-decoration: none;
   color: white;
   font-size: 1.2em;
   font-weight: bold;
   transition: 0.3s ease-in-out;
   border: 2px solid transparent;
   display: flex;
   flex-direction: column;
   align-items: center;
}

/* Obrázek v kartě */
.card img {
   width: 100%;
   height: 150px;
   object-fit: cover;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
}

/* Hover efekt */
.card:hover {
   background: rgba(255, 255, 255, 0.2);
   border: 2px solid #4CAF50;
   transform: scale(1.05);
}

/* Responzivní úpravy */
@media (max-width: 768px) {
   .cards-container {
      flex-direction: column; /* Na menších zařízeních karty ve sloupci */
   }
   
   .card {
      width: 80%; /* Zvětšení šířky na mobilu */
   }
}

@media (max-width: 480px) {
   .card {
      width: 100%; /* Plná šířka na mobilních telefonech */
   }
}
 footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    color: rgb(192, 192, 192);
    text-align: center;
    padding: 1px 0;
    font-size: 10px;
    text-shadow: 2px 2px 10px rgb(0, 0, 0);
}

.footer-content a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 16px;
    text-shadow: 2px 2px 10px rgb(0, 0, 0);
}

.footer-content a:hover {
    color: #00eeff;
}