body /*body*/
{
    background-color: #eef2ff; 
   /* background-color: #DBE6FF; */
   /* background-image: linear-gradient(to top, #ffd4f3 65%, #fcadff 90%); */
   /* background-image: linear-gradient(to top, #e6f8ff 97%, #c2d7ff 99%); */
   /* background-image: linear-gradient(to top, #e3edff 85%, #c2d7ff 95%); */
    background-image: url('../pg4.png');
    background-repeat: repeat-x;
	/*background-image: url();*/
    font-family: Didot, serif;
    font-size: 16px;
    color: black;
}
.mainPost{
	display: inline-block;
}
.duzyIMG{
	max-width: 300px;
	max-height: 300px;
}
.sredniIMG{
	max-width: 600px;
	max-height: 600px;
}
.hoverover{
	position: fixed;
	top: 0;
	left: 0;
	height: initial;
	width: initial;
}
img{
	max-width: 100%;
}
.Bpost{
	border-left: 2px solid #ccdbff;
	border-right: 2px solid #ccdbff;
	border-top: 2px solid #ccdbff;
	border-bottom: 1px solid #ccdbff;
	padding: 5px;
	background-color: #d6daf0;
	margin-bottom: 0px;
	margin-top: 4px;
}
.Cpost{
	margin-top: 0px;
	background-color: #d6daf0;
	border-bottom: 2px solid #ccdbff;
	border-left: 2px solid #ccdbff;
	border-right: 2px solid #ccdbff;
	padding: 7px;
}
#nav{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: block;
	background-image: linear-gradient(to top, #c2d7ff 15%, #dbe6ff 95%);
	border-bottom: 1px solid #00aacc;
	box-shadow: 0px 1px 5px #7ab4ff;
	width: 100%;
	height: 24px;
	margin-bottom: 5px;
}
#absoluteBottom{
	position: relative;
	opacity: 60%;
	margin-top: 20px;
	bottom: 0;
	left: 0;
	right: 0;
	display: block;
	border-bottom: 1px solid #00aacc;
	width: 100%;
	height: 24px;
	margin-bottom: 5px;
}
#container  
{
 width: auto;
 margin-top: 35px;
 margin-left: 0px;
 margin-right: 10px;
 padding: 10px;
}
#alignD{
	text-align: center;
}
strzalka(out of order) /*nie pamietam co to miało być, prawdopodobnie strzałka do wyciągania "meni po lewej"*/
{
    float: left;
    font-size: 30px;
    font-weight: 900;
    margin-top: 40px;
    color: #b53fd1;
    position: sticky;
    top: 50px;
}
a#apost{
	text-decoration: none;
	color: black;
	font-size: 17px;
}
#apost:hover{
	color: red;
}
.epost{
	color: navy;
}
.epost:hover{
	color: red;
}
.mainL /*meni po lewej*/
{
    position: sticky;
    top: 2px;
    background-color: #120114;
    width:30px;
    margin-left: -12px;
    float: left;
    padding: 3px;
    border-right: 1px solid #b53fd1;
    border-top: 1px solid #b53fd1;
    border-bottom: 1px solid #b53fd1;
    border-radius: 5px;
    transition: width 0.2s;
    overflow: visible;
    opacity: 0.7;
}
.mainL:hover /*meni po lewej:hover*/
{
    width:155px;
    opacity: 0.8;
}
.mainL:hover #AmainL
{
    opacity: 1;
    width: 130px;
}
.mainL:hover .boxL
{
    width: 80px;
}
#AmainL  /* kontener w meni po lewej*/
{
    color: white;
    margin-left: 10px;
    opacity: 0;
    width: 30px;
    height: 580px;       /* do nastepnej opcji nalezy dodac 40 (var subject to change) px;domyslne wartosci: 270 dla 4- 310 dla 5  */
    transition: opacity 0.2s, width 0.5s;

}
.boxL /* guzik do meni po lewej */
{
    clear: both;
    display: block;
    border: 1px solid #b53fd1;
    border-radius: 5px;
    width: 10px;
    height: 30px;
    background-color: #4f1057;
    text-decoration: none;
    color: white;
    text-align: center;
    font-size: 17px;
    font-family: Impact;
    transition: width 0.2s, height 0.2s, font-size 0.3s, box-shadow 2s, background-color 0.3s;
}
#boxL2 /* duzy guzik */
{
    height: 45px;
}
.boxL:hover  /* guzik do meni po lewej:hover (duh)*/
{
    width: 150;
    height: 35px;
    font-size: 18px;
    box-shadow:  -2px -2px 2px #dfc1e6, 2px 2px 2px #dfc1e6,-2px 2px 2px #dfc1e6,2px -2px 2px #dfc1e6;
    background-color: #7c2d86;
}
#h1 /* heder tak o */
{
    text-align: center;
    color: darkred;
    width: auto;
}
#h2  /* h2 to heder co ejst w meni po lewej */
{
    text-align: center;
    color: purple;
    text-shadow: 2px 2px 2px #dfc1e6;
	width: 5px;	/*do modyfikacji*/
	transition: width 0.2s;
}
.mainL:hover #h2
{
	width: 15px;
}
a.blok      /* blok ktory jest pod imagiem co by bylo ladniej oraz trzyma obrazek i formatuje go co by sie miescil*/
{
    float: left;
    text-decoration: none;
    display: block;
    background-color: black;
    width: 21.1%;
    height: 35%;
    margin-left: 1.9%;
    margin-right: 1.8%;
    transition: box-shadow 1s, background-color 1s;
    border: 1px solid #b53fd1;
}
a.blok:hover
{
    box-shadow:  -7px -7px 5px #dfc1e6, 7px 7px 5px #dfc1e6,-7px 7px 5px #dfc1e6,7px -7px 5px #dfc1e6;
    background-color: #dea2cd; 
}   
a.blok img:hover       /* roobi smiesznie z obrazkami nawet nie pamietam juz prosze ten css to syf nie mam pojęcia czemu tak nazywalem klasy na serio kto to w ogole czyta?*/
{
    opacity: 1;
}
a.blok img
{
    opacity: 0.6;
    transition: opacity 0.5s, width 1s, height 1s;
}
.autom                  /* auto m robi m automatycznie */
{
    height: 100%;
    width: 100%;
    object-fit: cover;
    margin-bottom: 0px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.footer  /* stopowak */
{
    clear: both;
    margin-left: 10px;
    margin-right: 10px;
}
.break /*stopowak dwa */
{
    clear: both;
    height: 25px;   
}
.ct  /*ct i thv sa do obrazkow w loli.html*/ /*wreszcie przydatny komentarz*/
{
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 1090px;
    height: auto;
    margin-bottom: 10px;
    border: 1px solid #b53fd1;
}
#thv /* dlaczego nie dam po prostu thv do ct? nie wiem. niech tak zostanie*/
{
    margin-top: 10px;
}
/*clearL- div istniejący czysto do clearowania boxu ct i break, oczywiście nie działa :DD, work in progress
{
    clear: both;
}
okej nie działa ale zostawie tutaj jako pamiątkę że przez 2h próbowałem naprawić problem który nie istniał*/
/*======================================================*/
#back  /*pasek do guzików nawigacji*/
{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: #ffd4f3;
}
#c1 /*nie mam pojecia po co to*/
{
    margin-left: auto;
    margin-right: auto;
    height: 40px;
    padding: 0px;
}
#kont-back /*mini kontener na 3 guziki*/
{
    max-width: 600px;
    height: 30px;
    margin-left: auto;
    margin-right: auto;
}
#kont-back2 /*mini kontener na 2 guziki*/
{
    max-width: 400px;
    height: 30px;
    margin-left: auto;
    margin-right: auto;
}
a.blokB /*klikane guziki na back*/
{
    text-decoration: none;
    display: block;
    background-color: #eec3e2;
    width: 200px;
    height: 30px;
    margin-left:  auto;
    margin-right: auto;
    font-size: 20px;
    transition: background-color 1s ;
    float: left;
}
.blokB:hover
{
   background-color: #ba5ba5; 
}