@font-face {
    font-family: "tavallinen teksti";
    src: url(fontit/Source_Serif_4/SourceSerif4-VariableFont_opsz\,wght.ttf);
}

@font-face {
    font-family: "hieno teksti";
    src: url(fontit/The_Nautigal/TheNautigal-Regular.ttf);
}

body {
    background-color:rgb(205, 231, 205);
    text-align: center;
    font-family: "tavallinen teksti", sans-serif;
}

.tekstisivut .main {
    text-align: left;
    padding: 25px;

}

.tekstisivut .main p {
    max-width: 700px;
}

.container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    background-color: rgb(172, 201, 175);
}

img {
    border: 25px solid white;
    margin: 15px;
}

.etusivu img {
    box-shadow: 2px 2px 15px rgb(67, 88, 70);
}

.etusivu img:hover {
    box-shadow: 2px 2px 15px rgb(22, 36, 24);
}


.header {
    background-color: rgb(113, 181, 221);
    background-image: url(header-tausta.jpg);
    background-size: cover;
    background-position: right center;

    font-family: "hieno teksti", cursive;
    font-size: 80px;
    color: white;
    text-shadow: 0px 0px 5px #8f9a67;
    min-height: 200px;
    line-height: 0.8;
    text-align: right;
    
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    
    padding-right: 45px;
    padding-bottom: 20px; 
    box-shadow: 0px -25px 20px -20px inset rgb(42, 63, 42);
}

h1 {
    color: rgb(56, 73, 52);
}

a:link {color: rgb(37, 167, 26);}
a:visited {color: rgb(43, 100, 34);}
a:hover {text-decoration: none;}
a:active {color: rgb(6, 34, 7);}

.nav {
    background-color: white;
    padding: 25px;
    text-align: center;
    box-shadow: 0px 15px 10px -10px rgba(43, 63, 41, 0.555);
}

.nav {
    color: rgb(84, 107, 78);
    padding: 10px; 
}

.nav a {
    color: inherit;
    margin: 20px;
    text-decoration: none;
}

.nav a:hover {
    text-decoration: underline;
}

.footer {
    background-color: rgb(42, 70, 50);
    color: #fff;
    margin-top: 15px;
    padding: 25px;
    clear: both;
}

.oikealle {
    float: right;
}

.maalaus {
    display: inline-block;
    position: relative;
}

.kuvateksti {
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 8px 4px;
    position: absolute;
    left: 40px;
    bottom: 44px;
    width: 200px;
    box-sizing: border-box;
    visibility: hidden;
}

.maalaus:hover .kuvateksti {
    visibility: visible;
    pointer-events: none
}