@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&display=swap');

:root {
	--white: #f7f7ff;
	--blue: #279af1;
	--darkblue: #167cca;
	--yellow: #ffc955;
	--gray: #60656f;
	--black: #131112;

	--firstblue: #60b6fb;
	--secondblue: #1e96fc;
	--thirdblue: #1360e2;
	--fourthblue: #072ac8;
	--fifthblue: #3498db;
}

*,*::before,*::after {	box-sizing: border-box;}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,li {	margin: 0;}
ul[role="list"],ol[role="list"] {	list-style: none;}
html:focus-within {	scroll-behavior: smooth;	font-size: 16px;}
body {	min-height: 100vh;	text-rendering: optimizeSpeed;	line-height: 2;	-webkit-text-size-adjust: 100%; 
	font-family: 'Atkinson Hyperlegible', sans-serif;	background-color: var(--white); }
a:not([class]) {	text-decoration-skip-ink: auto;	color: var(--stal);}
a {	  text-decoration-color: var(--blue);   text-decoration-thickness: .15em;	text-underline-offset: 1.8px;}
img,picture {	max-width: 100%;	display: block;}
input,button,textarea,select {	font: inherit;}
hr { border: 1px dashed var(--darkblue);}
h1,h2,h3,h4 {	margin-bottom: 1rem;}
table {margin-block: 4rem;  border: 1px solid #000; border-collapse: collapse; padding: 1rem;}
tr {  border: 1px solid #000; border-collapse: collapse; }
td {  border: 1px solid #000; border-collapse: collapse; padding:1rem;}
.margin-top {margin-top:3rem;}


.wrapper {	display: grid;	grid-template-columns: 3fr 1fr;	grid-template-areas:
		"header header"
		"nav nav"
		"content sidebar"
		"footer footer";
}

@media (max-width: 400px){
.wrapper {	display: grid;	grid-template-columns: 1fr;	grid-template-areas:
		"header"
		"nav"
		"content"
	  	"sidebar"
		"footer";
}
}

/* Nagłówek */
.header {	grid-area: header;	background-color: var(--white);	padding: 1rem 4rem;	display: flex;	gap: 1rem;}
.logo {line-height: 1.5;}
.logo-tekst-duzy {	font-size: 4rem;	font-weight: 700;}
.logo-tekst-maly {	font-size: 2rem;	color: var(--gray);}
#maria {	justify-self: right;	mix-blend-mode: darken;}

@media (max-width: 400px){
.header {	padding: 1rem ;	}
.logo {line-height: 1.3;}
.logo-tekst-duzy {	font-size: 1.8rem;}
.logo-tekst-maly {	font-size: 1.3rem;}	
}

/* Menu górne */
.nav {	grid-area: nav;	background-color: var(--darkblue);}
.menu-gorne {	display: flex;	gap: 3rem;	flex-wrap: wrap;	padding: 1rem 4rem;}
.nav-item {	display: inline-block;}
.nav-item a {	color: var(--white);	text-decoration: none;	transition: color 0.3s;	font-size: 1.4rem;}
.nav-item a:hover {	color: var(--fourthblue);}

@media (max-width: 400px){

	.menu-gorne {	display: flex;	gap: 2rem;	flex-wrap: wrap;	padding: 1rem;}
.nav-item a {	font-size: 1.2rem;}
}

/* Treść  strony - dla wszystkich podstron */
.content {	grid-area: content;	padding: 4rem;}
h1.naglowek-content {	font-size: 1.8rem;}
#galeria {margin-block: 1rem; columns:5; gap:1rem}

@media (max-width: 400px){
.content {	padding: 1rem;}
h1.naglowek-content {	font-size: 1.6rem;}
#galeria {columns:2; gap:0;}
#galeria img {padding:.5rem}	
}

/* Aktualnosci */
#aktualnosci a {	text-decoration: none; }
.aktualnosc-glowna-strona {	display:grid; grid-template-columns: 1fr 5fr;	gap: 0.5rem; margin-bottom:1rem; transition: background-color 0.3s ease-in; }
.aktualnosc-glowna-strona:hover{	background-color: rgb(205, 211, 216);}
.miniatura-aktualnosci { }
.zajawka {padding-inline: 1rem}
.tytul-aktualnosci-glowna {font-size: 1.4rem;}
.tresc-zajawki {margin-block: 1rem}
.zajawka-info {font-size: .8rem; margin-bottom:1rem}
.stopka-aktualnosci {font-size:.9rem; border-top: 1px solid #ccc; margin-top:3rem}
#galeria-aktualnosci {margin-block: 2rem; columns:5; gap:1rem;}
#galeria-aktualnosci img {padding:.5rem;}	

@media (max-width: 400px){
.aktualnosc-glowna-strona {	grid-template-columns: 1fr;	margin-bottom:1rem;  background-color:#eee; padding:.5rem }
.zajawka {padding-inline: 0}
.tytul-aktualnosci-glowna {font-size: 1.2rem;}	
#galeria-aktualnosci {columns:2; gap:0;}
#galeria-aktualnosci img {padding:.5rem}	
}

/* Sidebar */
.sidebar {	grid-area: sidebar;	padding: 1rem;}
.sidebar a {text-decoration: none;}

/* sidebar klasy */
#przedszkolne {	display: grid;	grid-template-columns: repeat(2, 1fr);	padding: 0.5rem 0;	background-color: var(--white);}
.przedszkole-ikona {	background-color: var(--darkblue);	border-right: 2px solid var(--white);	color: var(--white);	
	padding: 0.5rem;	display: grid;	place-items: center;	font-size: 1.5rem;	transition: color 0.3s;	cursor: pointer;
}

#klasy {	display: grid;	grid-template-columns: repeat(8, 1fr);	padding: 0.5rem 0;	background-color: var(--white);}
.klasa-ikona {	background-color: var(--darkblue);	border-right: 2px solid var(--white);	color: var(--white);	
	padding: 0.5rem;	display: grid;	place-items: center;	font-size: 1.5rem;	transition: color 0.3s;	cursor: pointer;}
.klasa-ikona:hover, .przedszkole-ikona:hover {	background-color: var(--blue);	color: var(--white);}

/* sidebar skroty */
#skroty {	display: grid;	grid-template-columns: repeat(1, 1fr);	gap: 0.5rem;}
.skrot {	background-color: var(--darkblue);	color: var(--white); display: flex; gap: 1rem; padding: 0.5rem;
	justify-items: center;	font-size: 1.5rem;	transition: color 0.3s;	cursor: pointer;}
.skrot:hover {	background-color: var(--white);	color: var(--darkblue);	outline: 1px solid var(--darkblue);}
.skrot:hover .ikona-sidebar {	filter: invert(77%) sepia(74%) saturate(6294%) hue-rotate(184deg) brightness(101%) contrast(89%);}
.ikona-sidebar {	width: 3rem;}
.skrot-label {	font-size: 1.4rem;	align-self: center;}

@media (max-width: 400px){
#przedszkolne {	grid-template-columns: 1fr;	padding: 0.5rem 0; gap:.5rem	}
#klasy {	grid-template-columns: 1fr 1fr;	gap:.5rem}
 #skroty {	grid-template-columns: 1fr;	gap:.5rem}
}
.pagination {list-style: none; display: flex; gap:1rem; font-weight:700; font-size:1.2rem; color:var(--darkblue)}

/* Stopka */
.footer {	grid-area: footer;	background-color: var(--darkblue);	display: flex;	flex-direction: row;	justify-content: flex-start;	gap: 5rem;	padding: 3rem 4rem;}
.stopka-kolumna h2 {	color: var(--white);}
.stopka-kolumna {	line-height: 1.5rem;	color: var(--white);}

@media (max-width: 400px){
.footer {	display: flex;	flex-direction: column;	justify-content: flex-start;	gap: 5rem;	padding: 1rem;}
}