/* 1. Ładujemy czcionkę */
@font-face {
    font-family: 'AccentFont';
    src: url('Oi-Regular.ttf');
}

@font-face {
    font-family: 'RegularFont';
    src: url('DMSerifText-Regular.ttf');
}

@font-face {
    font-family: 'AccentKor';
    src: url('BagelFatOne-Regular.ttf');
}

empty {
    margin: 0;
    padding: 0;
	height: 40px;
}



/* 2. Ustawienia ogólne - usuwamy marginesy przeglądarki */
body {
    margin: 0;
    padding: 0;
}

h1 {
  font-size: 2.5rem; /* 2.5 * 16 = 40px */
	text-align: right;
	color: #26c6da;
}


/* 3. Styl dla głównego napisu */
.napis-logo {
    font-family: 'AccentFont', sans-serif;
    color: white; /* Ten niebieski kolor */
    font-size: 100px;
    margin: 0;
	padding-top: 40px;
    text-align: left; /* Do lewej */

}

.napis-accent {
    font-family: 'RegularFont', sans-serif;
    color: white; 
    font-size: 30px;
    margin: 0;
	padding: 50px 0;
    text-align: left; 

}

.napis-small {
    font-family: 'RegularFont', sans-serif;
    color: #f09b9bff; 
    font-size: 20px;
    margin: 0;
    text-align: left; 

}

.napis-mailsmall {
    font-family: 'RegularFont', sans-serif;
    color: white; 
    font-size: 20px;
    margin: 0;
    text-align: left; 

}
.napis-mailbig {
    font-family: 'RegularFont', sans-serif;
    color: white; 
    font-size: 30px;
    padding: 20px 0;
    margin: 0;
    text-align: left; 

}

.napis-normal1 {
    font-family: 'RegularFont', sans-serif;
    color: #83b8ffff; 
    font-size: 20px;
    margin: 0;
    text-align: left; 
    padding-bottom: 40px;

}

.napis-normal1big {
    font-family: 'RegularFont', sans-serif;
    color: White; 
    font-size: 30px;
    margin: 0;
    text-align: left; 
    padding: 40px 0;

}

.napis-normal2 {
    font-family: 'RegularFont', sans-serif;
    color: white; 
    font-size: 20px;
    margin: 0;
    text-align: left; 


}


.prostokat {
    width: 50%; 
    padding: 20px;     
    margin: 0 auto;   /* Środkuje pudełko na ekranie */
    

}

.okragle-logo {
    position: absolute;
    top: 200px;      /* Ujemna wartość wyciąga logo w górę na pas0 */
    right: 10%;      /* Odległość od prawej krawędzi */
    width: 300px;     /* Rozmiar logo */
    height: 300px;
    display: flex;
     z-index: 10;     /* Upewnia się, że logo jest na wierzchu */
}

.okragle-logo img {
    width: 70%;      /* Skalowanie obrazka wewnątrz kółka */
}

/* 5. KOLOROWE PASY (TŁA) */

.pas0 {
    background-color: #3055ffff;

}

.pas1 {
    position: relative;
    background-color: #83b8ffff;
    height: 600px;
    background-image: url('pattern_01.svg');
    background-repeat: repeat-x; /* Powtarza tylko w poziomie (od lewej do prawej) */
    background-position: bottom left; /* Przykleja wzór do dołu */

}

.pas2 {
    background-color: #ffffff;

	padding: 40px 0;
    
}

.pas3 {
    background-image: url('pattern_02.svg'), url('pattern_03.svg');
    background-position: left top, right top;
    background-repeat: no-repeat, no-repeat;
    background-size: auto, auto; 
    background-repeat: repeat-y, repeat-y; 
    background-color: #e24040ff;
    padding: 40px 0;
}

.pas4 {
    background-color: #83b8ffff;
    padding:20px 0;

}

.pas5 {
    background-color: white;
    padding: 20px 0;
}

.pas6 {
    background-color: #000000ff;
    padding: 40px 0;
    height: 20px;
}




/*PRZYCISKI*/

.grid-container {
            display: grid;
            /* Definiujemy 4 kolumny o proporcjach: 1:2:2:1 (razem 6 jednostek) */
            /* 1/6, 2/6, 2/6, 1/6 szerokości */
            grid-template-columns: 16.66% 33.33% 33.33% 16.66%;
            /* Definiujemy 3 równe wiersze */
            grid-template-rows: repeat(3, 60px); 
            gap: 10px; /* Odstęp między przyciskami */
            width: 100%;
		padding-top: 40px;
		padding-bottom: 40px;
        }

.P1 {
font-size: 3rem; 
color: #83b8ffff;
text-align: left;
font-family: 'AccentKor', sans-serif;
}

.P1:hover {
  font-size: 0; /* Ukrywa pierwotny tekst */
}

.P1:hover::after {
  content: attr(data-hover); /* Wyświetla tekst z atrybutu data-hover */
font-size: 2.5rem; 
color: 83b8ffff;
text-align: left;
font-family: 'AccentFont', sans-serif;
}

.P2 {
font-size: 4rem; 
color: #83b8ffff;
text-align: right;
font-family: 'AccentKor', sans-serif;
}

.P2:hover {
  font-size: 0; /* Ukrywa pierwotny tekst */
}

.P2:hover::after {
  content: attr(data-hover); /* Wyświetla tekst z atrybutu data-hover */
font-size: 3rem; 
color: #83b8ffff;
text-align: right;
font-family: 'AccentFont', sans-serif;
}

.P3 {
font-size: 2rem; 
color: #83b8ffff;
text-align: right;
font-family: 'AccentKor', sans-serif;
}

.P3:hover {
  font-size: 0; /* Ukrywa pierwotny tekst */
}

.P3:hover::after {
  content: attr(data-hover); /* Wyświetla tekst z atrybutu data-hover */
font-size: 1.5rem; 
color: #83b8ffff;
text-align: right;
font-family: 'AccentFont', sans-serif;
}

/*tabele z datatmi*/

.container-daty {
		padding-top: 20px;
		padding-bottom: 20px;
            display: grid;
            /* 6 kolumn, każda po 1/6 (16.66%) */
            grid-template-columns: repeat(6, 1fr);
            font-family: 'RegularFont', sans-serif;
		color: black;

            /* Pierwszy wiersz wyższy (np. 150px), kolejne niższe (np. 80px) */
            grid-auto-rows: 60px; 
            grid-template-rows: 100px; 
            
            gap: 15px; /* Odstępy między polami */
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
        }

        /* To są Twoje białe pola */
        .pole {
            background-color: #c0d8f8ff;
            border-radius: 15px; /* Zaokrąglone krawędzie */
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Delikatny cień dla efektu głębi */
            transition: transform 0.2s;
        }

/* kalendarz */
.calendar-container {
  position: relative;
margin: 20px 0 60px;
  overflow: hidden;
  width: 100%;
  padding-top: 75%; /* To zachowa proporcje 4:3. Możesz to zmienić na 56.25% dla 16:9 */
}

.calendar-container iframe {
  position: absolute;

  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}