@import url('https://fonts.googleapis.com/css2?family=Allison&family=Great+Vibes&family=Parisienne&family=Pinyon+Script&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Ruthie&family=Sacramento&family=Satisfy&family=Schibsted+Grotesk:ital,wght@0,400..900;1,400..900&family=Ubuntu+Sans+Mono:ital,wght@0,400..700;1,400..700&family=Ubuntu+Sans:ital,wght@0,100..800;1,100..800&family=WindSong:wght@400;500&display=swap');


html {
	background: url(tausta.png) no-repeat fixed;
	background-size: cover;
	font-family: "Schibsted Grotesk", sans-serif;
	font-weight: 100; 
	font-size: 12px; 
	letter-spacing: 1px; 
	color: #766464; 
}



body {
	margin: 0px;
	background-image: linear-gradient(to bottom right, #9e9e9e69,#e9dfdfcf,#9e9e9e2b,#ffffffad,#ffffffad,#9e9e9e2b,#9e9e9e69);
	width: 100%; 
	min-height: 100%; 
	position: absolute;  
}

header {
	margin: 30px auto 0px auto;
	height: 250px;
	width: 900px;
}

.otsikko {
	height: 100%;
	width: 100%;
	object-fit: cover; 
	opacity: 70%; 
	filter: grayscale(40%);
	border-radius: 40px 40px 0px 0px;
	display: block; 
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.75); 
}

.navi {
	display: flex;
	align-items: center;
	width: 900px;
	justify-content: space-evenly;
	padding: 0px;
	margin: 0px;
	list-style-type: none;
	background-color: #e0c8c8;
	border: solid #fdf6f6ab;
	border-width: 5px 0px;
	position: absolute;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); 
}

.navi li {
	margin: 0px 20px; 
	padding: 10px 20px;
	text-transform: uppercase;
	font-size: 12px; 
	text-shadow: 0 0 2px #c6aeae; 
}

h1 {
	font-family: "Great Vibes";
	font-size: 70px; 
	margin: 0px 20px; 
	color: #fff; 
	text-shadow: 0px 0px 3px #b2acac; 
	font-weight: normal; 
}

.sisalto {
	width: 900px; 
	margin: 0px auto; 
	padding: 43px 0px;
	background-color: #fff;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.5); 
}

footer {
	margin: 0px auto;
	width: 1000px;
	text-align: center; 
	font-size: 10px; 
	padding: 10px; 
}


/* fontit */

p {
	margin: 20px 100px; 
	line-height: 25px; 
	text-align: justify; 
}

a {
	text-decoration: none; 
	color: #d88ca7; 
}

em {
	font-style: normal; 
	font-size: 10px; 
	color: #b6adad; 
}

h2, h3, h5 {	
	font-family: "Pinyon Script";
	font-weight: normal; 
	color: #c4a8a8; 
	font-size: 40px; 
	text-shadow: 0 0 3px #d9a6a6; 
}

h2:first-letter, h5:first-letter {
	color: #efadadee; 
}

h2 {
	margin-bottom: 0px; 
}

h3 {
	font-size: 30px;
	margin: 50px 100px 20px 100px;
}

h4 {
	text-transform: uppercase; 
	font-weight: normal; 
	line-height: 20px; 
	color: #d9a6a6;	
	margin: 0px 100px; 
}

h4 em {
	text-transform: none; 
}

h5 {
	margin: 50px 100px 20px 100px;
}

h6 {
    text-transform: uppercase;
    font-size: 12px;
    color: #efadadee;
    letter-spacing: 1px;
}


strong, b {
  font-weight: 700;
}


/* taulukot */

.taulukko {
	background: url(taustakukka.png) no-repeat;
	background-size: 80%; 
	width: 100%; 
	background-position: 50%; 
	text-shadow: 0 0 3px #d9a6a6;
}

.tiedot {
	margin-bottom: 60px; 
	border-bottom: 5px solid #fff; 
	box-shadow: 0 0 3px #e3dbdb; 
	border-collapse: collapse;
}

.tiedot td:nth-child(1) {
	width: 280px;
	padding-bottom: 10px; 
}

.tiedot td, .sukutaulu td, .kisat td, .kasvatit td, .kasvatit th {
	background-color: rgb(250 240 240 / 92%); 
}

.tiedot td {
	vertical-align: top; 
}

.paakuva {
	width: 170px; 
	height: 170px; 
	object-fit: cover; 
	border-radius: 50%; 
	margin: 60px 40px; 
	float: left; 
	border: solid #fff;
	border-width: 0px 5px 5px 5px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.35); 
	opacity: 0.7; 
}

.tiedot ul {
	padding: 0px; 
	line-height: 25px; 
}

.tiedot li, .kasvatus li {
	list-style-type: none; 
}

.kasvatus {
	margin: 20px 100px;
	padding: 0px; 
	line-height: 25px; 
}

.pieni {
	font-size: 10px; 
	margin-left: 50px; 
}

.kasvatit th {
	text-align: left;
	padding: 10px;
}

.kasvatit td {
	padding: 5px 10px;
	border-top: 1px solid rgb(202 189 189 / 30%); 
}

.tiedot li:before, .kasvatus li:before {
	content: '\2618'; 
	margin-right: 13px; 
	color: rgba(0, 0, 0, 0.35); 
	text-shadow: 0 0 3px rgba(0, 0, 0, 0.25); 
	transform: rotate(30deg);
	display: inline-block; 
}

.sukutaulu, .kisat, .kasvatit {
	border-collapse: collapse;
	border-top: 5px solid #fff;
	border-bottom: 5px solid #fff;
	box-shadow: 0 0 3px #e3dbdb;
	margin: 20px 0px;
	line-height: 20px; 
}

.sukutaulu td {
	padding: 10px 15px;
	border: 1px solid rgb(202 189 189 / 30%);
}

.varsat {
	width: 700px; 
	margin: 40px auto; 
	line-height: 25px; 
	border-collapse: collapse; 
	text-shadow: 0 0 3px #d9a6a6;
}

.varsat td {
	border-bottom: 1px solid #eee; 
	padding: 5px 10px;
}

.varsat tr:nth-child(odd) {
	background-color: rgb(239 220 220 / 30%); 
}

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

.varsat td:nth-child(2) {
	width: 20px;
}

.kisat {
	line-height: 25px
}

.kisat td {
	padding: 20px 40px;
	width: 50%; 
	vertical-align: top; 
}

.kisat td:nth-child(1) {
	border-right: 1px solid rgb(202 189 189 / 30%);
}

.kisat p {
	margin: 15px 0px; 
	border-collapse: collapse; 
}

.sijoitukset {
	margin: 20px 0px;
	width: 100%; 
	color: #c1a9a9; 
}

.sijoitukset td {
	padding: 20px 15px;
	line-height: 25px;
	border-bottom: 1px solid #eee;
	width: 50%; 
}

.v {
	text-align: center;
	border-left: none !important; 
}

.o {
	background-color: rgb(232 219 219 / 92%) !important; 
}

.r {
	border-right: none !important;
}

details > summary {
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

summary {
	width: 400px; 
	margin: 0px auto; 
	text-align: center; 
	text-transform: uppercase; 
	color: #d9a6a6; 
	border-bottom: 1px solid #eee; 
	padding-bottom: 5px; 
	cursor: pointer; 
}

details {
	width: 700px;
	margin: auto; 
}

details p {
	margin: 20px 0px; 
}

.galleria {
	width: 700px; 
	margin: 40px auto; 
	text-align: center; 
}

.galleria img {
	border: 5px solid #fff;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.35); 
	opacity: 0.7; 
	margin: 10px; 
	border-radius: 15px; 
}

.galleria img:hover {
	opacity: 1;
	transition: 1s;
}

.listaus {
	display: flex;
	flex-wrap: wrap;
	margin: 40px 50px;
	justify-content: space-between;
}

.hevonen {
	width: 250px; 
	text-align: center; 
	line-height: 25px;
	margin-bottom: 30px; 
	color: #c1a9a9; 
}

.hevonen img {
	margin: 5px; 
	width: 150px; 
	height: 150px; 
	object-fit: cover; 
	border-radius: 50%;  
	border: solid #fff;
	border-width: 0px 5px 5px 5px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.35); 
	opacity: 0.7; 
}

.hevonen a {
	text-transform: uppercase; 
	font-weight: normal;
	color: #d9a6a6;
	text-shadow: 0 0 3px #d9a6a6;
}