* {
 margin:0px;
 padding:0px;
 box-sizing:border-box;
 /*paleta dopelniajaca/
 --kolorA : #6698b3;
 --kolorB : #c4eaff;
 --kolorC : #abe2ff;
 --kolorD : #b38954;
 --kolorE : #ffdaab;*/
 /*odbarwiona*/
 --kolorA : #85939d;
 --kolorB : #dae6ed;
 --kolorC : #ccdce6;
 --kolorD : #9d8f82;
 --kolorE : #ebdfd2;
 --kolorCzarny: #333739;
 --kolorCiemny: #525f69;
 --kolorBialy: #fff;
 color:var(--kolorCzarny);
}

a {text-decoration:none;}

body {
 background: var(--kolorBialy);
}
header {
 background: var(--kolorBialy);
 height: 100px;
}
footer {
 background: var(--kolorBialy);
 padding-left:20px;
 font-size: 0.7em;
}

#czglowna {
  display:flex;
}

#czglowna > main {
 background: var(--kolorBialy);
 padding:10px;
 border-left: 1px outset var(--kolorA);
 border-bottom: 1px outset var(--kolorA);
}

h2 { color: var(--kolorD); text-shadow:1px 1px 0px black; font-weight:bold; font-size: 1.6rem; font-style:italic; }
h4 { color: var(--kolorD); text-shadow: 1px 1px 0px black; font-weight:bold; font-size: 1.4rem; font-style:italic; }


@media screen and (min-width: 1101px) { #czglowna,header,footer {width:1100px;}}

@media screen and (max-width: 1000px) {
 #czglowna {flex-direction:column;}
 body {font-size: 1.2rem;}
}

@media screen and (min-width: 1001px) {
	header {border-bottom: 1px outset var(--kolorA);}
	#czglowna {flex-direction:row;}
	main{
    flex:1;
	}
	#czglowna > aside {
	 width: 240px;
	}
	footer {padding-left:260px;}

	body {font-size:1.2rem; margin-left:10px;}
}