@import url("https://fonts.googleapis.com/css2?family=Alex+Brush&family=Playfair+Display:ital@0;1&display=swap");

      body {
        margin: 0 auto;
        background-color: #fbf8f1;
        font-family: "Playfair Display", serif;
        height: 100%;
        color: #6b4f1f;
      }
      
      #palkki {
        width: 300px;
        height: 100%;
        min-height: 100%;
        background-color: #e9dac1;
        float: left;
        border-right: 1px solid #ebe2d3;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        background-attachment: fixed;
        background-image: url(https://i.imgur.com/HrIQoWj.jpg);
        background-size: cover;
        color: #9a8b72;
        padding: 10px;
      }
      
      #palkki a {
        color: #a6854e;
        text-decoration: none;
      }
      
      .copy {
        position: absolute;
        font-size: 12px;
        bottom: 0;
        width: 280px;
        text-align: center;
      }
      
      #palkki a {
        border: 0;
      }
      #palkki h1 {
        margin-top: 120px;
        text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
        width: 100%;
        text-align: center;
        font-size: 52px;
        color: #fff;
      }
      
      #palkki h3 {
        margin: 0;
        margin-top: -15px;
        width: 100%;
        text-align: center;
        letter-spacing: 2px;
      }
      
      #palkki ul {
        padding: 0;
        margin: 0;
        margin-top: 140px;
        width: 100%;
      }
      
      #palkki ul li {
        list-style: none;
        width: 100%;
        text-align: center;
        font-size: 22px;
        padding: 5px;
      }
      
      #palkki ul li a {
        color: #b49f79;
        text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
        transition: 0.4s;
      }
      
      #palkki ul li a:hover {
        color: #fff;
        text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
        transition: 0.4s;
      }
      
      h1 {
        color: #54bab9;
        font-size: 42px;
        font-family: "Alex Brush", cursive;
        margin: 0;
        margin-bottom: 10px;
      }
      
      h2 {
        font-weight: normal;
        color: #54bab9;
        margin: 0;
        margin-bottom: 10px;
      }
      
      #sisalto {
        height: 100%;
        min-height: 100%;
        margin-left: 300px;
        width: calc(100% - 300px);
        float: left;
        display: flex;
        flex-direction: column;
	line-height: 1.5;
      }
      
      section {
        height: 100%;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
      }
      
      article {
        width: 90%;
        max-width: 900px;
        text-align: justify;
        padding: 20px;
        margin: 20px;
      }
      
      .clear {
        clear: both;
      }
      
      .koriste {
        margin: 5px 10px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
        height: 330px;
        width: 240px;
        object-fit: cover;
        opacity: 0.5;
        transition: 1s;
        border: 5px solid #fff;
      }
      
      .left {
        float: left;
      }
      
      .right {
        float: right;
      }
      
      .koriste:hover {
        opacity: 1;
        transition: 1s;
      }
      
      a {
        color: #6b4f1f;
        text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
        text-decoration: none;
        border-bottom: 1px solid #9a8b72;
      }
      
      a:hover {
        color: #54bab9;
      }
      
        @import url("https://fonts.googleapis.com/css2?family=Lora&family=Source+Sans+Pro:wght@300;400;600&display=swap");

#perustiedot {
  width: 100%;
  border-top: 10px solid #fff;
  border-bottom: 10px solid #fff;
  background-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
  line-height: 2;
}

#perustiedot img {
  border: 5px solid #fff;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  margin-top: -45px;
  margin-bottom: -45px;
  max-height: 400px;
}

#perustiedot td {
  padding: 10px;
  padding-left: 40px;
}

#perustiedot th {
  font-family: "Lora", serif;
  padding-left: 40px;
  background-color: rgba(255, 255, 255, 0.6);
}

.nimi {
  padding-left: 40px;
}

.galleria {
  max-width: 180px;
  border: 2px solid #fff;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
}



/* SUKUTAULUTAULUKON TYYLIMÄÄRITTELYT */

#sukutaulu {
	width: 100%;
	background:#fff; /* sukutaulun taustaväri  */
	border-collapse:collapse;
}
#sukutaulu td {
	padding: 10px 15px;
	border: 1px solid #ccc; /* sukutaulun reunojen väri */
}
#sukutaulu strong {
	padding-right:10px;
	font-style:italic;
	font-family: 'Merriweather', serif;
	color:#28636e;
}

/* KISAKALENTERITAULUKON TYYLIMÄÄRITTELYT */

#kisakalenteri {
	width: 100%;
	background:#fff; /* kisakalenterin taustaväri */
	border-collapse:collapse;
}
#kisakalenteri td {
	padding: 15px;
	line-height:1.6;
	border: 1px solid #ccc; /* kisakalenterin reunojen väri */
	vertical-align:top;
}
#kisakalenteri .eka {
	padding: 5px 10px;
	background:#eee;  /* kisakalenterin taustaväri */
	font-size: 14px;
	letter-spacing:1px;
}