@font-face {
   font-family: Merri;
   src: url(Fontit/Merriweather/Merriweather-Regular.ttf);
}

@font-face {
   font-family: Merri;
   src: url(Fontit/Merriweather/Merriweather-Bold.ttf);
   font-weight: bold;
}

@font-face {
   font-family: Merri;
   src: url(Fontit/Merriweather/Merriweather-Italic.ttf);
   font-style: italic;
}

@font-face {
   font-family: Butterfly;
   src: url(Fontit/Butterfly_Kids/ButterflyKids-Regular.ttf);
}

body {
   font-family: Merri, serif;
   background-color: #777;
   background-image: url(tausta.jpg);
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
}
.kaikki {
   background-color: #fff;
   max-width: 800px;
   margin-left: auto;
   margin-right: auto;
}
.header {
   background-color: #ffe;
   background-image: url(headertausta.jpg);
   background-size: cover;
   color: white;
   text-shadow: 0px 0px 10px #000;
   font-family: Butterfly, serif;
   padding: 50px;
   font-size: 80px;
   line-height: 0.5;
}
.nav {
   background-color: #eef;
   padding: 30px;
}
.nav a {
   margin: 6px;
   color: #933;
}
.main {
   padding: 40px;
}
.footer {
   background-color: #444;
   color: #fff;
   padding: 30px;
}
h2 {
   margin-top: 40px;
}

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

img {
   max-width: 100%;
}

.tumma {
   background-color: #555;
   padding: 10px;
}

table {
   border-collapse: collapse; /* Raot pois solujen välistä */
}

th {
   background-color: #000;
   color: #fff;
}

td, th {
   border: 1px solid #000;
   padding: 3px 4px; /* Eka numero ylös/alas, toka sivulle*/
   vertical-align: top;
}