@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&family=Roboto&family=Rouge+Script&family=Source+Serif+Pro:ital,wght@0,300;0,400;1,300&family=Elsie&display=swap');

body {
	margin:0;
	font-family:'Verdana',serif;
	font-size:12.5px;
	line-height:1.75;
	color:#333;
    background-color: #dfceb3;
    background-image: url('https://lasikuu.net/goldwillow/k/02bg.png');
}

a {color:#697e41; text-decoration:underline; font-weight:bold;}
a:hover {text-decoration:none;}

* {
    box-sizing:border-box;
}

:root {
    --leveys:66%;
}
p {
    margin:22px 0;
}
hr {
    margin:10px 0;
}

/* ------------------------------- PERUSJUTUT ------------------------------- */

.sisalto {
    width:var(--leveys);
    margin:0px auto 60px auto;
    text-align: justify;
    background-color: #e9ddca;
    background-image: url('https://lasikuu.net/goldwillow/k/02bg2.png');
    padding:70px;
    font-weight:normal;
    border-radius: 2px;
    border:5px solid #596148;
}

.ots {
     margin:15px auto;
     padding: 0;
     font-size: 60px;
     font-family: 'Rouge Script', cursive;
     font-weight:550;
     color: #4e5d32;
     text-align: center;
}
.otsikko {
    margin:10px auto;
    width:var(--leveys);
    display:flex;
    justify-content:center;
    padding:20px 0;
}
.otsikko-kukka {
    padding:20px 80px;
}
.otsikko-text {
    text-align:center;
     font-family: 'Rouge Script', cursive;
     font-weight:550;
     color: #4e5d32;
     font-size: 60px;
     text-shadow:1px 1px 3px #aaa;
}

#linkit {
    margin:-70px -70px 0 -70px;
  	background-color:#636c51;
  	font-size:10.5px;
  	letter-spacing:0.5px;
}
#linkit a {
    text-decoration:none;
    font-weight:bold;
}/*
#linkit a::before {
  content: "\00bb \00a0";
  color:#000;
}*/
#linkit ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#linkit li {
    width:20%;
  float: left;
  border-right:1px solid #737d5f;
}

#linkit li:last-child {
  border-right: none;
}

#linkit li a {
  display: block;
  text-align: center;
  padding: 10px 16px;
  text-decoration: none;
  color:#efefef;
}

#linkit li a:hover {p
    text-decoration:underline;
  	background-color:#596148;
}
.footer {
    margin:70px -70px -70px -70px;
  	background-color:#636c51;
  	padding:15px;
  	font-size:10.5px;
  	letter-spacing:0.5px;
  color:#efefef;
  text-align:center;
}

/* -------------------- PONILISTA -------------------- */

.ponilista {
    width:100%;
    margin:40px 0 20px 0;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap:25px;
}
.ponilista-item {
    text-align:center;
    padding:4px 0;
    font-size:13px;
    line-height:1.6;
}
.ponilista-item img {
    border-radius:50%;
    box-shadow:2px 2px 3px #bbb;
    margin-bottom:8px;
    
}
.ponilista-item img:hover {
    opacity:0.95;
}
.huom {
  	background-color:#636c51;
  	border-radius:4px;
  	padding:4px;
  	color:#fefefe;
  	font-size:11px;
    
}

.ponilista2 {
    width:100%;
    margin:40px 0 20px 0;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:25px;
  align-items: center;
}
.ponilista2-item {
    font-size:13px;
    line-height:1.6;
}
.ponilista2-item:nth-child(odd) {
    text-align:right;
}
.ponilista2-item:nth-child(odd) img {
    box-shadow:2px 2px 3px #bbb;
    float:right;
    margin-left:40px;
}
.ponilista2-item:nth-child(even) {
    text-align:left;
}
.ponilista2-item:nth-child(even) img {
    box-shadow:2px 2px 3px #bbb;
    float:left;
    margin-right:40px;
}
.ponilista2-item img {
    border-radius:3px;
    box-shadow:2px 2px 3px #bbb;
    
}
.ponilista2-item img:hover {
    opacity:0.95;
}


/* -------------------- PONISIVU -------------------- */

.vh {
    text-align:center;
     margin:40px auto -50px auto;
    font-size:10.5px;
}
.vh a {
}
.ptflex {
    margin:30px auto;
    width:100%;
    display:flex;
  align-items:center;
  justify-content: center;
}
.ptflex-item {
}
.ptflex-item:first-child {
    flex:1;
    text-align:right;
    padding:0 20px 0 40px;
}
.ptflex-item:last-child {
    flex:1.5;
    text-align:left;
    padding:0 40px 0 20px;
}
.ptflex-item img {
    border-radius:3px;
    box-shadow:2px 2px 3px #bbb;
    margin:4px;
    
}
.pt {
    margin:20px auto;
	background-color: #c9b596;
	border-spacing: 3px;
	border-collapse: separate; 
	text-align:left;
}
.kys {
    width:20%;
	padding:4px 8px;
	font-weight: bold;
    background-color:#d6c4a8;
	color: #586936;
}
.vas {
    width:30%;
	padding:4px 8px;
	background-color: #dfceb3;
	padding-left: 10px;
}
.geno, .info {
    padding:0 2px;
    color:#777;
    font-style:italic;
    font-size:11px;
}
.sukutaulu {
    margin:20px auto;
	width: 100%;
	text-align: left;
	background-color: #c9b596;
	border-spacing:3px;
	border-collapse:separate; 
}
.sukutaulu td {
    padding:5px 8px;
    line-height:1.4;
}
.i {
    background-color:#d6c4a8;
    
}
.e {
	background-color: #dfceb3;
    
}

.lista {
    width: 100%;
    margin:20px auto;
	background-color: #c9b596;
	border-collapse:collapse; 
	border: 3px solid #c9b596;
        
}
.lista th {
    background-color:#d6c4a8;
    padding:4px 8px;
}
.lista tr {
    border-top:1px solid #d6c4a8;
}
.lista td {
	background-color: #dfceb3;
    padding:4px 8px;
}



/* ------------------------------- KUVAT ------------------------------- */

.kg {
    margin:30px 10px 10px 10px;
    border-radius:3px;
    box-shadow:2px 2px 3px #bbb;
}
.kuvagrafiikalla {
    width:250px;
    height:200px;
    margin:20px;
    float:right;
    background-image: url('https://lasikuu.net/goldwillow/k/02graf.gif');
    background-repeat:no-repeat;
}
.kuvagrafiikalla-kuva {
    border-radius:3px;
    box-shadow:2px 2px 3px #bbb;
}



/* ------------------------------- HOOT ------------------------------- */

h1 {
     margin:40px auto -15px auto;
     padding: 0;
     font-size: 45px;
     font-family: 'Rouge Script', cursive;
     font-weight:550;
     color: #4e5d32;
     text-align: center;
     text-shadow:1px 1px 3px #bbb;
}
h2 { 
    margin:20px 0;
    font-size: 14px; 
    color: #505e2b;
    padding-left:30px;
    background: url(http://lasikuu.net/brightwood/k/08k.gif) no-repeat left top;
}
.lempinimi {
    margin-top:11px;
}
h3 {
    margin:-5px 0;
    font-size: 13px; 
    color: #505e2b;
    
}