html {
  scroll-behavior: smooth; /* Powoduje płynne przewijanie strony np. przy skoku do jakiejś zakładki: <a href="sekcja2"></a>. */
}

body {
  margin: auto; /* Aby nie było np. białego maginesu po lewej i prawej stronie tabeli, albo marginesu z lewej strony menu górnego. */
  font-family: Helvetica;
}

#obrazekTytulowy {
  padding: 5vmax 0 0 0;
  display: block;   /* Centruje na stronie (razem z margin: auto). */
  margin: 0 auto;
}

#tabelaBlog {
  font-size: 3.5vmin; /* 1 vmin = 1% szerokości/wysokości (co mniejsze) obszaru roboczego ekranu. */
  border-collapse: separate;
  border-spacing: 0px 1vmin;
}

#tabelaBlog td {
  border: 1px solid grey;
  background: #F5F5F5;
  padding: 1vmin;
}

#tabelaBlog .ikona {
  display: inline-block;
  vertical-align: bottom;
}

#tabelaBlog p {
  margin-top: 7px;
  margin-bottom: 0px;
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto; /* Obsługa dla Chrome i Safari. */
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

#tabelaBlog 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;
  /* transition: 0.5s; */
}

#tabelaBlog lc-cze {
  color: red;
}

#tabelaBlog .flaga {
  vertical-align: bottom;
}

#tabelaBlog .miniaturka1 {
  float: right;
  margin-left: 10px;
  border-radius: 5px;
}

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

#oknoModalneTlo {
  display: none; /* Hidden by default. */
  position: fixed; /* Stay in place. */
  z-index: 10000; /* Sit on top. */
  padding-top: 50px; /* Location of the box. */
  left: 0;
  top: 0;
  width: 100%; /* Full width. */
  height: 100%; /* Full height. */
  overflow: auto; /* Enable scroll if needed. */
  background-color: rgba(0, 0, 0, 0.8); /* Black w/ opacity. */
}

#oknoModalneKrzyzyk {
  /* position: absolute; */
  position: fixed;
  top: 15px;
  right: 15px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

#oknoModalneKrzyzyk:hover,
#oknoModalneKrzyzyk:focus {
  color: #bbb;
  text-decoration: none;
}

#oknoModalneFotka {
  width: 100%;
}

#oknoModalnePodpis {
  font-size: 4vmin;
  margin: auto;
  display: block;
  width: 100%;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  animation-name: wzrost;
  animation-duration: 0.6s;
}

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