@import url('https://fonts.googleapis.com/css2?family=Italianno&display=swap');

body {
       background: #0a8dad;
     
       font-family: "Indie Flower", cursive;
       }

a {
    color: #000;
}

a:hover {
    text-decoration: none;
}
      

    h1 {
        font-weight: 500;
        color: #ffffff;
        margin: 0;
        font-size: 400%;
        line-height: 0.9;
        position: absolute;
        right: 5px;
        bottom: 5px;
        text-align: right;
        text-shadow: 0px 0px 8px #000000;
        font-family: "Italianno", cursive;
        font-weight: normal;
    }

    h2 {
       
        font-family: "Italianno", cursive; 
        font-size: 300%;
        text-align: center;
        font-weight: normal;
       
       

    }

    .oikealla {
        float: right;
        margin-left: 40px;
    }

.container {
    background: #fdf4e2;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;}

img {
   border: 10px solid #a5e8fc;
   margin: 10px;
   box-shadow: 3px 6px 10px #739ce7;}

  a img:hover {
    box-shadow: 0px 0px 10px #abc4e6;

   }

.linkit a {
    margin: 10px;
   
}

.linkit {
    background: #a5e4f7;
    padding: 4px;
    margin-bottom: 20px;
    box-shadow: 0px 5px 10px 2px #9bb9c5;
    text-align: center;
}
    
     
  

.ylaosa {
    background: rgb(192, 239, 245) url(taustakuva.jpg);
    height: 100px;
    position: relative;
    box-shadow: inset 0px -10px 10px -10px #62a4af;
}

.ylaosa, .linkit {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;}

    .footer {
        background-color: #8bd4da;
        color: #000000;
        padding: 20px;
        margin-top: 20px;
        font-size: 20px;
        text-align: center;
    }
    .etusivu .main {
        text-align: center;
    }

    .tekstisivu .main {
        padding: 40px;
        
    }

    .yhteyssivu .main {
        padding: 20px;
    }

figure {
   display: inline-block; 
   position: relative;
   margin: 0;
}

figcaption {
    background-color: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    width: 200px;
    position: absolute;
    left: 20px;
    bottom: 25px;
    padding: 6px;
    box-sizing: border-box;
    visibility: hidden;
    pointer-events: none;
}
        
    
  figure:hover figcaption {
      visibility: visible;
  }