.top-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  backdrop-filter: blur(5px);
  background-color: rgba(22, 29, 29, 0.4);
  border-bottom: 1px solid #e2b55a;
  box-shadow: 0 2px 10px rgba(23, 29, 29, 0.9);
  padding: 10px 20px;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  height: 70px; /* Ustal wysokość kontenera menu */
}

.logo {
  position: absolute;
  left: calc(20px - 100px); /* Przesunięcie logo o 40px w lewo */
  top: 50%; 
  transform: translateY(-50%); 
  max-height: 40px; /* Ustal maksymalną wysokość logo */
  height: auto; /* Pozwól na automatyczną szerokość */
  margin: 0; 
}
.top-menu::before {
  content: "" ;
  position: absolute ;
  top: 0 ;
  left: 0  ;
  width: 100%  ;
  height: 100% ;
  background-repeat: no-repeat ;
  background-size: cover ;
  background-position: center top ; /* Dopasuj według potrzeb */
  opacity: 0.8 ; /* Transparentność, dostosuj według potrzeb */
  z-index: -1 ;
}

.logo {
  position: absolute ;
  left: 50% ;
  transform: translateX(-50%) ;
}

.menu-items,
.menu-icons {
  list-style: none ;
  display: flex ;
  gap: 20px ;
  margin-right: 50px ;
}

.menu-items {
  display: flex;
  align-items: center; /* Umożliwia wyrównanie elementów w pionie */
  gap: 20px;
}
.menu-icons {
  display: flex;
  align-items: center; /* Umożliwia wyrównanie elementów w pionie */
  gap: 20px;
}
.menu-items li {
  position: relative ; /* Dodane */
}

.menu-items li a,
.menu-icons .icon-link {
  text-decoration: none ;
  color: #747474 ;
  transition: color 0.3s ease ;
  font-weight: bold ;
}

.menu-icons .icon-link img {
  height: 24px ; 
}

.menu-items li a:hover,
.menu-icons .icon-link:hover {
  color: #ccc ; 
}

.menu-icons a {
  color: #e2b55a ;
  margin: 0 ;
  padding: 0 ;
  text-decoration: none ;
  font-weight: bold ;
}

.menu-icons p {
  margin: 0 ;
  padding: 0 ;
  font-weight: bold ;
  color: #747474 ;
}

.more a {
  position: relative ;
}

.more:hover .dropdown-content {
  display: block ;
}

.dropdown-content {
  display: none ;
  position: absolute ;
  background-color: rgba(5, 11, 11, 0.9) ;
  min-width: 160px ;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2) ;
  z-index: 1 ;
  top: 100% ; /* Zamiast top: 50px */
  left: 0 ;
  padding: 0 ; /* Usunięcie dodatkowej przestrzeni */
}

.dropdown-content a {
  color: #747474 ;
  padding: 12px 16px ;
  text-decoration: none ;
  display: block ;
}

.dropdown-content a:hover {
  background-color: #575757 ;
  color: #ccc ;
}

.dropdown:hover .dropdown-content {
  display: block ;
}

.dropdown:hover a.menu-mobilne {
  color: #ccc ;
}

.dropdown-content.show {
  display: block ;
  animation: fadeIn 0.3s ease-out ;
}

@keyframes fadeIn {
  from {
      opacity: 0 ;
      transform: translateY(-10px) ;
  }
  to {
      opacity: 1 ;
      transform: translateY(0) ;
  }
}

@keyframes shake {
  0% { transform: translateX(0) ; }
  25% { transform: translateX(-5px) ; }
  50% { transform: translateX(5px) ; }
  75% { transform: translateX(-5px) ; }
  100% { transform: translateX(0) ; }
}

.menu-icons .icon-link:hover {
  animation: shake 1s ease-in-out ;
}

.menu-icons .icon-link img {
  transition: transform 0.3s ease ;
}

.menu-items li a.rules-gold {
  font-family: "Marcellus", serif ; 
  color: #e4b85d ;
}

.menu-items li a.rules-gold:hover {
  text-shadow: 0px 0px 8px #FFD700 , 0px 0px 12px #FFD700 ;
}

@media (max-width: 1170px) {
  .logo {
      display: none ;
  }
  .dolacz {
      display: none ;
  }
  .top-menu {
    height: 70px ;
}
}

/* Stylizacja dla przeglądarek WebKit (Chrome, Safari, nowsze wersje Edge) */
::-webkit-scrollbar {
  width: 1px ; /* szerokość paska przewijania */
}

::-webkit-scrollbar-track {
  background: black ; /* kolor tła paska przewijania */
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(rgba(103,105,105,0.75), rgba(68,70,71,0.75)) ; /* gradient dla suwaka */
}

::-webkit-scrollbar-thumb:hover {
  background: white ; /* kolor suwaka po najechaniu */
}

/* Stylizacja dla przeglądarek obsługujących standardy CSS Scrollbar (Firefox) */
* {
  scrollbar-width: thin ; /* "auto" lub "thin" */
  scrollbar-color: linear-gradient(rgba(103,105,105,0.75), rgba(68,70,71,0.75)) black ; /* kolor suwaka i tła */
}

/* W przypadku najechania na suwak w Firefoxie */
*:hover {
  scrollbar-color: white black ;
}

::-webkit-scrollbar-button {
  display: none ;
}

.footer {
  display: flex ;
  justify-content: space-between ; /* Rozłożenie elementów na lewą i prawą krawędź */
  align-items: center ; /* Wyrównanie elementów w pionie */
  background-color: #050b0b ; /* Kolor tła stopki */
  color: white ;
  padding: 20px ; /* Odstępy wewnętrzne stopki */
  width: 100% ; /* Szerokość na całą dostępną przestrzeń */
}

.footer-section p {
  margin: 0 ; /* Usunięcie domyślnego marginesu dla paragrafów */
}

.footer-section.left {
  text-align: left ;
  margin-right: auto ; /* Odstęp od prawej strony, aby tekst pozostał po lewej */
}

.footer-section.left a {
  color: #e2b55a ;
  margin: 0 ;
  padding: 0 ;
  text-decoration: none ;
  font-weight: bold ;
}

.footer-section.right a {
  color: #e2b55a ;
  margin: 0 ;
  padding: 0 ;
  text-decoration: none ;
  font-weight: bold ;
}

.footer-section.right {
  text-align: right ;
  margin-left: auto ; /* Odstęp od lewej strony, aby tekst pozostał po prawej */
  margin-right: 30px ;
}

/*menu mobilne*/
.menu-toggle {
  display: block;
  font-size: 30px;
  cursor: pointer;
  color: #e4b85d;
  position: absolute;
  left: 20px; /* Zmieniono z right na left */
  top: 20px;
  z-index: 1002;
}

.mobile-menu {
  display: none;
  position: fixed;
  right: 0;
  top: 0;
  width: 300px;
  height: 100%;
  background-color: #050b0b;
  color: white;
  z-index: 1000;
  padding-top: 60px;
  box-shadow: -2px 0 5px rgba(0,0,0,0.5);
  overflow-y: auto;
  transition: transform 0.3s ease;
  transform: translateX(100%); /* Ukrywa menu na prawo poza ekranem */
}

.mobile-menu.open {
  display: block;
  transform: translateX(0); /* Pokazuje menu poprzez przesunięcie go na ekran */
}
.mobile-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-menu ul li {
  padding: 15px;
  text-align: center;
}

.mobile-menu ul li a {
  color: white;
  text-decoration: none;
  display: block;
  transition: background 0.3s;
}

.mobile-menu ul li a:hover {
  background: #333;
}

@media (max-width: 1170px) {
  .menu-toggle {
    display: block;
  }
  .menu-items {
    display: none;
  }
  .menu-icons {
    display: none;
  }
}

@media (min-width: 1171px) {
  .mobile-menu {
    display: none;
  }
  .menu-toggle {
    display: none;
  }
}