@import url('https://fonts.googleapis.com/css2?family=Girassol&family=Playfair+Display+SC&family=Ms+Madi&family=Source+Serif+Pro:ital,wght@0,300;0,400;1,300&family=Elsie&family=Shantell+Sans:ital,wght@0,300..800;1,300..800&&display=swap');

body {
	margin:0;
	font-family:'Georgia';
	color:#111;
	font-size:15px;
	line-height:1.65;
	/*background-image:url('am-ruskea-3.gif'); 
    background-image:url('https://lasikuu.net/ylston/k/08viiva.gif');*/
background-color: #292e22;
background-image: url('https://lasikuu.net/virtuaali/ranska/k/01bg.png');
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
}

a {color:#43473e; text-decoration:underline; font-weight:bold;}
a:hover {color:;}

* {
    box-sizing:border-box;
}

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

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

.wrapper {
    margin:30px auto 60px auto;
    width:calc(var(--leveys) + 22px);
    background-color:#8c7364;
    padding:10px;
    border:1px solid #68554a;
    border-radius:2px;
    box-shadow:1px 1px 4px #000;
}

.otsteksti {
    margin:30px auto 0 auto;
    width:var(--leveys);
    text-align:center;
  font-family: "Girassol", serif;
    font-weight:bold;
    color:#ede5d9;
    text-shadow:
        -1px -1px 0 #3E2620, 
        1px -1px 0  #3E2620,
        -1px 1px 0  #3E2620,
        1px 1px 0   #3E2620;
    letter-spacing:1.5px;
    font-size:50px;
    
    
}
.otsikko {
    margin:0 auto;
    width:var(--leveys);
    text-align:center;
    font-family: 'Elsie', serif;
    font-weight:bold;
    color:#eee;
    text-shadow:
        -1px -1px 0 #3E2620, 
        1px -1px 0  #3E2620,
        -1px 1px 0  #3E2620,
        1px 1px 0   #3E2620;
    letter-spacing:1.5px;
    background-image:url('https://lasikuu.net/virtuaali/ranska/k/01ots.jpg');
    height:216px;
    line-height:216px;
    border-right:1px solid #68554a;
    border-top:1px solid #68554a;
    border-left:1px solid #68554a;
    border-radius:2px;
    
    
}
.palkki {
    margin:0 auto 0 -30px;
    width:calc(var(--leveys) + 60px);
    text-align:center;
    background-image:url('https://lasikuu.net/prh/k/tig1d.png');
    height:46px;
    line-height:46px;
    border-right:1px solid #68554a;
    border-left:1px solid #68554a;
    border-radius:2px;
    box-shadow:1px 1px 4px #000;
}
.palkki a {
    margin:0 25px;
    font-weight:bold;
    color:#fff;
	text-shadow:1px 1px 1px #111;
}
.palkki a:hover {
    text-decoration:none;
}
.sisalto {
    margin:0 auto;
    width:var(--leveys);
    padding:50px 70px;
    /*background-color:#f5f0e9;*/
    background-color:#ede5d9;
    background-image: url('https://lasikuu.net/prh/k/01bg.png');
    text-shadow:1px 3px 3px #d5cab7;
  box-shadow: inset 0 0 30px #af988a;
}
.footer {
    margin:-22px auto 0 auto;
    width:var(--leveys);
    text-align:center;
    background-image:url('https://lasikuu.net/prh/k/tig1d.png');
    height:46px;
    line-height:46px;
    padding:0 20px;
    color:#fff;
	text-shadow:1px 1px 1px #111;
	font-size:13px;
    border-right:1px solid #68554a;
    border-left:1px solid #68554a;
}
.footer a {
    font-weight:bold;
    color:#fff;
	text-shadow:1px 1px 1px #111;
}
.nimmari {
  font-family: "Ms Madi", cursive;
  font-weight: 600;
  font-style: normal;
  font-size:28px;
  color:#8c7364;
}


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

    .grid-container {
        margin:20px auto;
      display: grid;
    grid-template-columns: 1fr 1fr 1fr;
      gap: 15px;
    }

    .grid-item {
      display: block;
      text-align:center;
      padding: 20px;
    background-color:#af988a;
      border-radius: 10px;
      transition: transform 0.2s, box-shadow 0.2s;
    box-shadow:3px 3px 3px #ccc;
    text-decoration:none;
    text-shadow:none;
    border:1px solid #8c7364;
    }
    .grid-item img {
        border-radius:50%;
        margin-bottom:5px;
    border:1px solid #8c7364;
    box-shadow:0px 0px 3px #666;
    }

    .grid-item:hover {
      transform: translateY(-5px);
    box-shadow:5px 5px 5px #ccc;
    }

    .grid-item h3 {
      margin: 0;
    }

    .grid-item p {
      margin: 0;
      font-weight:normal;
    }
    
.ponilista {
    margin:40px auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
}

.ponilista-item {
    display: block;
    text-align:center;
    padding: 20px;
    border-radius: 20px;
}
.ponilistad-item img {
    border-radius:50%;
    margin-bottom:20px;
    box-shadow:3px 3px 3px #ccc;
}

.ponilista-item h3 {
    margin: 0;
}

.ponilista-item p {
    margin: 0;
}

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

.sukutaulu {
    margin:30px auto;
    width:100%;
    border-collapse:separate;
    border:1px solid #68554a;
    border-radius:2px;
    box-shadow:3px 3px 3px #ccc;
    background-color:#8c7364;
}
.sukutaulu td {
    width:50%;
background-color: #a28b7e;
    border:1px solid #68554a;
    padding:10px 15px;
    line-height:1.4;
    text-shadow:1px 1px 3px #b3a094;
}
.info {
    margin:0 4px;
background-color: #8c7364;
font-size:11px;
padding:2px 4px;
border-radius:3px;
color:#eee;
text-shadow:none;
letter-spacing:1px;
border:1px solid #68554a;
    
}
.boxes-container {
    margin:20px auto;
    width:80%;
    max-width:100%;
  display: flex;
  flex-direction: row;
  gap: 10px;
  overflow-x: auto;
  white-space: nowrap;
  justify-content: flex-start;
}
.boxes-item {
    text-align:center;
  flex:1;
}

/* -------------------------------- REUNAT  ----------------------------------- */

.reunat {
    margin:0px 10px 25px 10px;
    border:3px double #7d634a;
    border-radius:2px;
    box-shadow:3px 3px 3px #ccc;
}
.isokuva {
    margin:0px;
    border:1px solid #8c7364;
    border-radius:3px;
    box-shadow:3px 3px 3px #ccc;
}
.isokuva:hover {
    box-shadow:5px 5px 5px #ccc;
    transition: all 0.7s ease-in-out;
}
.kuvaoik {
    margin:0 0 30px 30px;
    float:right;
    border:1px solid #8c7364;
    border-radius:3px;
    box-shadow:3px 3px 3px #ccc;
}


/* -------------------------------- REUNAT  ----------------------------------- */

.lappu {
    margin:20px 0;
    width:305px;
    height:300px;
    background-image:url('https://lasikuu.net/virtuaali/ranska/k/lappu.png');
    background-repeat:no-repeat;
    padding:7px 20px 20px 40px;
    overflow-y: scroll;
    font-size:13px;
  font-family: "Shantell Sans", cursive;
  line-height:1.8;
}


/* -------------------- TOOLTIP -------------------- */

.tooltip {
  position: relative;
  display: inline;
  cursor: help;
  font-size:12px;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 150px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  font-size:13px;
  text-shadow:none;
  font-weight:normal;
}

.tooltiptext {
}

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

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

h1 {
    text-align:center;
  font-family: "Girassol", serif;
    margin:0 0 20px 0;
    font-size:30px;
    color:#50312a;
}
h2 {
    background: url(http://lasikuu.net/ab/k/19h1.png) no-repeat left center;
    padding:0 0 0 30px;
    text-align:left;
  font-family: "Girassol", serif;
    color:#50312a;
}