@charset "utf-8";

@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url('../fonts/Rubik.woff2') format('woff2');
	
}

:root {
	--header-height: 150px;
	--navbar-height: 3.5rem;
	--font-family: Rubik, Helvetica, Arial, sans-serif;
	--font-family-code: monospace;
	--purple: #da97f7;
	--success: #008575;
	--info: #287cb8;
	--danger: #da3a42;
	--warning: #ffe08a;
	--white: #fff;
	--black: #222;
	--grey: #aaa;
	--dark-purple: #700F99;
	--header-bg: #057;
	--background-color: var(--black);
	--text-color: var(--white);
	--inactive: var(--grey);
	--shadow-color: var(--grey);
	--navbar-bg-color: var(--black);
	--hamburger-color: var(--white);
}

@media (prefers-color-scheme: light) {
	:root {
		--inactive: #888;
		--background-color: var(--white);
		--text-color: var(--black);
		--shadow-color: var(--black);
		--navbar-bg-color: var(--white);
		--hamburger-color: var(--black);
		--purple: #8e13c3;
	}
}

html {
	background-color: var(--background-color);
	font-family: var(--font-family);
	scroll-padding-top: calc(var(--navbar-height) + 1rem);
	overflow: auto;
}

body {
	color: var(--text-color);
	background-color: var(--background-color);
	font-family: var(--font-family);
	font-size: .85rem;
	text-indent: 0;
	word-spacing: 0;
	line-height: 1.10;
	margin: 0;
}

@media (prefers-color-scheme: dark) {
	footer img {
		filter: invert(1);
	}
}

nav {
	position: fixed;
	top: 0;
	height: var(--navbar-height);
	display: flex;
	justify-content: center;
	background-color: var(--navbar-bg-color);
	z-index: 5;
	width: 100%;
	-webkit-user-select: none;
	user-select: none;
	& > menu {
        align-items: center;
		display: flex;
		justify-content: center;
		margin: 0;
		padding: 0;
		& a:hover {
			color: var(--purple);	
		}
		& > li {
			padding: 1rem;
			position: relative;
			& > label {
				padding-right: 2rem;
				display: block;
				&::after {
					border: 3px solid var(--purple);
					border-radius: 2px;
					border-right: 0;
					border-top: 0;
					content: " ";
					height: .5rem;
					margin-top: -.5rem;
					margin-left: .5rem;
					pointer-events: none;
					position: absolute;
					top: 50%;
					transform: rotate(-45deg);
					transform-origin: center;
					width: .5rem;
				}
			}
			&:hover {
				> menu {
					display: block;
					
				}
			}
			& input:checked {
				& ~ menu {
					display: block;
				}
			}
			& > menu {
				position: absolute;
				background-color: var(--navbar-bg-color);
				padding: 0rem;
				margin-top: 1rem;
				border-radius: 4px;
				display: none;
				padding-left: 0;
				box-shadow: 0 0 5px var(--shadow-color);
				& > li {
					position: relative;
					padding: .1rem 1.25rem;
					line-height: 1.2;
					& a {
						white-space: nowrap;
						text-decoration: none;
						padding: .25rem 0;
						display: block;
						color: var(--text-color);
					}
					&:first-child a {
						padding-top: .5rem;
					}
					&:last-child a {
						padding-bottom: .5rem;
					}
					@media screen and (min-width: 1024px) { 
						&:empty {
							border-top: 1px solid var(--grey);
							margin: .25rem 0;
						}
					}
					&.active a {
						color: var(--purple);
					}
				}
				&.right {
					right: 0;
				}
			}
		}
		& li {
			list-style: none;
		}
	}
	& input {
		position: absolute;
		height: 0;
		width: 0;
		margin: 0;
		padding: 0;
		border: 0;
		outline: none;
		&:focus {
			~ label span {
				outline: 1px solid var(--purple);
			}
		}
	}
	@media screen and (max-width: 1024px) {
		display: block;
		& input:checked {
			& ~ menu {
				&::after {
					display: none;
				}
				display: block;
				height: calc(100vh - var(--navbar-height));
				& menu {
					position: relative;
					display: block;
					border: none;
					box-shadow: none;
				}
				width: 100%;
				background-color: var(--background-color);
				color: var(--text-color);
				& .divider {
					display: none;
				}
			}
			& ~ label span:nth-child(1) {
				transform: translateY(6px) rotate(45deg);
			}
			& ~ label span:nth-child(2) {
				opacity: 0;
			}
			& ~ label span:nth-child(3) {
				transform: translateY(-6px) rotate(-45deg);
			}
		}
		& > menu {
			margin-top: 0;
			display: none;
			overflow: auto;
			max-height: calc(100vh - var(--navbar-height));
			line-height: 1;
			& li {
				padding-bottom: 0;
				line-height: 1;
			}
			& li label::after {
				content: none;
			}
			& > li > menu > li {
				& a {
					white-space: normal;
				}
			}
		}
		& > label {
			min-height: var(--navbar-height);
			width: var(--navbar-height);
			height: var(--navbar-bg-color);
			position: relative;
			margin-left: auto;
			display: flex;
			justify-content: center;
			background-color: transparent;
			border: 0;
			& span {
				transform-origin: center;
				transition-duration: 50ms;
				transition-property: background-color,opacity,transform;
				transition-timing-function: ease-out;
				height: 1px;
				width: 1.5rem;
				background-color: var(--hamburger-color);
				position: absolute;
				&:nth-child(1) {
					top: calc(50% - 6px);;
				}
				&:nth-child(2) {
					top: calc(50%);
				}
				&:nth-child(3) {
					top: calc(50% + 6px);
				}
			}
		}
	}
}

header {
	background-color: var(--header-bg);
	margin-top: var(--navbar-height);
	height: var(--header-height);
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;

	
	
	
	
	
	
	
	background-image: url('/img/imagebar_hu_b088b4b73359cc35.6232983d1772ca76c86bd6b23ae4bf670a797020893962a804f1ff121e842af7.jpg');

	@media screen and (min-width: 720px) {
		background-image: url('/img/imagebar_hu_253942b55313b857.3f8104f27264fcf70c5d5fe10c4e0a0ee7b44777a13575f0510366666c9a4e53.jpg');
	}
	@media screen and (min-width: 1200px) {
		background-image: url('/img/imagebar_hu_cb140e1d2531b9d2.27732a573df9ee4afb52281a9fc531f494980d604b077ed412bb47bf5c8e2776.jpg');
	}
	@supports(background-image: url('/img/imagebar_hu_31c21f9883c9a020.c5b4d17d777a6b4d9684d57849908a8fe7be02c39340ee1f4511897f2faaf9e8.webp')) {
		background-image: url('/img/imagebar_hu_31c21f9883c9a020.c5b4d17d777a6b4d9684d57849908a8fe7be02c39340ee1f4511897f2faaf9e8.webp');

		@media screen and (min-width: 720px) {
			background-image: url('/img/imagebar_hu_a9e3cc115782816.5d89d3c8c43dde43df4022800bdf1230ceebdb2ac2eee6ebb1670d2e8ed70293.webp');
		}
		@media screen and (min-width: 1200px) {
			background-image: url('/img/imagebar.46beb417944d3d0c3924498f60484d25429f8f35976678248be967202d2aa0c6.webp');
		}
	}

	background-position: center;

	& a {
		display: flex;
		justify-content: center;
		align-items: center;
		text-decoration: none;
		& h1 {
			font-weight: 600;
			color: white;
			font-size: 1.5rem;
			display: inline;
			margin: 0 0 0 .3rem;
			text-shadow: 0 0 15px black;
		}
	}
}

main {
	max-width: 1200px;
	margin: 0 auto;
	padding: 1rem 3rem;
	@media screen and (max-width: 1024px) {
		padding: .5rem 1.5rem;
	}
	@media screen and (max-width: 600px) {
		padding: .1rem .5rem;
	}

	& h1, & h2, & h3, & h4, & strong {
		font-weight: 700;
		color: var(--purple);
	}
	
	& h1 {
		margin-top: 1rem;
		margin-bottom: .7rem;
		font-size: 120%;
	}
	
	& h2 {
		margin-top: .8rem;
		margin-bottom: .5rem;
		font-size: 115%;
		&:first-of-type {
			font-size: 150%;
		}
	}
	
	& h3 {
		margin-top: .6rem;
		margin-bottom: .3rem;
		font-size: 105%;
	}
	
	& h4, & strong {
		margin-top: .4rem;
		margin-bottom: .3rem;
		font-size: 100%;
	}
	
	& p {
		margin-top: .2rem;
		&:not(:first-child) {
			margin-bottom: .5rem;
		}
		margin-bottom: .5rem;
		font-size: 100%;
	}
	
	& a, & span {
		font-size: 100%;
		color: var(--text-color);
	}
	
	& figure {
		margin: .5rem 1rem 1rem 1rem;
		display: inline-block;
		& picture {
			display: flex;
			flex-direction: row;
			gap: 1rem;
			flex-wrap: wrap;
			justify-content: center;
		}
		& figcaption {
			padding-top: 4px;
			text-align: center;
		}
	}

	& a {
		text-decoration: underline;
	}
	& dl {
		display: grid;
		grid-template-columns: 45fr 55fr;
		margin-top: 1rem;
		& dt, & dd {
			border-top: 1px solid var(--grey);
			padding: .5rem .75rem;
		}
		& dd {
			text-align: center;
			margin-left: 0;
			padding-left: 2rem;
		}
	}

	& ol {
		margin-left: 2rem;
		margin-top: 1rem;
		margin-bottom: 1rem;
		padding-left: 1rem;
	}

	& ul {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

pdn-tip, pdn-note, pdn-warning, pdn-example {
	margin-top: 1rem;
	display: block;
	& h3 {
		z-index: 2;
		position: relative;
		height: 32px;
		background-repeat: no-repeat;
		padding-left: 35px;
		margin-left: 8px;
		margin-top: 4px;
		background-size: contain;
	}
	& p {
		margin-bottom: -16px;
		z-index: 1;
		position: relative;
		top: -20px;
		border-style: solid;
		border-width: thick;
		border-radius: 8px;
		padding: 3px 5px 3px 45px;
		color: var(--white);
		& a {
			color: var(--white);
		}
	}
}

pdn-tip {
	& h3 {
		background-image: url('data:image/svg+xml,%3Csvg%20width=%2261.554%22%20height=%2261.554%22%20version=%221.1%22%20xmlns=%22http:%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23699f4c%3Bfill-rule:evenodd%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20d=%22M30.804%2060.804a30%2030%200%201%201%2030-30%2030%2030%200%200%201-30%2030z%22%20fill=%22%23699f4c%22%20style=%22stroke:%23fff%3Bstroke-width:2%22%2F%3E%3Cpath%20d=%22M13.804%2037.804a3.48%203.48%200%200%201%200-4.9l1.77-1.76a3.18%203.18%200%200%201%204.57.05l3.12%203.24a1.59%201.59%200%200%200%202.31%200l15.9-16.4a3.19%203.19%200%200%201%204.6-.026l1.72%201.73a3.48%203.48%200%200%201%200%204.85l-21.1%2021.5a3.18%203.18%200%200%201-4.55.03z%22%20fill=%22%23fff%22%2F%3E%3C%2Fsvg%3E');
	}
	& p {
		border-color: var(--success);
		background-color: var(--success);
	}
}
pdn-note {
	& h3 {
		background-image: url('data:image/svg+xml,%3Csvg%20width=%2261.565%22%20height=%2253.451%22%20version=%221.1%22%20xmlns=%22http:%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23bf873e%3Bfill-rule:evenodd%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20d=%22M5.182%2052.701a4.46%204.46%200%200%201-3.84-2.17%204.25%204.25%200%200%201%200-4.33l25.6-43.3a4.48%204.48%200%200%201%207.68%200l25.6%2043.3a4.25%204.25%200%200%201%200%204.33%204.45%204.45%200%200%201-3.84%202.17z%22%20fill=%22%23bf873e%22%20style=%22stroke:%23fff%3Bstroke-width:2%3Bstroke-opacity:1%22%2F%3E%3Cpath%20d=%22M31.182%2048.701a4%204%200%201%200-4-4%204%204%200%200%200%204%204zm0-36a4%204%200%200%200-4%204v16a4%204%200%200%200%208%200v-16a4%204%200%200%200-4-4z%22%20fill=%22%23fff%22%2F%3E%3C%2Fsvg%3E');
	}
	& p {
		color: var(--black);
		border-color: var(--warning);
		background-color: var(--warning);
		& a {
			color: var(--black);
		}
		& strong {
			color: var(--dark-purple);
		}
	}
}
pdn-warning {
	& h3 {
		background-image: url('data:image/svg+xml,%3Csvg%20width=%2261.554%22%20height=%2261.554%22%20version=%221.1%22%20xmlns=%22http:%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%239f4c4c%3Bfill-rule:evenodd%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20d=%22M30.804%2060.804a30%2030%200%201%201%2030-30%2030%2030%200%200%201-30%2030z%22%20fill=%22%239f4c4c%22%20style=%22stroke:%23fff%3Bstroke-width:2%22%2F%3E%3Cpath%20d=%22M45.804%2040.804a3.41%203.41%200%200%201%200%204.82l-.221.22a3.42%203.42%200%200%201-4.83%200l-8.76-8.76a1.71%201.71%200%200%200-2.42%200l-8.74%208.75a3.42%203.42%200%200%201-4.84%200l-.194-.193a3.41%203.41%200%200%201%20.017-4.84l8.83-8.74a1.7%201.7%200%200%200%200-2.43l-8.83-8.72a3.41%203.41%200%200%201-.018-4.84l.193-.193a3.41%203.41%200%200%201%202.42-1c.944%200%203.26%201.84%203.87%202.46l7.29%207.29a1.71%201.71%200%200%200%202.42%200l8.76-8.75a3.42%203.42%200%200%201%204.83%200l.222.229a3.41%203.41%200%200%201%200%204.82l-8.73%208.74a1.7%201.7%200%200%200%200%202.41z%22%20fill=%22%23fff%22%2F%3E%3C%2Fsvg%3E');
	}
	p {
		border-color: var(--danger);
		background-color: var(--danger);
	}
}
pdn-example {
	& h3 {
		background-image: url('data:image/svg+xml,%3Csvg%20width=%2261.5%22%20height=%2261.554%22%20version=%221.1%22%20xmlns=%22http:%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%235b75a0%3Bfill-rule:evenodd%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20d=%22M.75%2030.804a30%2030%200%201%201%2030%2030%2030%2030%200%200%201-30-30z%22%20fill=%22%235b75a0%22%20style=%22stroke:%23fff%3Bstroke-width:2%3Bstroke-opacity:1%22%2F%3E%3Cpath%20d=%22M30.75%2012.804a4%204%200%201%201-4%204%204%204%200%200%201%204-4zm0%2036a4%204%200%200%201-4-4v-16a4%204%200%200%201%208%200v16a4%204%200%200%201-4%204z%22%20fill=%22%23fff%22%2F%3E%3C%2Fsvg%3E');
	}
	& p {
		border-color: var(--info);
		background-color: var(--info);
	}
}

.tabs-wrapper {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	& details {
		display: contents;
		& summary {
			order: 0;
			border-bottom: 1px solid var(--inactive);
			color: var(--inactive);
			display: block;
			margin-bottom: .5rem;
			padding: .5rem;
			user-select: none;
			cursor: pointer;
			&:hover {
				border-bottom-color: var(--purple);
				color: var(--purple);
			}
		}
		&[open] summary {
			border-bottom-color: var(--purple);
			color: var(--purple);
			
		}
		& .tab-content {
			order: 1;
			width: 100%;
			min-width: 100%;
			box-shadow: 0 0 5px var(--shadow-color);
			border-radius: 5px;
			padding: 1rem;
		}
	}
}

details[open]::details-content {
	display: contents;
}

pdn-tag {
	border-radius: 4px;
	color: var(--white);
	padding: .25rem .5rem;
	margin: 0 .1rem;
	height: 1rem;
	display: inline-block;
	&.keyb {
		border-color: var(--dark-purple);
		background-color: var(--dark-purple);
	}
	&.mouse {
		border-color: var(--info);
		background-color: var(--info);
	}
}

pdn-tool {
	vertical-align: middle;
	margin: 0 3px;
	display: inline-block;
	background-repeat: no-repeat;
	width: 16px;
	height: 16px;
	filter: drop-shadow(0 0 1px var(--grey));

	
	
	
	

	background-image: url('/png/tool_sprite_hu_31f0c0bae63ad535.8d590883b9f5d37d1792d58c2c64df112bc4025ee715870e6a49f7a394913ac9.png');
	@media (min-resolution: 144dpi) {
		background-image: url('/png/tool_sprite_hu_2c68156ed663afc1.7b08e38a50dec0d7f2a97af778828c9e0798c94c7007fa414a98a2c06f645e0b.png');
		background-size: 41px 336px;
	}

	@supports(background-image: url('/png/tool_sprite_hu_f684e5e05344fa3b.a3cb51ef6bc6952e8fcc7e14337cbdd1fd7284adffc8637c4684fd26b1878d86.webp')) {
		background-image: url('/png/tool_sprite_hu_f684e5e05344fa3b.a3cb51ef6bc6952e8fcc7e14337cbdd1fd7284adffc8637c4684fd26b1878d86.webp');
		@media (min-resolution: 144dpi) {
			background-image: url('/png/tool_sprite.021da81d10e95f37885cbe57f5c31336830ede82d6077d3a14ad7302db641413.webp');
		}
	}
	
	&.clonestamp {
		background-position: 0 0;
	}
	&.colorpicker {
		background-position: 0 -17px;
	}
	&.ellipticalselect {
		background-position: 0 -34px;
	}
	&.eraser {
		background-position: 0 -51px;
	}
	&.gradient {
		background-position: 0 -68px;
	}
	&.lassoselect {
		background-position: 0 -85px;
	}
	&.linecurve {
		background-position: 0 -102px;
	}
	&.magicwand {
		background-position: 0 -119px;
	}
	&.movecursor {
		background-position: 0 -136px;
		width: 25px;
		height: 25px;
	}
	&.moveselectedpixels {
		background-position: 0 -247px;
	}
	&.moveselection {
		background-position: -16px -247px;
	}
	&.paintbrush {
		background-position: 0 -162px;
	}
	&.paintbucket {
		background-position: 0 -179px;
	}
	&.pan {
		background-position: -16px -319px;
	}
	&.pencil {
		background-position: 0 -196px;
	}
	&.recolor {
		background-position: 0 -213px;
	}
	&.rectangleselect {
		background-position: 0 -230px;
	}
	&.select {
		background-position: 0 -247px;
		width: 32px;
	}
	&.shapes {
		background-position: 0 -264px;
		width: 41px;
		height: 20px;
	}
	&.text {
		background-position: 0 -285px;
	}
	&.tools {
		background-position: 0 -302px;
	}
	&.view {
		background-position: 0 -319px;
		width: 32px;
	}
	&.zoom {
		background-position: 0 -319px;
	}
}

table {
	display: block;
	max-width: -moz-fit-content;
	max-width: fit-content;
	margin: 0 auto;
	overflow-x: auto;
	border-spacing: 0 1rem;
	& .tip, & .note, & .warning, & .example {
		& p {
			margin-bottom: 0;
		}
	}
	& tbody {
		& tr {
			& td:first-child {
				font-family: var(--font-family-code);	
			}
		}
	}
	&:nth-of-type(2) {
		& tbody {
			& tr {
				& td:nth-child(2) {
					font-family: var(--font-family-code);
					text-align: center;
				}
			}
		}
	}
}	

pdn-level {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	text-align: center;
}
img, video {
	height: auto;
	max-width: 100%;
}
fieldset {
	border: none;
	display: grid;
	grid-template-columns: .2fr .4fr .4fr;
	column-gap: .5rem;
	row-gap: .5rem;
	& input, & textarea, & button {
		padding: .5rem;
		margin: .2rem;
		grid-column: 2 / 4;
		border-radius: 4px;
		border-width: 1px;
	}
	& label {
		justify-self: end;
		padding: .2rem;
		margin: .2rem;
		font-weight: 700;
	}
	& button {
		grid-column: 2 / 3;
		padding: 1rem;
		background-color: var(--purple);
		color: var(--white);
		border-color: transparent;
		max-width: 10rem;
		cursor: pointer;
	}
	& div {
		justify-self: end;
	}
	@media screen and (max-width: 600px) {
		grid-template-columns: 1fr;
		& input, & label, & textarea, & button {
			grid-column: 1;
			justify-self: start;
			width: 95%;
		}
	}
}

footer {
	margin: 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	& a {
		color: var(--text-color);
	}
}










img[alt="Pääikkuna"] {
	background-image: url('/png/main_annotation_w_hu_a8bcefe6cef4f45f.83791f891292d688446ce77a3e62aac96b6643a5d14eeca953ac1adda91541c8.png');
	@media (prefers-color-scheme: light) {
		background-image: url('/png/main_annotation_hu_f4dbe8f63eb86a62.6466ce3fbde95fe042c9489902c69f20a44479b8f9fe21c04f84def69bcfc249.png');
	}
	@supports(background-image: url('/png/main_annotation_w.dbb84b947f8cdbda7964b5115587addf1c7bfd9cb3f4d452fa275a0c6232d861.webp')) {
		background-image: url('/png/main_annotation_w.dbb84b947f8cdbda7964b5115587addf1c7bfd9cb3f4d452fa275a0c6232d861.webp');
		@media (prefers-color-scheme: light) {
			background-image: url('/png/main_annotation.2667e2deae55fc32c53109b2b6779baf9ceecca0474309a07c54029f4edd3d47.webp');
		}
	}
}
img[alt="Työkalut"] {
	background-image: url('/png/tool_annotation_w_hu_89168854a314e133.d7b6c543329de78ea39475fe743dac1be74dd9082148e2361be942e2d64cfd4e.png');
	@media (prefers-color-scheme: light) {
		background-image: url('/png/tool_annotation_hu_f0619bf902c93511.23f705b3e580bd2415d5a14ae8fa47c9173aec002b2890882db6aebb20d1d099.png');
	}
	@supports(background-image: url('/png/tool_annotation_w.bc3eb7678036deed5a269817bbb4f5115bec2901e19bda29d1532771a83d567a.webp')) {
		background-image: url('/png/tool_annotation_w.bc3eb7678036deed5a269817bbb4f5115bec2901e19bda29d1532771a83d567a.webp');
		@media (prefers-color-scheme: light) {
			background-image: url('/png/tool_annotation.6892dced53810390d6d771137a76934ac829536503cb4aa938a7a48ed118739a.webp');
		}
	}
}

.sr {
	border: none;
    clip: rect(0,0,0,0);
    height: .01em;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: .01em;
}

picture {
	display: flex;
	justify-content: center;
}

@media print {
	header, nav {
		display: none;
	}
	main {
		padding: 0;
	}
}

h2#palaute {
	display: none;
}