@import url('https://fonts.googleapis.com/css2?family=Droid+Serif&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&family=WindSong:wght@400;500&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

body {
    background-color: #efe7dc;
    background-image: url('https://lasikuu.net/ylston/k/02cbg.png');
  font-family: "Source Sans 3", sans-serif;
    line-height:1.9;
    font-size:14.5px;
    height: 100%;
    color:#333;
}
* {
    box-sizing: border-box;
}
:root {
    --leveys:1250px;
}
a {color:#7b4042;font-weight:bold;text-decoration:none;}
a:hover {color:#956668;transition: all 0.2s ease-out;}

p {
    margin:20px 0;
}

/* -------------------- PERUS -------------------- */


.otsikko {
    margin:40px auto 0 auto;
    width:var(--leveys);
    height:200px;
    line-height:200px;
    position:relative;
  font-family: "WindSong", cursive;
    color:#f0efec;
    text-shadow:1px 1px 3px #000;
    text-align:center;
    padding-right:60px;
    font-size:50px;
    background-color:#642021;
    background-image:url('https://lasikuu.net/ylston/k/02bgflip.jpg');
    background-position: center top;
    border-radius:50px 50px 0 0;
}

.ots1 {position:absolute;bottom:0;left:0;z-index:1;}

.sisalto {
    width:var(--leveys);
    margin:0 auto;
    padding:20px 80px 40px 80px;
    background-color:#f5f4f2;
    /*
   -moz-box-shadow:    inset 0 0 30px #ddd8d4;
   -webkit-box-shadow: inset 0 0 30px #ddd8d4;
   box-shadow:         inset 0 0 30px #ddd8d4;
   */
}
.footer {
    width:var(--leveys);
    margin:0 auto 60px auto;
    text-align:center;
    background-color:#7c4143;
    border-radius:0 0 50px 50px;
    color:#f0efec;
    height:50px;
    line-height:50px;
  font-family: "Playfair Display", serif;
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:12px;
}

/* -------------------- LINKKIPALKKI -------------------- */

#linkit {
    width:var(--leveys);
    margin:0 auto;
    background-color:#cac0b1;
    height:50px;
    line-height:50px;
  text-align: center;
}
#linkit a {
    text-align:center;
  display: inline-block;
  width:20%;
  padding:0 40px;
  text-shadow:none;
  font-family: "Playfair Display", serif;
  text-transform:uppercase;
  letter-spacing:1px;
  color:#5b1b1c;
}
#linkit a:hover {
    background-color:#d5cdc1;
    transition: all 0.2s ease-out;
}


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

.ponilista {
    margin:-5px 0;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    line-height:1.8;
}
.ponilista-item {
    padding:5px 3px;
	font-size:12px;
}

.ponilista-item a {
	font-size:14px;
}
.ponilista-item a:hover {
}
.ponilista-item img {
    float:left;
    margin:5px 20px 5px 0;
    box-shadow:1px 1px 3px rgb(223,215,203);
    border-radius:5px;
    border:5px solid rgb(223,215,203);
}
.ponilista-item img:hover {
    opacity:0.9;
    transition: .1s ease-in;
}
.ponilista-item p {
    margin:10px 0 -10px 0
}


/* -------------------- HEPPASIVU -------------------- */

.ptflex {
    width:98%;
    margin:55px auto 35px auto;
    display:flex;
    padding:0 30px;
  align-items: center;
}
.ptflex-item:first-child {
    flex:25%;
}
.ptflex-item:first-child img {
    box-shadow:1px 1px 3px rgb(223,215,203);
    border-radius:5px;
    border:5px solid rgb(223,215,203);
}
.ptflex-item:first-child img:hover {
    transition: all 0.2s ease-out;
}
.ptflex-item:last-child {
    flex:75%;
}

.meriitit {
    margin:-30px 0 -25px 0;
    font-size:16px;
    color:#b6ad9f;
    text-transform:none;
  font-family: "Playfair Display", serif;
}
.meriitit a {
    font-weight:normal;
    color:#b6ad9f;
}
.geno {
    font-weight:normal;
    color:#b6ad9f;
    font-size:13px;
    padding:0 4px;
}



.pt {
    margin-top:-5px;
	width: 100%; 
	border-spacing: 3px;
	border-collapse: collapse; 
	text-align:left;
    border-top:1px solid rgb(223,215,203);
}
.kys {
    width:35%;
	padding:5px 20px;
/*background: rgb(223,215,203);
background: linear-gradient(0deg, rgba(223,215,203,1) 0%, rgba(233,225,214,1) 100%);*/
    border-radius:3px;
    border-bottom:1px solid rgb(223,215,203);
  font-family: "Playfair Display", serif;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:1px;
  text-align:right;
}
.vas {
	padding:5px 8px;
	padding-left: 10px;
    border-bottom:1px solid rgb(223,215,203);
}
.sukutaulu {
	width: 100%;
	margin:10px 0;
	text-align: left;
	border-spacing:;
	border-collapse:collapse; 
    border-top:1px solid rgb(223,215,203);
}
.sukutaulu td {
    padding:6px 10px;
    line-height:1.4;
    border-bottom:1px solid rgb(223,215,203);
}
.i {
    
}
.e {
}
.info {
    margin:0 2px;
  font-family: "Playfair Display", serif;
    background-color:#e3ddd5;
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:11px;
  padding:2px 4px;
  border-radius:5px;
}
.sukutaulu small a {
    color:#333;
    font-weight:normal;
}
.lista {
    width:100%;
    margin:20px auto;
	border-spacing:;
	border-collapse:collapse; 
    border-top:1px solid #e6e0d9;
}
.lista tr {
    border-bottom:1px solid #e6e0d9;
    background-color:#fcfbfb;
    
}
.lista tr:hover {
    background-color:#f2f0ec;
    transition: all 0.2s ease-out;
}
    


.lista th {
    font-weight:normal;
    text-align:left;
  font-family: "Playfair Display", serif;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1px;
    background-color:#f2f0ec;
}

.lista td {
}

.lista th, .lista td {
    padding:4px 10px;
}
/*
.lista tr:nth-child(even) {background: #f1eeea;}
.lista tr:nth-child(odd) {background: #ebe7e2;}
*/
.alaviiva {border-bottom: 1px solid #d3c7be;}
.vasviiva {border-left: 1px solid #d3c7be;}
.vasalaviiva {border-bottom: 1px solid #d3c7be;border-left: 1px solid #d3c7be;}




    

/* -------------------- MUUT -------------------- */

.boksi {
    width:100%;
    margin:0 auto;
    display:flex;
}
.boksi-item:first-child {
    padding-right:20px;
    flex:1;
}
.boksi-item:last-child {
    padding-left:20px;
    flex:1;
}
.boksi:has(h2) {
  /* Styles to apply when the div contains an h2 */
  margin:-20px auto -0 auto;
}
.perinteiset {
    width:100%;
    margin:-20px auto;
    display:flex;
}
.perinteiset:first-child {
    padding-right:20px;
    flex:1;
}
.perinteiset:last-child {
    padding-left:20px;
    flex:1;
}


/* -------------------- KUVAREUNAT -------------------- */

.isokuva {
    margin:0 10px;
    max-width:100%;
    border-radius:2px;
    box-shadow:0px 0px 1px #321011;
}
.kg {
    margin:0 7px;
    box-shadow:1px 1px 3px rgb(223,215,203);
    border-radius:3px;
    border:3px solid rgb(223,215,203);
}
.kg:hover {
    opacity:0.9;
    transition: all 0.2s ease-out;
}
.etukuva {
    float:right;
    margin:40px 0 30px 40px;
    box-shadow:1px 1px 3px rgb(223,215,203);
    border-radius:7px;
    padding:7px;
    background-color:rgb(223,215,203);
    background-image: url('https://lasikuu.net/ylston/k/02cbg.png');
}

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

h1, h2, h3 {
  font-family: "Playfair Display", serif;
    text-transform:uppercase;
}
h1 {
    width:100%;
    margin:20px 0;
    color:#444;
    font-size:24px;
    letter-spacing:1px;
}
h2 {
    margin:30px 0;
    font-size:15px;
    padding:0px 10px;
    color:#444;
background-color: #e3ddd5;
letter-spacing:1px;
}
.ponilist {
    background:#eee4dc;
    color:#743637;
    border-top:1px solid #d3c7be;
    border-bottom:1px solid #d3c7be;
    border-radius:0px;
}
h3 {
  font-family: "Playfair Display", serif;
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:normal;
}


/* -------------------- SCROLLBAR JA MAALAUS -------------------- */

/* -------------------- HOVER INFO -------------------- */

.tooltip {
    position: relative;
    display: inline-block;
    cursor: help;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width:240px;
    font-size:12px;
    line-height:1.3;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 1;
}

.tooltiptext {
    font-family:'Open Sans';
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}


/* -------------------- PIENET NAYTOT -------------------- */

/* mobiili */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
  .varjo {
      width:100%;
      padding:0;
  }
}

/* poytakone reso alle 1500px */
@media screen and (max-width: 1500px) {
  .varjo {
      width:80%;
  }
  .ots1, .ots2 {
      height:180px;
  }
}