/*COPYRIGHT 2021-2023 JAKUB ŁABUZ*/

/* STRONA W CAŁOŚCI NAPISANA SAMODZIELNIE OD ZERA (Z POMOCĄ LUB INSPIRACJĄ Z M. IN. PONIŻEJ WYMIENIONYCH)*/

/*		ZRODLA INSPIRACJI NIEKTORYCH ELEMENTOW		
ZRODLO UZUPELNIANIA WIEDZY Z ZAKRESU CSS: https://www.w3schools.com/
STOPKA (POZYCJONOWANIE): https://webfaces.pl/blog/ciekawe-strony/stopka-u-dolu-strony-rozwiazanie-w-css/
ROZWIJANE MENU: https://www.aurainweb.pl/2016/07/rozwijane-poziome-menu-css-html/
				https://webkod.pl/kurs-css/lekcje/dzial-1/kilka-blokowych-elementow-html-obok-siebie
GRAFIKI I OBRAZY W WIEKSZOSCI Z: PIXABAY.COM
													*/

/*pierwotna wersja strony powstała w podobnej wersji w 2021 roku. To jest jej odświeżona i zmodyfikowana odsłona, z której kodu usunięto niewykorzystywane przez GitHuba fragmenty PHP itp. za wyjątkiem obecnie nieużywanego kodu JS i CSS*/


html{
	/*background-image: url("https://cdn.pixabay.com/photo/2020/10/09/13/12/man-5640540_960_720.jpg");*/
	background: url("grafiki/fantasy.jpg") fixed;
	background-size: cover;
	background-overflow: hidden;
	/*margin: 0;
	padding: 0;
	height: 100%;*/
}
html,body{
	/*min-height: 100%;*/
	margin: 0;
	padding: 0;
	height: 100%;
	scroll-behavior: smooth;
}/*
html, body::-ms-check{
	height: calc(100% + 350px);
}*/
/*_:-ms-fullscreen, :root .edge{background-color: red;}*/
#calosc{
	/*background: rgba(43, 100, 167, 0.7);*/
	position: absolute;
	min-height: 100%;
	width: 100%;
	padding-bottom: 200px;
}
#wlasciwa{
	
}

/*#strona{position: relative;}*/
/*	FORMATOWANIE NAGŁÓWKA Z NAZWISKIEM		*/
#sklejki{
	float: left;
	margin: 10% 0 5% 13%;
}
@import url('https://fonts.googleapis.com/css2?family=Akronim&display=swap');
#naglowek{
	/*position: absolute;*/
	/*position: fixed;*/
	/*clear: both;*/
	/*margin: 300px 0 0 71.85%;
	margin-right: 17%;
	margin-top: 300px;*/
	/*margin-left: 71.5%;*/
	color: #006699;
	/*font-family: "Courier New";*/
	/*font-family: 'Aguafina Script', sans-serif;*/
	font-family: sans-serif;
	/*font-family: 'Akronim', cursive;*/
	font-size: x-large;
	font-weight: bolder;
	font-variant: small-caps;
	text-decoration: blink;
	/*text-shadow: rgba(0,255,0,1) 5px 2px 4px;*/
	text-shadow: black 1px 1px 1px;
	cursor: default;
	z-index: 100;
	/*width: 100%;*/
}
#naglowek hr{
	position: fixed;
	margin-left: 10%;
	background: pink;
	width: 80%;
	height: 5px;
}


/*	MENU NAWIGACYJNE	*/
nav{
	border: 100px grey;
	z-index: 100;
	position: absolute;
}
.nw{
	/*padding-top: 10px;
	padding-bottom: 10px;
	height: 70px;
	min-height: 70px;*/
	padding: 5px;
	position: fixed;
	/*margin-left: 19.5%;*/
	/*margin-left: 1%;*/
	margin-top:0;
	/*float:right;*/
	align:right;
	/*width: 61%;*/
	width: 98%;
	margin-right: 10%;
	/*background-color: lightblue;*/
	background: url(grafiki/cubes1.jpg);
	background-size: cover;
	color: red;
	list-style-type: none;
	/*background: repeating-linear-gradient(#2980C3 33%, #3CABFF 66%);*/
	/*background: repeating-linear-gradient(rgba(67, 82, 103, 0.7) 30%, rgba(106, 115, 130, 0.85) 45%, rgba(117, 137, 164, 1) 25%);*/
	box-shadow: blue 5px 5px 5px;
	box-shadow:0 0 0 5px #236,
             0 0 0 10px #325;
}
.rozw,.nw button,.ab{
	font-size: 25px;
	font-weight: 900;
	float: left;
	margin: 0.5%;
	/*color: #543298;*/
	/*color: #5100F6;*/
	/*color: #A8BAEB;*/
	/*color: #8FA8EE;*/
	/*color: #52E6F6;*/
	color: #5198F6;
	/*background-color: #1B919A;*/
	/*background-color: #B35BC9;*/
	/*background-color: #52E6F6;*/
	background-color: rgba(140, 189, 245, 1);
	height: 50px;
	height: 100px;
	max-height: 60px;
	min-height: 50px;
	min-width: 150px;
	width: 150px auto;
	max-width: 500px;
	border: 0;
	border-radius: 10%;
}
.nw button:hover,.rozw{
	/*animation: pulse 1s;
	box-shadow: 0 0 0 2em rgba(#fff,0);*/
	cursor: pointer;
	/*color: #5100F6;*/
	color: #89D1F5;
	/*background-color: rgba(102, 140, 255, 1);*/
	background-color: #51BFF6;
	border-radius: 50%;
}
.nw button:focus{
	background-color: rgba(0, 204, 153, 0.3);
	color: rgb(120, 179, 50);
	outline: 0;
}
.flagiprz{
	height: 35px;
}
.flagiprz:hover{
	opacity: 0.5;
	border-radius: 50%;
}
.flagiprz img:hover{
	border-radius: 50%;
}
.flagiprz img{
	width: 30px;
	/*height: 100%;*/
}


.nw li ul{
	margin-top: 55px;
	padding: 0;
	position: absolute;
	z-index: 100;
	display:none;
	height: 300px;
}
.nw li:hover ul{
	display:block;
}
.nw li ul li{
	display:block;
	width: 100%;
	z-index: 100;
}
.nw li ul li button{
	clear: both;
	/*width: 125%;*/
	background-color: #00CCCC;
	/*004C99
	0066CC*/
	border-radius: 20%;
	position: relative;
	z-index: 100;
	margin: -12px -50px 0px 0;
	/*margin-right: -18.75px; /*	-(1.25*150px-150px)/2	*/
}


/*	GŁÓWNA CZĘŚĆ STRONY		*/
/*	FORMATOWANIE ZDJĘCIA	*/
.zdj{
	/*position: absolute;*/
	border: 1px solid lightblue;
	vertical-align: middle;
	/*max-width: 250px;
	max-height: 625px;*/
	min-width: 300px;
	min-height: 400px;
	width: 300px;
	height: 400px;
	max-width: 30%;
	max-height: 40%;
	/*width: 10%;
	height: 25%; dla alternatywnego zdjęcia*/
	/*margin-top: 0.6%;*/
	/*margin: 8.5% 0.5% 500px 10%;*/
	/*margin: 300px 17% 0 10%;*/
	overflow: hidden;
	border-radius: 3%;
	z-index: 100;
}
img:hover{
	/*cursor: not-allowed;*/
	/*transform:rotate(90deg);*/
}
/*	FORMATOWANIE CV	*/
#naglowekCV{
	color: red;
	font-family: "Courier New";
	font-size: xx-large;
	font-weight: bolder;
	font-variant: small-caps;
	text-decoration: blink;
	text-shadow: rgba(0,0,255,1) 5px 2px 4px;
	text-decoration: underline;
	margin-left: 50px;
}
#tekstcv{
	/*position:relative;*/
	padding: 4%;
	padding-top: 1%;
	background: rgba(155, 177, 185, 0.85);
	float: left;
	align: left;
	padding-top: 0;
	/*margin: 300px 0 10px 2%;*/
	margin: 150px 2% 10px 2%;
	/*border: 5px solid orange;*/
	border: 3px solid rgba(115, 193, 222, 1);
	border-radius: 10%;
	/*box-shadow: 10px 5px 8px purple, 14px 12px 16px lightgreen;*/
	/*width: 59.8%; /* proporcja fi*/
	max-width: 960px;
	/*margin-bottom: 200px;*/
	z-index: 1;
	/*padding-bottom: 100px;*/
}
/*
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@900&family=Pattaya&family=Reggae+One&display=swap&subset=latin,latin-ext');*/
/*@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap&subset=latin,latin-ext');  &subset=latin,latin-ext*/
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&family=Roboto+Mono:wght@100&display=swap');
.sk, .ach, .ed, .eduq, .interes, .interki, .work, .wr{
	/*font-family: 'Pattaya', sans-serif;
	font-family: 'Big Shoulders Display', cursive;*/
	/*font-family: 'Reggae One', cursive;*/
	/*font-family: 'Dancing Script', cursive;*/
	/*font-family: 'Shadows Into Light', cursive;*/
	font-family: 'Roboto Mono', monospace;
	margin: 0;
	background-repeat: no-repeat;
	background-position: left center;
}
/*@import url('https://fonts.googleapis.com/css2?family=Bilbo&display=swap&subset=latin,latin-ext');*/
/*@import url('https://fonts.googleapis.com/css2?family=Aguafina+Script&subset=latin,latin-ext');*/
@import url('https://fonts.googleapis.com/css2?family=Pattaya&display=swap');
.sk,.eduq,.interes, .work{
	padding: 5px 0 5px 55px;
	cursor: default;
	background-size: 50px;
	/*text-shadow: 3px 3px 3px #E5CCFF;*/
	/*font-family: 'Bilbo', cursive;*/
	/*font-family: 'Aguafina Script', cursive;*/
	font-family: 'Pattaya', sans-serif;
}
.interes{
	background-image: url("grafiki/int.jpg");
}
.eduq{
	background-image: url("grafiki/edu.png");
}
.sk{
	background-image: url("grafiki/skills.png");
}
.work{
	background-image: url("grafiki/praca.jpg");
}
.ed,.ach,.interki, .wr{
	padding: 5px 0 5px 25px;
	list-style: none;
	background-size: 20px;
	text-shadow: 1px 1px 1px #C0C0C0;
	color: #202020;
	font-size: large;
	font-weight: 800;
}
.interki{
	background-image: url("grafiki/haq.jpg");
}
.ach{
	background-image: url("grafiki/achieve.png");
}
.ed{
	background-image: url("grafiki/check.png");
}
.wr{
	background-image: url("grafiki/pracapkt.png");
}





.postulaty, .pos, .ot, .otwartosc, .urozmaicenia, .uro, .kontynuacja, .kon, .nowoczesny, .now{
	/*font-family: 'Pattaya', sans-serif;
	font-family: 'Big Shoulders Display', cursive;*/
	/*font-family: 'Reggae One', cursive;*/
	/*font-family: 'Dancing Script', cursive;*/
	/*font-family: 'Shadows Into Light', cursive;*/
	font-family: 'Roboto Mono', monospace;
	margin: 0;
	background-repeat: no-repeat;
	background-position: left center;
}
.postulaty,.otwartosc,.urozmaicenia, .kontynuacja, .nowoczesny{
	padding: 5px 0 5px 55px;
	cursor: default;
	background-size: 50px;
	/*text-shadow: 3px 3px 3px #E5CCFF;*/
	/*font-family: 'Bilbo', cursive;*/
	/*font-family: 'Aguafina Script', cursive;*/
	font-family: 'Pattaya', sans-serif;
}
.urozmaicenia{
	background-image: url("grafiki/urozmaicenia.jpg");
}
.otwartosc{
	background-image: url("grafiki/otwartosc.png");
}
.postulaty{
	background-image: url("grafiki/postulaty.jpg");
}
.kontynuacja{
	background-image: url("grafiki/kontynuacja.jpg");
}
.nowoczesny{
	background-image: url("grafiki/nowoczesny1.png");
}
.ot,.pos,.uro, .kon, .now{
	padding: 5px 0 5px 25px;
	list-style: none;
	background-size: 20px;
	text-shadow: 1px 1px 1px #C0C0C0;
	color: #202020;
	font-size: large;
	font-weight: 800;
}
.uro{
	background-image: url("grafiki/uro.jpg");
}
.pos{
	background-image: url("grafiki/pos.png");
}
.ot{
	background-image: url("grafiki/ot.png");
}
.kon{
	background-image: url("grafiki/kon.jpg");
}
.now{
	background-image: url("grafiki/now.jpg");
}

/*	FOOTER	*/
/*	FORMATOWANIE ZEGARA CYFROWEGO	*/
#mnazegar{
	float: left;
	clear: both;
	/*background-color: #9D80D0;*/
	/*background-color: #4169e1;*/
	background: url(grafiki/zgr.jpg);
	vertical-align: top;
	border-radius: 20%;
	border: 4.5px solid rgba(140, 143, 245, 1);
	padding-bottom: 10px;
}
#zegar{
	/*color: #35F6C9;*/
	/*color: rgb(255, 215, 0);*/
	color: rgb(237, 145, 33);
	width: 150px;
	max-height: 43px;
	font-size: large;
	text-align: center;
	text-shadow: 0 0 0;
}
/*	FORMATOWANIE STOPKI		*/
.mediasp a img{
    width:30px;
    height:30px;
	vertical-align: middle;
	margin: 0.5%;
}
#sl{border-radius: 50%;}
.mediasp{
	/*color:darkgreen;*/
	/*float: left;
	clear: both;*/
	color: rgb(255, 215, 0);
	text-shadow: 1px 1px 1px rgb(237, 145, 33);
	vertical-align: middle;
	display: table;
	z-index: 101;
	font-size: large;
}
#tekstff{
	padding-left: 5px;
	padding-right: 5px;
}
#footer{
	/*position: fixed;*//*zmienic wtedy rowniez dolny margines tekstcv*/
	/*position: fixed;*/
	position: absolute;
	bottom: 0;
	width: 100%;
	/*margin-bottom: 0;*/
	/*height: 115px;*/
	/*background: rgba(179, 255, 153, 1);*/
	/*background: rgba(140, 143, 245, 1);*/
	background: rgba(140, 189, 245, 1);
	background: url(grafiki/server.jpg);
	background-size: cover;
	opacity: 0.93;
	text-align: center;
	/*border-top: 5px solid yellow;*/
	border-top: 4.5px solid rgba(140, 143, 245, 1);
	z-index: 101;
	height: 100px;
}
/*	FORMATOWANIE LICZNIKA*/
#licznik{
	position: absolute;
	float: left;
	clear: both;
	right: 0;
	bottom: 0;
	margin-bottom: 200px;
	/*margin: 0 0 50px 50px;*/
	vertical-align: middle;
	background-color: rgba(59,137,44,0.75);
	border-radius: 30%;
	border: 3px solid #1EC6C0;
	box-shadow: 3px 3px 3px #44F5EF;
	text-align: center;
	font-size: x-large;
	text-shadow: 1px 1px 1px #CB44F5;
	width: 150px;
	min-height: 43px;
	color: rgba(202,29,29,1);
	padding: 0.5%;
	z-index: 100;
}



/*	GALERIA		*/
#wlasciwa{
	
}
#galeria{
	/*position: relative;*/
	position: relative;
	background-color: rgba(153,0,204,0.8);
	width: 73%;
	/*height: 1035px;*/
	max-height: 640px;
	/*bottom 115px margin:*/
	margin: 200px 13.5% 115px 13.5%;
	padding: 10px 0 10px 0;
	border: 3px solid rgb(255,204,0);
	z-index: 0;
	/*overflow: hidden;*/
	overflow: scroll;
	overflow-x: hidden;
}
#galeria button{
	position: absolute;
	float: left;
	width: 100px;
	padding: 15px 0 15px 0;
	vertical-align: middle;
	background-color: rgba(255,204,255,1);
	border-radius: 30%;
	border: 2px solid rgb(102, 255, 102);
	z-index: 4;
	margin: 2% 0 0 0;
	outline: 0;
}
#galeria button:hover{
	background-color: rgba(255,204,255,0.5);
	border: 2px solid rgb(0, 204, 255);
}
#przelacz{
	position: relative;
	float: left;
	max-width: 60%;
	max-height: 80%;
	margin: 2% 20% 0 30%;
	border: 3px solid rgb(204, 255, 153);
}
#przelacz:hover{
	cursor: zoom-in;
}
#przelacz:active{
	transform: scale(2.2);
}
.pp1{
	left: 10%;
	
}
.pp2{
	right: 10%;
}
.pzdj{
	max-width: 80%;
	max-height: 95.25%;
}
#film{
	position: relative;
	float: left;
	max-width: 60%;
	max-height: 900px;
	left: 10%;
	margin: 2% 20% 0 30%;
	border: 3px solid rgb(204, 255, 153);
}



/*		BLOG		*/
#artykuly{
	/*position: relative;*/
	/*position: fixed;*/
	height: 73%;
	padding-bottom: 150px;
	/*margin-top: 320px;*/
	margin: 270px 5% 0 5%;
	/*overflow: scroll;
	overflow-x: hidden;*/
	z-index: 1;
}
.art{
	position: relative;
	min-width: 90%;
	height: auto;
	background-color: rgba(39,163,208,0.9);
	margin: 2% 0 0 0;
	padding: 2% 0 2% 0;
	border: 10px solid rgb(46,183,12);
	box-shadow: 5px 10px 15px 40px rgba(178,97,97,0.65);
	border-radius: 10%;
}
.wzdj{
	padding: 0 0 0 5%;
}
.azdj{
	float: left;
	/*height: 282px;*/
	max-height: 939px;
	max-width: 20%;
	margin: 0 0 0 0;
	vertical-align: middle;
	border: 3px solid rgb(239,239,61);
	border-radius: 20%;
	cursor: ne-resize;
	/*cursor: url('grafiki/zdjk.png');*/
}
span{
	clear: both;
	display: block;
}
.arthr{
	height: 20px;
	background-image: url("artykul/linia1.jpg");
}
/*@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap');*/

@import url('https://fonts.googleapis.com/css2?family=Sigmar+One&display=swap');
.nagart{
	text-align: center;
	/*font-family: 'Alfa Slab One', cursive;*/
	/*font-family: 'Courgette', cursive;*/
	font-family: 'Sigmar One', cursive;
	font-size: 50px;
	color: #AA36EE;
	text-shadow: 2px 3px 2px #DB18E2;
}
.tekstart{
	padding: 0 0 0 7%;
	/*font-family: 'Courgette', cursive;*/
	font-family: 'Sigmar One', cursive;
	font-size: 30px;
	color: #18E2D5;
}
#przewijacz{
	position: fixed;
	bottom: 0;
	right: 0;
	margin: 0 0 243px 0;
	text-align: center;
	vertical-align: middle;
	min-width: 5%;
	z-index: 101;
}
#przewijacz button{
	background-color: rgba(100,24,215,0.5);
	padding: 10%;
	color: rgba(229,201,19,0.9);
	text-shadow: 2px 2px 2px rgba(229,201,19,0.9);
	font-size: 100px;
	border: 1px solid #3399FF;
	box-shadow: 2px 3px 4px rgba(24,215,87,0.8), 5px 4px 3px rgba(15,81,37,0.8) inset;
	outline: 0;
}
#przewijacz button:hover{
	background-color: rgba(229,201,19,0.5);
	color: rgba(100,24,215,0.9);
	cursor: pointer;
	text-shadow: 2px 2px 2px rgba(100,24,215,0.9);
}
#przewijacz button:active{
	
}



/*		KONTAKTOWA		*/
#kontakt{
	width: 20%;
	margin: 10% 40% 5% 40%;
	clear: both;
	float: left;
	background-color: rgba(78, 98, 226, 0.65);
	text-align: center;
	padding: 2%;
	box-shadow: 5px 7px 9px #70AEFF inset, 5px 7px 9px #70AEFF;
	border: 0.5px solid #BC70FF;
}
#kontakt input, textarea{
	width: 80%;
	margin-top: 1.5%;
	margin-bottom: 1.5%;
	border: 5px solid #BB4EE2;
	border-radius: 10%;
	outline: none;
	padding: 5%;
}
textarea{
	height: 150px;
	resize: none;
}
/*::webkit-input-placeholder{
	
}*/
::placeholder{
	text-align: center;
	color: #137D64;
	font-weight: bold;
	background-color: #B7DC22;
}
/*
#tzegar{
	clear: both;
	position: relative;
}
#tarcza, #godzina, #minuta, #sekunda{
	position: absolute;
	transform-origin: bottom left;
}
#godzina{
	stroke:green;
	stroke-width:6;
	z-index: 1;
}
#minuta{
	z-index: 2;
}
#sekunda{
	z-index: 3;
}*/
