<!--


.autor A:link { color: LIGHTSTEELBLUE}
.autor A:visited { color: LIGHTSTEELBLUE}
.autor A:active { color: LIGHTSTEELBLUE}
.autor A:hover { color: LIGHTSTEELBLUE}
.autor A {text-decoration: none; font-size:24px; font-weight:normal; font-family: arial, "Sans Serif"; text-align: left}

A:visited { color: white}
A:active { color: white}
A:hover { color: white; }
A {color: white; text-decoration: none; font-size:24px; font-weight:normal; font-family:  "Sans Serif"; text-align: left; }
A:link { color: white;}

td A:visited { color: white; }
td A:active { color: white; }
td A {background: url("../tlo_09a.jpg") fixed; color: white; text-decoration: none; font-size:22px; font-weight:normal; font-family:  Arial; text-align: left; }
td A:link { color: white; transition: background .3s;}
td A:hover { color: black; background: url("../e-Tablo.png") fixed; box-shadow: 0 0 0 black, 0 0 25px LIGHTSTEELBLUE, 0 0 5px black;}

td {font-size:24px;}

ol { margin-left: 6%; font-size: 21px; color:LIGHTSTEELBLUE}
.ol {margin-top: -450px; margin-left: 40%; font-size: 21px; color:LIGHTSTEELBLUE;}
.naucz {margin-top: -55px; margin-left: 22.5%; font-size: 21px; color:LIGHTSTEELBLUE;}
.start {margin-top: 50px; margin-left: 33%; font-size: 21px; color:LIGHTSTEELBLUE;}


img {position: absolute; top: 152px; left: 68%}
.img {margin-top: -500px; margin-left: 0%; }
.zamknij {position: absolute; top: 576px; left: 40%}
.start {position: absolute; bottom: 50px; left: -10%}
.img_00 {border-style:solid; border-color:#B18E7D; border-width:0px;width: 5px; position: static; margin-left: -1%;}

h1 { margin-left: 85px; color:gold; font-size: 32px; text-shadow: 1px 1px 2px black, 0 0 25px #00D7B8, 0 0 5px #00D7B8;}
h2 {position: absolute; top: 100px; left: 68%; color:goldenrod; text-shadow: 1px 1px 2px black, 0 0 25px #00D7B8, 0 0 5px #00D7B8;}
h3 {margin-top: -15px; margin-left: 65px; color:LIGHTSTEELBLUE; font-weight:normal; width: 57%; text-align: justify}
p {font-family: arial;	font-size: 21px; position: absolute; bottom: 1%;	left:1%; 
	vertical-align: middle; text-align: justify; font-size:12px; color:LIGHTSTEELBLUE;}

ol A:link { color: white; transition: background .3s;}
ol A:visited { color: white; }
ol A:active { color: white; }
ol A:hover { color: black; background-color:LIGHTSTEELBLUE; transition: background-color .3s;box-shadow: 0 0 0 black, 0 0 10px LIGHTSTEELBLUE, 0 0 10px black;}
ol A {text-decoration: none; font-size:20px; font-weight:normal; font-family: arial, "Sans Serif"; text-align: left; }

.naucz A:link { color: LIGHTSTEELBLUE; }
.naucz A:visited { color: LIGHTSTEELBLUE;}
.naucz A:active { color: LIGHTSTEELBLUE;}
.naucz A:hover { color: black; text-shadow: none;}
.naucz A {text-decoration: none; font-size:26px; font-weight:normal; font-family: verdana, arial, "Sans Serif"; text-align: left; text-shadow: 1px 1px 2px black, 0 0 25px #00D7B8, 0 0 5px #00D7B8;}

body {background: url("../tlo_09a.jpg") fixed; background-color: #20324C; color:LIGHTSTEELBLUE; font-family: verdana, arial, "Sans Serif"; font-size: 14px; margin-left: 5px; transition: background .3s;}




#next_01 {position: absolute;
	top: 505px;
	left: 60px;
	WIDTH:200px}

#back_01 {position: absolute;
	top: 505px;
	left: -100px;
	WIDTH:200px}

#next_02 {position: absolute;
	top: 555px;
	left: 50px;
	WIDTH:125px}

#back_02 {position: absolute;
	top: 480px;
	left: 50px;
	WIDTH:125px}

#rok {position: fixed;
	top: 45%;
	right:5%;
	WIDTH:100%}

#autor {font-family: wingdings;
	font-size: 60px;
	position: fixed;
	bottom: 0px;
	right:1%; 
	vertical-align: middle}

#CSS {position: fixed;
	top: -140px;
	right: 100px }

#tableau {position: fixed;
	top: 8px;
	left: 5px;
	WIDTH:600px}


/* nasze "POWIĘKSZENIE" */
.img_0x {
  position: absolute; top: 150px; left: 68.4%;
  width: 300px;
  height: 450px;
  background: transparent;
  object-fit: scale-down;
 box-shadow: 1px 1px 2px black, 0 0 25px LIGHTSTEELBLUE, 0 0 5px LIGHTSTEELBLUE;
opacity: 0.9;
z-index: 1;
}

/* po najechaniu myszą
   zawartość obrazka przyjmie narastające, POWIĘKSZONE rozmiary
*/
.img_0x:hover {
  width: 450px;
  height: 675px;
  position: absolute; top: 45px; left: 63%;
  transition: all 1.5s;
opacity: 1;
}

/* po zejściu kursora zawartość obrazka
   zmniejsza się PŁYNNIE do ORYGINALNYCH rozmiarów
*/
.img_0x:not(:hover) {
  width: 300px;
  height: 450px;
  position: absolute; top: 150px; left: 68.4%;
  transition: all .5s;
  transform: rotateZ(0deg);
  object-position: 50% 50%; !important;
  object-fit: fill;
}


img:hover {
  object-position: 50% 50%;
  object-fit: cover;
}

img:not(:hover) {
  object-position: 50% 50% !important;
  transition: all .3s;
  transform: rotateX(360deg);
}

.button3 {
  display: inline-block;
  background-color: transparent;
  border: none;
  color: LIGHTSTEELBLUE;		/*  */
  text-align: center;

	font-family: wingdings;
	font-size: 61px;
	position: fixed;
	bottom: 1px;
	right:5px; 
	vertical-align: middle;

  cursor: pointer;
text-shadow: 1px 1px 2px black, 0 0 25px #00D7B8, 0 0 5px black;
}

.button3 span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: .5s;
  width: 65px;
  height: 65px;
}

.button3 span:after {
  content: '>';
  position: relative;
  opacity: 1;
  top: 0px;
  right: 0px;
  transition: .5s;
  width: 65px;
  height: 65px;
}

.button3:hover span {
  padding-right: 0px;
  background-color: transparent;
  transform: rotateZ(-360deg);
  transition: .5s;
  width: 65px;
  height: 65px;
text-shadow: none;
}

.button3:hover span:after {
  opacity: 1;
  right: 0px;
  background-color: transparent;
  width: 65px;
  height: 65px;
}



-->