@media only print{
	body *{
		display:none !important
	}
	body:after{
		content:"Żyj ekologicznie! Nie marnuj papieru!"
	}
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{ 
	margin:0;
	padding:0
}

@media (max-width:900px){
	@-webkit-viewport{
		width:1024px
	}

	@-ms-viewport{
		width:1024px
	}

	@viewport{
		width:1024px
	}
}

html{
	height:100%
}

table{
	border-collapse:collapse;
	border-spacing:0
}

fieldset,img{ 
	border:0;
}

address,caption,cite,code,dfn,em,strong,th,var{
	font-style:normal;
	font-weight:normal
}

ol,ul{
	list-style:none
}

caption,th{
	text-align:left
}

h1,h2,h3,h4,h5,h6{
	font-size:100%;
	font-weight:normal
}

q:before,q:after{
	content:''
}

abbr,acronym{
	border:0
}

body{
	height:100%;
	background:rgb(188,202,219);
	font-family:Verdana,Geneva,sans-serif;
	font-weight:normal;
	display:table;
	table-layout:fixed;
	padding:0 10%
}

a{
	color:#111;
	text-decoration:none
}

img{
	width:497px;
	border:1px solid #cdcdcd;
	margin-bottom:30px
}

h3{
	font-size:23px
}

::-moz-selection{
	background:#b5f53a;
	color:#000
}

::selection{
	background:#b5f53a;
	color:#000
}

@font-face{
	font-family:'Codystar';
	font-style:normal;
	font-weight:400;
	font-display:swap;
	src:url('../fonts/codystar-regular.woff2') format('woff2')
}

.main{
	width:calc(100vw - 500px - 10%)
}

#strefapi_graph{
	font-family:Verdana,Geneva,sans-serif;
	margin:130px auto 80px auto;
	font-size:10px;
	color:#111;
	line-height:15px
}

#strefapi_graph_name{
	font-family:"Codystar",sans-serif;
	font-weight:400;
	font-style:normal;
	width:100%;
	font-size:56px;
	color:#111;
	white-space:nowrap
}

#strefapi_copyright{
	font-size:10px;
	color:#111;
	line-height:15px;
	display:table-row;
	height:87px
}

.rain{
	display:none !important;
	position:absolute;
	left:0;
	width:100%;
	height:100%;
	z-index:-1;
	overflow:hidden
}

.rain.back-row{
	display:none;
	bottom:60px;
	opacity:.5
}

body.back-row-toggle .rain.back-row{
	display:block
}

.drop{
	position:absolute;
	bottom:100%;
	width:15px;
	height:120px;
	pointer-events:none;
	animation:drop .5s linear infinite
}

@keyframes drop{
	0%{
		transform:translateY(0vh)
	}
	75%{
		transform:translateY(90vh)
	}
	100%{
		transform:translateY(90vh)
	}
}

.stem{
	width:1px;
	height:60%;
	margin-left:7px;
	background:linear-gradient(to bottom,rgba(100,100,100,0),rgba(100,100,100,.9));
	animation:stem .5s linear infinite
}

@keyframes stem{
	0%{
		opacity:1
	}
	65%{
		opacity:1
	}
	75%{
		opacity:0
	}
	100%{
		opacity:0
	}
}

.splat{
	width:15px;
	height:10px;
	border-top:2px dotted rgba(100,100,100,.9);
	border-radius:50%;
	opacity:1;
	transform:scale(0);
	animation:splat .5s linear infinite;
	display:none
}

body.splat-toggle .splat{
	display:block
}

@keyframes splat{
	0%{
		opacity:1;
		transform:scale(0)
	}
	80%{
		opacity:1;
		transform:scale(0)
	}
	90%{
		opacity:0.5;
		transform:scale(1)
	}
	100%{
		opacity:0;
		transform:scale(1.5)
	}
}