body {
	--pbdark: #00494B;
	--buttonhover: #006568;
	--frames: 1px solid #8EB7AD;
	--focusframes: 1px solid #00776C;
	--focusbg: #CDF88D;
	--fontsize: 16px;
	--btfontsize: 18px;
	--fontfamily: 'Hanken Grotesk',sans-serif;
	font-family: var(--fontfamily);
	margin: 0;
	padding: 0;
	font-size: var(--fontsize);
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

li { margin: 0.5em 0em; }

@keyframes movepage {
	from {left: 0;}
	to {left: -100vw;}
}

div.page {
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	padding: 3em 5em;
	background-color: white;
	overflow-y: auto;
}

div.page.putaway {
	animation-name: movepage;
	animation-duration: 0.7s;
	animation-fill-mode: forwards;
}

div.page#rodo {
	z-index: 1;
}

div.buttonrow {
	text-align: center;
	margin-top: 2em;
}

input, select, textarea {
	box-sizing: border-box;
	padding: 0.2em 0.4em;
	border: var(--frames);
	font-family: var(--fontfamily); 
	font-size: var(--fontsize);
}

input:focus, textarea:focus, select:focus { outline: none; border: var(--focusframes); background-color: var(--focusbg); }

input:disabled, textarea:disabled, select:disabled, button.textual:disabled { cursor: not-allowed; opacity: 0.7; }

input[type=checkbox]:focus {
	outline: var(--focusframes);
} 

input#cv {
	display: none;
}


textarea {
	display: block;
	width: 100%;
	max-width: 60em;
	height: 5em;
	margin: 0.25em 0em 0.5em 0em;
}

button.textual, label#cvl {
	font-size: var(--btfontsize);
	font-family: var(--fontfamily);
	font-weight: 700;
	font-style: italic;
	padding: 0.3em 0.8em;
	color: white;
	background-color: var(--pbdark);
	border: none;
	border-radius: 2em;
	cursor: pointer;
}

button.textual:hover {
	background-color: var(--buttonhover);
}

label#cvl:hover {
	background-color: var(--buttonhover);
}

h1 { text-align: center; }

p#headline {
	text-align: center;
	font-size: 114%;
}

p.gridded {
	display: inline-grid;
	margin: 0;
	grid-template-columns: 16em auto;
	gap: 0.5em 1em;
	align-items: baseline;
} 

p.gridded * { justify-self: end; }
p.gridded input, select { width: 18em; }

ol#jezyki input[type=text] {
	margin-right: 0.6em;
}

ol#firmy select {
	width: 24em;
}

ol#firmy span {
	display: inline-block; 
	width: 11em;
}

div#komunikat {
	display: none;
	position: fixed;
	top: 50vh;
	left: 50vw;
	transform: translate(-50%,-50%);
	background-color: var(--focusbg);
	border: var(--focusframes);
	box-shadow: 0.5em 0.5em 0.5em rgba(0,0,0,0.25);
	padding: 1em;
}