/* Importowanie własnej czcionki SilkaMono */
@font-face {
  font-family: 'SilkaMono'; /* Nazwa czcionki */
  src: url('./fonts/SilkaMono-Regular.otf') format('opentype'); /* Ścieżka do pliku czcionki */
  font-weight: normal; /* Grubość tekstu */
  font-style: normal;  /* Styl tekstu */
}

/* General Reset */
body, html {
  margin: 0;
  padding: 0;
  font-family: 'SilkaMono', sans-serif; /* Ustawienie SilkaMono jako domyślnej czcionki */
  height: 100%; /* Wysokość na cały ekran */
}

/* Kontener główny */
.container {
  display: flex;
  flex-direction: row;
  width: 100%; /* Pełna szerokość */
  height: 100vh; /* Wysokość na cały ekran */
}

/* Sekcje podziału ekranu */
.split {
  width: 50%; /* Każda sekcja zajmuje połowę ekranu w układzie poziomym */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Styl dla logo */
.logo {
  display: block; /* Ustawia obraz jako blokowy element */
  margin: 20px auto; /* Dodaje marginesy góra i dół po 20px, automatyczne wyśrodkowanie */
  max-width: 150px; /* Maksymalna szerokość logo */
  height: auto; /* Zachowuje proporcje obrazu */
  margin-left: 20px; /* Dodaje margines z lewej strony */
  margin-right: 20px; /* Dodaje margines z prawej strony */
}

/* Sekcja Pub (lewa) */
.left {
  background-color: #022520; /* Ciemny zielony dla sekcji Pub */
  color: #8acbbe; /* Jasny zielony tekst */
}

.left .button {
  display: flex; /* Ustawia flexbox na przycisku */
  justify-content: center; /* Wyśrodkowuje tekst w poziomie */
  align-items: center; /* Wyśrodkowuje tekst w pionie */
  text-align: center; /* Wyśrodkowanie tekstu w poziomie */
  background-color: #e63141; /* Czerwony kolor tła przycisków */
  color: #022520; /* Ciemnozielony tekst na przyciskach */
  text-decoration: none;
  padding: 15px 30px;
  margin-top: 10px; /* Odstęp między przyciskami a logo/innymi elementami */
  border-radius: 0; /* Ostre krawędzie */
  border: none; /* Brak obramowania */
  font-size: 16px;
  margin-left: 10px; /* Dodaje margines z lewej strony */
  margin-right: 10px; /* Dodaje margines z prawej strony */
}

.left .button:hover {
  background-color: #d62828; /* Ciemniejszy czerwony na hover */
}

/* Sekcja Sklep (prawa) */
.right {
  background-color: #cdc6c0; /* Jasny szary dla sekcji Sklep */
  color: #000000; /* Czarny tekst */
}

.right .button {
  display: flex; /* Ustawia flexbox na przycisku */
  justify-content: center; /* Wyśrodkowuje tekst w poziomie */
  align-items: center; /* Wyśrodkowuje tekst w pionie */
  text-align: center; /* Wyśrodkowanie tekstu w poziomie */
  background-color: #e63141; /* Czerwony kolor tła przycisków */
  color: #000000; /* Czarny tekst na przyciskach */
  text-decoration: none;
  padding: 15px 30px;
  margin-top: 10px; /* Odstęp między przyciskami a logo/innymi elementami */
  border-radius: 0; /* Ostre krawędzie */
  border: none; /* Brak obramowania */
  margin-left: 10px; /* Dodaje margines z lewej strony */
  margin-right: 10px; /* Dodaje margines z prawej strony */
}

/* Responsywność dla urządzeń mobilnych (max szerokość ekranu =768px)*/
@media (max-width:768px){
.container{
flex-direction column ajust