/* Resetowanie marginesów i paddingów */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  line-height: 1.5; /* Zmniejszenie odstępu między liniami */
}

html,
body {
  font-family: "Roboto", sans-serif !important;
}

p {
  color: black;
}

/* Główna zawartość */
.main-content {
  width: 70%;
  margin-right: 30%;
  margin-top: 80px;
  margin-bottom: 80px;
  /*padding: 20px;*/
}

/* Nagłówki h2 */
.main-content h2 {
  font-size: 36px;
  /*margin-top: 40px;*/
  margin-left: 20px; /* Wcięcie z lewej strony */
}
.background-section {
  width: 70vw;
  padding: 20px 0; /* Dodaje przestrzeń wewnętrzną, która będzie wypełniona tłem */
  background-color: rgba(0, 90, 255, 0.3);
  /*background-color: #2ec1f6; #5bcef8;*/
  box-sizing: border-box; /* Uwzględnia padding w wymiarach elementu */
}

.background-section li {
  max-width: 30vw;
}

/* Sekcja z obrazkiem i listą */
.section-with-image {
  display: flex;
  align-items: center; /* Wyśrodkowanie listy względem obrazu w pionie */
  gap: 20px; /* Odstęp między obrazem a listą */
}

.section-with-image .ikonka {
  width: 170px;
  height: auto;
}

.section-with-image img {
  border-radius: 60px;
}

.section-with-image,
.hash-list li,
p {
  margin-left: 60px; /* Odstęp między obrazkiem a listą */
  margin-right: 20px;
}

section {
  scroll-margin-top: 90px; /* Dostosuj wysokość np. do wysokości headera */
  padding: 20px 0; /*Margines górny dolny dla sekcji */
}

/* Listy */
.hash-list,
.hash-list-big {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hash-list li,
.hash-list-big li {
  position: relative;
  margin-bottom: 5px;
  margin-left: 60px; /* Odstęp między hashem a tekstem */
  padding-left: 20px;
  color: #000; /* Kolor tekstu */
}

.hash-list-big li {
  font-size: 20px; /* Rozmiar czcionki dla normalnych elementów listy */
  padding-top: 20px;
}

.hash-list li::before,
.hash-list-big li::before {
  content: "#";
  position: absolute;
  left: 0;
  color: blue; /* Hash w kolorze niebieskim */
}

/* Prawe zdjęcie desktop */
.right-image {
  position: fixed; /* Obraz pozostaje na swoim miejscu */
  top: 0;
  right: 0; /* Wyrównanie do prawej */
  width: 30vw; /* Zajmuje 30% szerokości ekranu */
  height: 100vh; /* Pełna wysokość okna */
  overflow: hidden;
  z-index: 2; /* Zapobiega zasłanianiu przez tło */
}

.right-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Dopasowanie obrazu do kontenera */
  display: block; /* Usunięcie ewentualnych przesunięć */
}

/* Stylowanie dla klasy "blue" */
.blue {
  color: blue; /* Nadaje niebieski kolor tekstowi */
}

.blue strong {
  font-weight: normal !important; /* Usuwa pogrubienie tylko w obrębie elementów z klasą .blue */
}
/* Dostosowanie dla urządzeń mobilnych */

@media (max-width: 768px) {
  html,
  body {
    margin: 0;
    padding: 0;
    width: 100vw;
    overflow-x: hidden;
  }

  #effpar {
    margin-top: 80px;
  }

  .right-image {
    display: none; /* Ukrycie obrazu po prawej stronie */
  }

  section {
    scroll-margin-top: 65px; /* Dostosuj wysokość np. do wysokości headera */
  }

  .background-section li {
    max-width: 100vw;
  }

  .section-with-image {
    align-items: flex-start;
  }

  .hash-list-big li {
    margin-left: 20px !important; /* Odstęp między hashem a tekstem */
  }

  .background-section {
    width: 100vw; /* Na mobilnych ekranach tło zajmuje całą szerokość */
  }

  .main-content {
    width: 100vw;
    margin-right: 0;
    margin-top: 0;
    padding: 0;
  }

  .section-with-image,
  .hash-list li,
  p {
    margin-left: 20px; /* Mniejszy odstęp dla urządzeń mobilnych */
  }
}