@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Xanh+Mono&display=swap');

a {text-decoration: none; color:#415a23;}
a:visited {color:#12560d;}
a:hover {text-decoration: none; color:#a3d05b;}


body {
	background: #fff url(https://i.imgur.com/Qv740AS.png) fixed no-repeat;
	text-align: justify;
	margin: 20px 0;
	font-family: arial, sans-serif;
	font-size: 12px;
	color:#352a22;
}

#paa {
	width: 976px;
	min-height: 200px;
	margin: 0 auto;
	background: url(https://i.imgur.com/xjlU2IL.jpg) repeat-y;
	-moz-box-shadow: 0 0 5px #a1825c;
	-webkit-box-shadow: 0 0 5px #a1825c;
	box-shadow: 0 0 5px #a1825c;
	position:relative;z-index:1;
	border: 6px solid #f4f1e6;
}
#sisaosa {
	width: 976px;
	background:url(kuva.jpg) no-repeat;
	min-height: 388px;
	padding-top: 1px;
}
#linkit {
	margin: 30px 0 0 20px;padding:0;list-style:none;
	width: 200px;
	text-align:center;
}
#linkit li {margin: 15px 0;}
#linkit a {
	text-align:center;
	color:#806d5d;
	font-family:"trebuchet ms",arial,sans-serif;
	letter-spacing:1px;
	font-size: 19px;
	text-decoration:none;
	text-transform:uppercase;
	padding: 5px 15px;
}
#linkit a:hover {
	color:#43786c;
	background:#fff;
}

h1 {
	color:#3f6e1c;
	font-size: 40px;
	text-align:center;
	font-family: 'Xanh Mono', monospace;
	text-shadow: -1px -1px 1px #82c730, 1px 1px 3px #fff;
}

#vasen {
	width: 180px;
	margin: 0 0 0 10px;
	float:left;
	color: white;
}
.kuvat {
	text-align:center;
}
.kuvat img {
height: auto;
	margin: 5px 0;
}
#oikea {
	width: 680px;
	float:left;
	margin: 0 0 20px 40px;
	line-height:1.6;
	text-align:justify;
}

#isokuva {
	border: 1px solid #839423;
	padding: 1px;
	float:right;
}

#perustiedot {
	width: 700px;
	height: 335px;
	margin: 0 auto;
	border: 0px solid #eee;
	background: url(https://i.imgur.com/QiSmiNV.jpg) no-repeat;
	background-size: contain;
}

.tieto {
	background: url(https://i.imgur.com/8SBdqZF.png), url(https://i.imgur.com/8SBdqZF.png);
width: 300px;
margin: 0px;
padding: 10px;
color: #10261d;
text-shadow: 1px 1px #ede8d9;
font-family: 'Nanum Gothic Coding', monospace;
font-size: 16px;
}

.infokuva {
	width: 340px;
	padding-bottom: 0px;
}
strong {
	color:#557527;}

h2, h3, h4 {
	color:#385b51;
	font-family: 'Xanh Mono', monospace;

}

#tekijanoikeus {
	text-align:center;
	font-size: 11px;
	font-style:italic;
	letter-spacing:1px;
	padding-top: 10px;
}
#tekijanoikeus a:link, #tekijanoikeus a:visited {color:#222;}

#taulu {
	width: 100%;
	background: url(https://i.imgur.com/Tnzfh3O.jpg) center;
padding: 10px;
line-height: 1;
box-shadow: 1px 1px 2px #cbcbcb;
}

#taulu td {
	margin: 0px;
  padding: 5px;
  border-radius: 5px;
}

.suku {
	color: white;

	font-family: 'Nanum Gothic Coding', monospace;
	font-size: 14px;
		color: #395e51;
		background-image: url(https://i.imgur.com/TEQP1lP.png);
		background-repeat: no-repeat;
		background-position: right;
		background-size: contain;
}

.suku a {
	color: #395e51;
}

.suku3 {
	color: white;
	font-family: 'Nanum Gothic Coding', monospace;
	font-size: 14px;
		color: #395e51;
}

.suku3 a {
	color: #395e51;
}

	.vanhemmat {
		color: #1c582d;
			font-family: 'Xanh Mono', monospace;
		font-size: 14px;
		font-weight: 800;
		margin: 0px;
		background-image: url(https://i.imgur.com/TEQP1lP.png);
		background-repeat: no-repeat;
		background-position: right;
		background-size: contain;

}

.vanhemmat a {
	color: #1c582d;
}

.kisa {
color: #1c582d;
font-size: 12px;
font-family: 'Nanum Gothic Coding', monospace;
}

hr {
	border:0;
	border-top: 1px solid #dcb689;
	margin: 20px 0;
}

.box {
  width: 30%; /* three boxes (use 25% for four, and 50% for two, etc) */
  padding: 10px; /* if you want space between the images */
  margin: 10px;
  background: -webkit-linear-gradient(#f1e5e1, #e4ceb6);
  float: left;
		font-family: 'Xanh Mono', monospace;
		font-size: 16px;
}

.pikkukuva1 {
	width: 90px;
  padding:5px;
	background: url(https://i.imgur.com/uh0fGRq.gif);
	transform: rotate(10deg);
	-webkit-transition: all 0.5s ease;
	 -moz-transition: all 0.5s ease;
		 -o-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;
				transition: all 0.5s ease;
	opacity: 1.0;
-webkit-transition: all 1s ease;
	 -moz-transition: all 1s ease;
		 -o-transition: all 1s ease;
		-ms-transition: all 1s ease;
				transition: all 1s ease;
}

.pikkukuva1:hover {
	-webkit-transform: rotate(5deg);
	 -moz-transform: rotate(5deg);
		 -o-transform: rotate(5deg);
		-ms-transform: rotate(5deg);
				transform: rotate(5deg);

}

.pikkukuva2 {
	width: 90px;
  border:1px
  solid #22304f;
  padding:5px;
	background: url(https://i.imgur.com/uh0fGRq.gif);
	transform: rotate(-10deg);
	-webkit-transition: all 0.5s ease;
	 -moz-transition: all 0.5s ease;
		 -o-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;
				transition: all 0.5s ease;
	opacity: 1.0;
	filter: alpha(opacity=100);
-webkit-transition: all 1s ease;
	 -moz-transition: all 1s ease;
		 -o-transition: all 1s ease;
		-ms-transition: all 1s ease;
				transition: all 1s ease;
}

.pikkukuva2:hover {
	-webkit-transform: rotate(-5deg);
	 -moz-transform: rotate(-5deg);
		 -o-transform: rotate(-5deg);
		-ms-transform: rotate(-5deg);
				transform: rotate(-5deg);

}


/** LIGHTBOX MARKUP **/

.lightbox {
	/** Default lightbox to hidden */
	display: none;

	/** Position and style */
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	text-shadow: 0px 0px 3px #000;
	color: #fff;
	}

.lightbox a:link {color:#fff}

.lightbox img {
	/** Pad the lightbox image */
	max-width: 90%;
	max-height: 90%;
	margin-top: 2%;
}

.lightbox:target {
	/** Remove default browser outline */
	outline: none;

	/** Unhide lightbox **/
	display: block;
}