@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(/svg/tip.svg);
		}
		& p {
			border-color: var(--success);
			background-color: var(--success);
		}
	}
	& pdn-note {
		& h3 {
			background-image: url(/svg/note.svg);
		}
		& 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(/svg/warning.svg);
		}
		p {
			border-color: var(--danger);
			background-color: var(--danger);
		}
	}
	& pdn-example {
		& h3 {
			background-image: url(/svg/example.svg);
		}
		& p {
			border-color: var(--info);
			background-color: var(--info);
		}
	}

	& tabs-wrapper {
		display: block;
		padding: 1rem 0;
		& ul {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			& li {
				list-style: none;
				& label {
					align-items: center;
					border-bottom: 1px solid var(--inactive);
					color: var(--inactive);
					display: flex;
					justify-content: center;
					margin-bottom: .5rem;
					padding: .5rem;
					vertical-align: top;
					white-space: nowrap;
					&:hover {
						border-bottom-color: var(--purple);
						color: var(--purple);
					}
					cursor: pointer;
				}
				&.active label {
					border-bottom-color: var(--purple);
					color: var(--purple);
				}
			}
		}
		& tabs-content {
			display: block;
			box-shadow: 0 0 5px var(--shadow-color);
			border-radius: 5px;
			padding: 1rem;
			& tab-content {
				display: none;
			}
			& input {
				display: none;
			}
			& input:checked + tab-content {
				display: block;
			}
		}
	}

	& 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;
}