.result{
  border: 2px solid blue; 
  padding: 5px;
}

.example{
  background-color: #f4f4f4; 
  padding: 10px; 
  border: 1px solid #ccc; 
  font-family: monospace;
}

/* 1. Resetujemy domyślne marginesy przeglądarki dla całej strony */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* Blokuje przewijanie całej strony 'w dół' */
}

/* 2. Kontener główny zajmuje dokładnie 100% wysokości ekranu */
.kontener {
  display: grid;
  grid-template-columns: 220px 1fr; /* Tutaj swobodnie zmieniasz szerokość lewego diva (np. 300px) */
  height: 100vh;                   /* Dokładnie wysokość okna przeglądarki */
}

/* 3. Lewy div dopasuje się do ekranu i pokaże scrollbary */
.lewy {
  overflow-y: auto;
  background: #f5f5f5; /* Opcjonalnie: tło, abyś widział granice */
  margin: 5px;
  padding: 10px;
}

/* 4. Prawy div również przewija się niezależnie, jeśli ma dużo treści */
.prawy {
  overflow-y: auto;
  padding: 20px;
}

.menu_list {
  list-style-type: none; /* Usuwa punkorty */
  margin: 0;             /* Usuwa domyślny margines zew. */
  padding: 0;            /* Usuwa domyślne wcięcie wew. */
  line-height: 1.6;
}

.menu_link {
  text-decoration: none; /* Usuwa podkreślenie */
  color: #ff5733;        /* Twój kolor */
}

/* Efekt po najechaniu myszką */
.menu_link:hover {
  color: #c70039;
}