@font-face {
  font-family: 'Rajdhani';
  src: url('../assets/fonts/Rajdhani-Regular.woff2') format('woff2');
  font-weight: 400; /* Definiuje ten plik jako standardowy. */
  font-style: normal;
  font-display: block; /* Przeglądarka czeka, aż font się załaduje, NIE zastosuje na ułamek sekundy czcionkisystemowej. */
}

@font-face {
  font-family: 'Rajdhani';
  src: url('../assets/fonts/Rajdhani-Bold.woff2') format('woff2');
  font-weight: 700;  /* Definiuje ten plik jako pogrubiony. */
  font-style: normal;
  font-display: block;
}

html {
  scroll-behavior: smooth; /* Powoduje płynne przewijanie strony np. przy skoku do jakiejś miejsca na stronie. */
}

body {
  margin: auto; /* Musi być, aby nie było np. białego maginesu z lewej strony menu górnego. */
  padding-top: 60px;
  font-family: Rajdhani, Calibri, Sans-serif;
  font-size: 1.3em;
  overflow-y: scroll;  /* Aby zawsze wyświetlał się pionowy scrollbar, nawet przy krótkich stronach (zapobiega „skakaniu” podczas ładowania). */
}

#obrazek-tytulowy {
  display: block;
  margin: 0px auto;
}

#tabela-blog {
  width: 80%;
  margin: 0px auto 0px auto;
  border-collapse: separate;
  border-spacing: 5px; /* Odstęp collapse */
}

#tabela-blog td {
  border: 1px solid grey;
  padding: 10px;
  background: rgb(245, 245, 245); /* Delikatna szarość */
}

#tabela-blog .ikona {
  vertical-align: -1px;
}

#tabela-blog p {
  margin-top: 7px;
  margin-bottom: 0px;
  text-align: justify;
  text-justify: inter-word; /* Sposób rozciągania tekstu, gdy text-align: justify. Rozsuwa tekst, zwiększając wyłącznie odstępy między wyrazami, litery wewnątrz słów zachowują swoje naturalne odstępy. */
  -webkit-hyphens: auto;
  hyphens: auto; /* włącza automatyczne dzielenie wyrazów na końcu linii. Dobrze działa na Androidzie i na Firefox, na pozostałych desktopach nie. */
}

#tabela-blog a {
  color: inherit;
  /* font-weight: bold; */
  text-decoration-line: underline;
  text-underline-offset: 3px;
  text-decoration-style: solid;
  text-decoration-color: rgb(252, 213, 10);
  text-decoration-thickness: 2px;
  text-decoration-skip-ink: none;
}

#tabela-blog a:hover {
  color: rgb(0, 0, 0, 0.5);
  text-decoration-color: rgb(252, 213, 10);
  text-decoration-thickness: 2px;
  transition: 0.5s;
}

#tabela-blog lc-cze {
  color: red;
}

#tabela-blog .flaga {
 vertical-align: -2px;
}

#tabela-blog .miniaturka1 {
  float: right;
  margin-left: 10px;
  border-radius: 5px;
  /* cursor: pointer; */
  cursor: zoom-in;
  transition: 0.3s; /* Opóźnienie dla hover. */
}

#tabela-blog .miniaturka1:hover {
  opacity: 0.7;
}

#tabela-blog .miniaturka2 {
  float: right;
  margin-left: 10px;
  border-radius: 5px;
}

#tabela-blog tr { /* Stan początkowy: wiersze są ukryte, ale jeszcze NIE mają włączonej animacji transition. */
  opacity: 0;
  transform: translateY(20px);
}

/* Dopiero ta klasa włącza animację i definiuje stan końcowy */
#tabela-blog tr.pokaz {
  opacity: 1;
  transform: translateY(0);
  /* transition definiujemy tutaj, żeby odpaliło się w momencie dodania klasy */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

#okno-modalne-tlo {
  display: none;
  position: fixed; /* Pozostań w miejscu. */
  left: 0;
  top: 0;
  z-index: 10000;
  width: 100%;
  height: 100%;
  padding-top: 50px;
  background-color: rgba(0, 0, 0, 1.0);
  overflow: auto; /* Umożliwia scroll – jeśli potrzeba. */
}

#okno-modalne-krzyzyk {
  position: fixed;
  top: 15px;
  right: 50px;
  color: rgb(241, 241, 241); /* Jasny szary */
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

#okno-modalne-krzyzyk:hover,
#okno-modalne-krzyzyk:focus {
  color: rgb(187, 187, 187); /* Srebrzysty */
  text-decoration: none;
  cursor: pointer;
}

#okno-modalne-fotka {
  display: block;
  margin: auto;
}

#okno-modalne-podpis {
  display: block;
  width: 960px; /* Tyle, ile mają moje poziome fotki. */
  margin: auto;
  padding: 10px 0;
  color: rgb(204, 204, 204); /* Jasny szary */
  text-align: center;
  /* height: 150px; */ /* Aby podpis płynął z dołu. Wyłączyłem, bo wychodził poza ekran. */
  animation-name: wzrost;
  animation-duration: 0.6s;
}

@keyframes wzrost {
  from {transform: scale(0)}
  to {transform: scale(1)}
}