body, html {
  margin: 0;
  height: 100%;
  font-family: 'Arial', sans-serif;
  display: flex;
  flex-direction: column;
  color: #333;
}

.overlay {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #f0f0f0;
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  max-width: 100px;
  margin-right: 10px;
}

.nazwa-druzyny {
  color: #008000;
}

nav ul {
  list-style: none;
  display: flex;
  margin: 0;
}

nav a {
  text-decoration: none;
  color: black;
  margin: 0 10px;
}

.section {
  position: relative;
  height: 99.5%;
}

.section-info {
  text-align: center;
  color: white;
  background-color: #000;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 10px 0; /* Zmieniony margines górny i dolny */
  height: 100%;
}

.section-info2 {
  text-align: center;
  color: white;
  background-color: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.text {
  text-align: center;
}

footer {
  text-align: center;
  padding: auto;
  background-color: #f0f0f0;
  text-align: center;
  position: relative;
}


/* Side container styles */
.side-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px; /* Zmniejszony margines dolny */
}

.content-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  margin: 0 10px;
}

/* Right container style */
.right-container, .left-container {
  flex: 1;
  width: auto;
  background: linear-gradient(to bottom, #f0f0f0, #f0f0f0);
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.5);
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}

.vs {
  font-size: 24px;
  margin: 5px 0;
}

/* Team logos style */
.team-logos {
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-logos img {
  max-width: 100px;
  margin: 0 10px;
}

/* Match info style */
.match-info {
  font-size: 14px;
  color: #555;
}

.match-date-time, .match-location {
  display: block;
}

.match-results {
  font-weight: bold;
  color: #008000;
  font-size: 30px;
}



.content-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin: 0 10px;
}
.main-content {
  margin-top: 20px;
  margin: 20px auto;
  padding: 0 50px;
  position: relative;
  text-align: center;
}

.p1 {
  margin: 0;
}

.p1:last-child {
  position: absolute;
  bottom: 0;
  right: 0;
}

a {
  text-decoration: none;
  <!--color: black;-->
}

#aktualnosci {
  display: flex;
  flex-wrap: wrap; /* Umożliwia zawijanie kafelków */
  justify-content: space-between; /* Równomierne rozmieszczenie kafelków */
  padding: 20px; /* Padding dla całej sekcji */
}

.artykul {
  border: 1px solid #ccc; /* Granica kafelka */
  margin: 10px; /* Odstęp między kafelkami */
  padding: 15px; /* Wewnętrzny odstęp */
  background-color: #f9f9f9; /* Tło kafelka */
  width: calc(32% - 20px); /* Ustal szerokość kafelka na 32% szerokości kontenera */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Cień */
  border-radius: 5px; /* Zaokrąglenie rogów */
  transition: transform 0.2s; /* Efekt powiększenia przy najechaniu */
}

.artykul:hover {
  transform: scale(1.05); /* Powiększenie przy najechaniu */
}

.artykul-img {
  width: 100%; /* Szerokość zdjęcia */
  height: auto; /* Automatyczna wysokość */
  border-radius: 5px; /* Zaokrąglenie rogów zdjęcia */
  margin-bottom: 10px; /* Odstęp pod zdjęciem */
}

.artykul-info {
  padding: 10px 0; /* Odstęp wewnętrzny dla informacji */
}

.data-lokalizacja {
  font-size: 12px; /* Rozmiar czcionki dla daty i lokalizacji */
  color: #555; /* Kolor tekstu */
  margin-bottom: 5px; /* Odstęp pod datą i lokalizacją */
}