body{
	padding: 5%;
	background: black;
	
}

h1{
	color: #fff;
	font-family: segoe ui;
	display:none;
	text-align: center;
}
.readyForClick h1{
	display: block;
}

body.readyForClick{
	cursor: pointer;
}
.readyForClick div#smieci_cont{
	display: none;
}

div#smieci_cont{
	width: 100%;
	height: 100%;
}
#smieci {
	background: url("img/smieci\ dzieci.jpg");
	background-repeat: no-repeat;
	background-size: contain;
	height: 800px;
}

/* duotone style based on https://cssduotone.com/ */

:root {
	--base:              #FFF;
	--foreground:        #000;
	--bg-blend:          multiply;
	--fg-blend:          screen;
	
	--image-sx:          26px;
	--image-sy:          1667px;
}
.nieoswiecony div#smieci_cont.annoy,
.duotest div#smieci_cont {
	background-color:    var(--base);
	position:            relative;
	cursor: pointer;
}

div#smieci_cont.annoy {
	margin: 0 auto;
	width: 400px;
	height: 400px;
}

div#smieci_cont.annoy #smieci,
.duotest div#smieci_cont #smieci {
	filter:              grayscale(100%) contrast(1.5);
	flex:                1 0 100%;
	max-width:           100%;
	mix-blend-mode:      var(--bg-blend);
	position:            relative;
	width:               100%;
}
div#smieci_cont.annoy #smieci{
	background-size: auto;
	height: 100%;
}

.nieoswiecony div#smieci_cont.annoy::before,
.duotest div#smieci_cont::before {
	background-color:    var(--foreground);
	content:             '';
	height:              100%;
	mix-blend-mode:      var(--fg-blend);
	position:            absolute;
	width:               100%;
	z-index:             1;
}