@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@400&family=Barlow:wght@300&family=Vidaloka&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Babylonica&display=swap');

html {
	background: url(tausta5.jpg) no-repeat fixed;
	background-size: cover;
}

body {
	margin: 0px; 
	font-family: "Barlow", sans-serif; 
	font-size: 12px; 
	letter-spacing: 2px;
	word-spacing: 3px;
	line-height: 24px;
	color: rgba(63, 76, 95, 0.6);
}

#pohja {
	position: absolute; 
	left: 300px;
}

#sivu {
	background-color: rgba(255, 255, 255, 0.8); 
	width: 300px;
	height: 100%; 
    margin-left:-300px;    
	position: absolute; 
	border: solid #fff; 
	border-width: 0px 5px; 
	text-align: center; 
}

#sivu em {
	color: rgb(101 101 101 / 40%); 
}

#sisalto { 
	background-color: rgba(255, 255, 255, 0.98); 
	padding: 40px 0px;
	width: 1000px; 
	min-height: 100%; 
}

img {
	opacity: 0.8;
	border-radius: 4px;
	border: 1px solid #dcd8d8;
	box-shadow: 0px 0px 8px rgb(198 182 193);
}

img:hover {
	opacity: 1; 
	transition: 1.5s;
}

.kuvitus, .koriste {
	text-align: center; 
	margin: 40px 0px 0px 0px;
}

.kuvitus img {
	margin: 0px 10px; 
}

.koriste img {
	height: 150px; 
	opacity: 0.8;
	filter: grayscale(50%);
	margin: 0px 20px;
}


/* navigaatio */

#sivu span {
	font-family: "Vidaloka", serif; 
	font-size: 20px; 
	color: rgb(108 128 144 / 30%);
}

#sivu p {
	margin: 30px 50px; 	
}

ul {
	list-style-type: none; 
	text-align: center; 
	padding: 0px; 
	margin: 80px 0px; 
}

li a {
	margin: 10px; 
	font-size: 22px; 
	letter-spacing: 2px; 
	font-family: "Vidaloka", serif;
	color: rgba(0,0,0,.3); 
}

li a:hover {
	letter-spacing: 10px; 
	color: rgb(228, 214, 145); 
	transition: 1.5s;
}



/* fontit */

h1 { /* tallin nimi */
    font-family: "Vidaloka", serif;
    color: rgb(255, 255, 255);
	text-shadow: 0px 0px 1px rgba(175, 164, 171, 1); 
    font-size: 150px;
    text-align: center;
    font-weight: normal; 
    margin: 0px;
	padding-top: 8px;
    letter-spacing: -15px; 
    }

.logo {
	border: 8px solid rgba(255, 255, 255, 0.8); 
	width: 195px; 
	height: 195px; 
	padding: 0px;
	margin: 20px auto; 
	border-radius: 50%;
	line-height: normal; 
}

h2 { /* ponin nimi */
	font-family: "Vidaloka", serif;
    margin: 0px 0px 8px 0px;   
    text-shadow: 0px 0px 3px rgba(239, 229, 236, 1);
    font-size: 35px; 
    font-weight: normal; 
    color: rgb(228, 214, 145);  
	width: 550px; 
	text-align: center; 
}

h3 { /* ok otsikko */
	font-weight: normal; 
	font-size: 20px; 
	text-shadow: 0px 0px 3px rgba(0,0,0,.15); 
	color: rgba(0,0,0,.3); 
	margin: 20px 100px; 
}

h3 i {
	color: rgb(228 219 177); 
	text-shadow: 0px 0px 3px rgba(239, 229, 236, 1);
	font-size: 17px;
	margin: 0px 10px;
}

p {
	margin: 30px 80px; 	
	text-align: justify; 
}

em, .kasvatit td:nth-child(1), .kasvatit td:nth-child(2), .kasvatit td:nth-child(4), .evm {
	font-family: "Assistant";
	font-style: normal; 
	color:  #ccc;
	font-size: 10px; 
}

.pk em {
	margin-left: 145px; 
}

.pk h3 {
	margin: 20px 20px 0px 99px;
}


.quote {
	text-align: center; 
	white-space: pre; 
	text-transform: uppercase;
	margin: 0px 50px 50px 50px;
	color: #c7d0cb; 
	text-shadow: 0 0 3px rgba(0,0,0,.15); 
	font-size: 11px; 
}

a {
	text-decoration: none; 
	color: rgb(214 174 203); 
}

a:hover {
	color: rgba(63, 76, 95, 0.8); 
}

.evm {
	background-color: rgba(239, 229, 236, 0.5);
	border: 1px solid #eee; 
	border-radius: 3px; 
	font-size: 10px; 
	text-shadow: none; 
	min-width: 80px;
	height: 22px; 
	padding: 0px 8px;
	display: inline-block; 
}

/* listaukset */

.heppalista {
	width: 900px;
	margin: 20px auto; 
	border-spacing: 0px 7px; 
}

.heppalista td {
	background-color: rgba(239, 229, 236, 0.5);
	border: solid #eee; 
	border-width: 1px 0px; 
	font-size: 10px; 
}

.heppalista img {
	height: 40px; 
	box-shadow: none; 
	display: block; 
	border: none; 
	border-radius: 3px 0px 0px 3px; 
	margin: -2px; 
	border-right: 8px solid rgba(0,0,0,.15); 
}

.heppalista td:nth-child(1) {
	width: 52px; 
}

.heppalista td:nth-child(2) {
	padding-left: 20px; 
	text-transform: uppercase; 
	text-shadow: 0 0 2px rgb(52 79 65 / 60%); 
	color: rgb(52 79 65 / 60%); 
}

.heppalista td:nth-child(3), .heppalista td:nth-child(4), .heppalista td:nth-child(5) {
	color: rgba(0,0,0,.3); 
}

.heppalista td:last-child {
	border-radius: 0px 3px 3px 0px;
}

.heppalista th { 
	padding: 30px 10px 10px 30px;
	text-align: left; 
	font-family: "Vidaloka", serif;  
    text-shadow: 0px 0px 3px rgba(239, 229, 236, 1);
    font-size: 30px; 
    font-weight: normal; 
    color: rgb(228, 214, 145);  
}

.kasvatit {
	width: 90%; 
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 30px;
	border: double #eee; 
	border-width: 3px 0px;
	padding: 5px;
	border-collapse: collapse; 
}

.kasvatit td {
	padding: 5px 8px; 
}

.kasvatit td:nth-child(1), .kasvatit td:nth-child(2), .varsat td:nth-child(2), .varsat td:nth-child(3) {
	text-align: center; 
	width: 30px; 
}

.kasvatit td:nth-child(1) {
	text-transform: uppercase;
}

/* tablet */

.laatikko {
	width: 100%;
    background-color: rgb(255, 255, 255);
	border-bottom: 1px solid rgba(224, 224, 224, 0.2);
    border-top: 1px solid rgba(224, 224, 224, 0.2);
	padding: 15px 0px;
}

#tiedot, .kisat {
	text-shadow: 0 0 2px rgb(52 79 65 / 60%); 
	text-align: center; 
	text-transform: uppercase; 
	font-size: 10px; 
}

#tiedot em {
	font-family: "Barlow";
}

.gen {
	text-transform: none; 
}

#tiedot img {
	margin: 10px 30px; 
	height: 280px; 
}

#tiedot td:nth-child(2) {
	width: 450px; 
}

#tiedot i, .kisat i {
	color: rgb(234 221 158); 
	text-shadow: 0px 0px 3px rgba(239, 229, 236, 1);
	font-size: 17px;
	margin: 0px 10px;  
}

.nippeli {
	width: 90%; 
	padding: 40px 0px; 
	margin: 0px auto 10px auto; 
	border-bottom: 5px solid rgba(0,0,0,.037); 
}

.nippeli td {
	vertical-align: top; 
}

.rmp {
	opacity: 0.15;
	width: 180px !important; 
	display: block; 
	margin: 35px auto; 
	filter: grayscale(40%);
	box-shadow: none; 
	border: none; 
}

.rmp:hover {
	opacity: 0.2 !important;
}

.kuva {
	width: 200px; 
}

#sukutaulu {
	text-align: left; 
	border-spacing: 10px;
	margin: auto; 
	padding: 0px 20px 20px 20px;
}

#sukutaulu td {
	padding: 5px 10px; 
	background-color: rgba(239, 229, 236, 0.2);
	border: 3px double rgba(238, 238, 238, 0.5);
}

#sukutaulu td:hover {
	box-shadow: 0px 1px 4px #eee inset; 
	border-color: rgba(228, 214, 145, 0.5);
	transition: 1.5s; 
}

#sukutaulu a, .sukulaiset a {
	text-shadow: 0 0 2px rgb(0 0 0 / 20%); 
}

.td1 {
	text-align: center; 
}

.kisat {
    width: 90%; 
    margin: auto; 
    background-color: rgba(239, 229, 236, 0.2);
	border: 3px double rgba(238, 238, 238, 0.5);
	padding-bottom: 20px;
	}

.kisat td {
    vertical-align: top;
    padding: 15px 5px;
    text-align: center; 
}

.stat {
	width: 50%; 
}

.kisat span {
	margin: 3px 0px; 
	min-width: 180px; 
}

.nly, .varsat {
	width: 90%; 
	margin: auto; 
	border-collapse: collapse;
    background-color: rgba(239, 229, 236, 0.2);
	border: solid rgba(238, 238, 238, 0.5);
	border-width: 0px 1px 1px 1px;
	color: #ccc; 
	text-transform: uppercase; 
	font-size: 10px; 
}

.nly td:nth-child(1) {
	width: 130px;
}

.nly td:nth-child(2) {
	width: 50px;
}

.nly td:nth-child(3) {
	width: 250px;
}

.varsat {
    width: 90%; 
    margin: auto; 
    background-color: rgba(239, 229, 236, 0.2);
	border: 1px solid rgba(238, 238, 238, 0.5);
	border-collapse: collapse;
}

.varsat td, .nly td {
	padding: 8px 20px; 
}

.varsat td:nth-child(1) {
	width: 70px;
}

.varsat td:nth-child(2) {
	text-transform: uppercase; 
	width: 30px;
}

.varsat td:nth-child(3) {
	width: 10px;
	text-transform: none; 
}

.varsat tr:nth-child(even), .nly tr:nth-child(even), .kasvatit tr:nth-child(even) {
	background-color: rgba(239, 229, 236, 0.2);
}

.pk, .sukulaiset {
    width: 800px; 
    margin: auto; 
    background-color: rgba(239, 229, 236, 0.2);
	border: 3px double rgba(238, 238, 238, 0.5);
}

.sukulaiset {
	column-count: 2;
	padding: 20px 50px;
}

.sukulaiset p {
	margin: 20px;
}


/* tabit */

.piilodiv {
    display:none; 
}

.trigger {
	cursor: pointer; 
	width: 200px; 
	margin: 20px;  
	text-shadow: 0px 0px 3px rgba(239, 229, 236, 1); 
	font-size: 25px; 
	color: rgb(228, 214, 145); 
	text-transform: uppercase; 
}

.trigger:hover {
	color: rgba(63, 76, 95, 0.8); 
	transition: 1.5s; 
}

.tab {
	text-align: center; 
	margin: 60px 20px 20px 20px;
}

a.spoileri {
	font-weight: bold;
	font-size: 11px;
}

a.spoileri:hover {
    cursor:pointer;
}

.spoileri {
	width: 90%; 
	margin: 20px auto; 
	column-count: 4;
	font-size: 11px;
	font-family: "Assistant";
	color: rgba(0,0,0,.3);
}