@font-face {
    font-family: "Hieno teksti";
    src: url(fontit/Mrs_Saint_Delafield/MrsSaintDelafield-Regular.ttf);
}

@font-face {
    font-family: "leipis";
    src: url(fontit/StoryScript-Regular.ttf);
}

body {
    background-color: rgb(211, 164, 205)223, 255);
    text-align: center;
    font-family: "leipis";
}


.etusivu, .header, .nav, .footer {
    text-align: center;

}

.container {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    background-color: rgb(255, 196, 214);
}

img {
    border: 20px solid #fff;
    
    box-shadow: 2px 2px 20px ;
}

.etusivu img {
    box-shadow: 2px 2px 20px #fff;
}

.etsusivu img:hover {

    box-shadow: 2px 2px 20px;
}


img:hover {
    box-shadow: 2px 2px 20px ;
}

.header {
background-color: rgb(255, 103, 186);
background-image: url(taustajuttu.jpg);
background-size: cover;
background-position: right bottom;
font-family: "Hieno teksti", cursive;
color:#fff;
text-shadow: 0px 0px 5px #a1312f;
font-size: 80px;
line-height: 0.6;
min-height: 200px;
text-align: right;
padding-right: 40px;
padding-bottom: 30px;
padding: 50px;
box-shadow: 0px -20px 20px inset #fff;
}


a:link {color: #000000; ;}
a:visited {color: #002897;}
a:hover {text-decoration: none;}
a:active {color: #ffa9a9;}


.nav {
background-color: rgb(255, 255, 255);
padding: 10px;
box-shadow: 2px 2px 20px #fff;
}

.nav a {
    color:black;

}

.footer {
background-color: black;
color: #fff;
padding: 30px;
margin-top: 50px;
clear: both;
}

.sivu .main{
    padding-left: 50px;
    padding-right: 50px;
    max-width: 700px;

}

.sivu {
    text-align: left;
}

.sivu .main p {



}

.main {
    min-height: 500px;
    padding-bottom: 50px;

}

.main img {
    margin: 10px;
}

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

figure {

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

figcaption {
  position: absolute;
  width: 200px;
  background-color: #0000008e;
  color: white;
  left: 30px;
  bottom: 34px;
  padding: 5px;
  box-sizing: border-box;
  visibility: hidden;
  pointer-events: none;

}

figure:hover figcaption {
    visibility: visible;
}