/*
.container::after {
    content: "";
    display: table;
    clear: both;
}
*/


/*flex-shrink w forecast na 1*/

.easy-text {
    word-wrap: break-word; /* Łamie długie słowa, aby dopasować je do szerokości kontenera */
    white-space: normal; /* Pozwala na łamanie tekstu */
    overflow-wrap: break-word; /* Łamie słowa, aby dopasować je do kontenera */
		font-size: 14px; /* Przykładowa wielkość czcionki */
}





/*marginesy przez margin- right/left

odstęp do header-a przez kontener

rozmiar- dunno

*/

#liquid_cat{
    overflow-y: auto; /* Pozwala na przewijanie w pionie */
    position: relative; /* Potrzebne dla sticky */
}



/* kontener 2 jakimś cudem chce 20px, ale ten ma mieć 19 żeby było równo*/
header {
    position: relative;
    padding: 10px;
    background-color: #f5f5f5;
    overflow: hidden; /* Zapobiega problemom z floatem */
}

.day-forecast {
  overflow: hidden; /* Ukrywa nadmiar tekstu */
  position: relative; /* Pozycjonowanie względem kontenera */
}

.scroll-text {
  display: inline-block; /* Traktuje element jako liniowy blok */

  position: absolute; /* Pozycjonuje względem kontenera */
  animation: scroll 10s linear infinite; /* Definiuje animację */
  overflow: hidden;
  

  animation-timing-function: linear;
  animation-iteration-count: infinite;
}


@keyframes scroll {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}















.szyk{
	  word-wrap: break-word;
    font-family: 'Arial', sans-serif; /* Stylizacja czcionki */
    font-weight: bold; /* Wyróżnia tekst */
    text-transform: uppercase; /* Zmienia tekst na wielkie litery */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Dodaje cień do tekstu */
    letter-spacing: 1px; /* Zwiększa odstęp między literami */
    
    position: sticky;
    top: 0;
    background-color: white; /* Ustaw tło, aby zakryło przewijaną treść pod spodem */
    z-index: 10; /* Zapewnia, że nagłówek będzie nad przewijaną treścią */
    padding: 10px; /* Opcjonalnie, dodaje odstęp wokół nagłówka */
        margin: 0; /* Usunięcie marginesu, aby nie było przerwy między nagłówkiem a przewijalną treścią */
    width: 100%; /* Zapewnienie, że nagłówek zajmuje całą szerokość kontenera */
    box-sizing: border-box; /* Uwzględnia padding w szerokości */
}


.look_better {
    font-family: 'Arial', sans-serif; /* Stylizacja czcionki */
    font-size: 2em; /* Powiększa tekst */
    font-weight: bold; /* Wyróżnia tekst */
    text-transform: uppercase; /* Zmienia tekst na wielkie litery */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Dodaje cień do tekstu */
    letter-spacing: 1px; /* Zwiększa odstęp między literami */
}

.day-forecast {
    font-family: 'Arial', sans-serif; /* Stylizacja czcionki */
    
    color: #333; /* Kolor tekstu */
    font-weight: bold; /* Wyróżnia tekst */
    text-transform: uppercase; /* Zmienia tekst na wielkie litery */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Dodaje cień do tekstu */
    letter-spacing: 1px; /* Zwiększa odstęp między literami */
}


h1 {
	margin-right: 30px;
    margin: 0;
    float: left; /* Ustawia nagłówek po lewej stronie */
    white-space: nowrap; /* Zapobiega zawijaniu tekstu */
    padding: 10px;
}

.button-container1,
.button-container2 {
	padding: 10px;
    float: right; /* Ustawia kontenery po prawej stronie */
    display: inline-block;
    vertical-align: middle; /* Umożliwia wyrównanie w pionie */
    height: 100%; /* Ustawia wysokość kontenerów na 100% */
    box-sizing: border-box; /* Uwzględnia padding i border w wysokości */
}

.button-container1 {
    margin-right: 0px;
}
.button-container2 {
    margin-right: 30px; /* Przerwa między kontenerami */
}


/* Styl dla kontenera, który ma mieć pełną wysokość */
header::after {
    content: "";
    display: block;
    clear: both; /* Usuwa float z nagłówka */
}

























html, body {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

header {
    width: 100%;
    padding: 0px;
    text-align: center;
    flex-shrink: 0;
}

.container {
    display: flex;
    padding: 0px;
    margin: 0px;
    flex-grow: 1;
    height: 80%; 
    overflow: hidden;
}

.ezoic {
    padding: 10px;
    width: 20%; /* Szerokość lewego divu */
    text-align: center;
    flex-shrink: 0; /* Zapobiega zmniejszaniu się lewego divu */
    margin-right: 0px;
}

.matrix h1, 
.matrix h2, 
.matrix h3, 
.matrix h4, 
.matrix h5, 
.matrix h6 {
    float: none;
    width: 100%;
    margin: 0; /* Opcjonalnie: usuwa domyślne marginesy */
    padding: 0; /* Opcjonalnie: usuwa domyślne wypełnienia */
}



.matrix {
    padding: 10px;
    width: 60%; /* Szerokość środkowego divu, można regulować */
    text-align:  match-parent;
    flex-grow: 1; /* Środkowy div wypełnia pozostałą przestrzeń */
    
	overflow-y: auto;
    flex-shrink: 0; /* Zapobiega zmniejszaniu się nextbara */
}

.nextbar {
    padding: 10px;
    width: 20%; /* Szerokość nextbara */
    text-align: start;
	overflow-y: auto;
    height: 100%;
    flex-shrink: 0; /* Zapobiega zmniejszaniu się nextbara */
    
}





.forecast {
  margin: 10;
  background-color: #eee;
  overflow-y: auto;
  flex-shrink: 1;
}

.forecast > h1,

.day-forecast {
  margin: 0.5rem;
  padding: 0.3rem;
  font-size: 1.2rem;
}
/*
.day-forecast {
  background: right/contain content-box border-box no-repeat
    url('/ikony/iconmonstr-document-thin-240.png') white;
}*/
.day-forecast {
    background-color: white; /* Kolor tła */
    background-position: right; /* Położenie tła, bez grafiki */
    background-size: contain; /* Rozmiar tła, bez grafiki */
    background-repeat: no-repeat; /* Powtarzanie tła, bez grafiki */
}

.day-forecast{
    flex-grow: 1; /* Pozwala na rozszerzenie się do pełnej wysokości */
    padding: 10px; /* Opcjonalnie, aby nadać trochę przestrzeni wokół przewijalnej treści */

}




.day-forecast > h2,
.day-forecast > p {
  margin: 0.2rem;
  font-size: 1rem;
}