@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Protest+Guerrilla&display=swap');


body {
   background-color: rgb(179, 63, 88);
   background-image: url(etusivu2.tausta.JPG);
   
background-size: cover;
   background-position: center;
   background-attachment: fixed;
}


.kaikki {
   background-color: #fff;
   max-width: 600px;
   margin-left: auto;
   margin-right: auto;
}
.header {
   background-color: rgb(179, 63, 88);
   background-size: cover;
   background-image: url(etusivu2.header.JPG);
   position: relative;
   color: white;
   font-family: "Alex Brush", cursive;
   text-shadow: 3px 3px 3px #000000;
   padding: 45px;
   padding-bottom: 30px;
   font-size: 60px;
   line-height: 1;
   box-shadow: inset 0px -2px 15px rgba(0, 25, 78, 0.911);
}

.main {
   padding: 40px;
   font-size: 17px;
   font-family: Merriweather;
}

.footer {
   padding: 30px;
   margin-top: -10px;
   font-size: 14px;
   color: #ffffff;
   font-family: Protest Guerrilla;
   background-color: rgba(170, 31, 61, 0.726);
   box-shadow: inset 0px 0px 8px 7px #ffffff;
   text-shadow: 3px 3px 3px #520101d3;
}

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

img {
   max-width: 100%;
}

li::marker {
    color: rgb(128, 18, 42);
}

a:link, a:visited { 
   color: rgb(179, 63, 88);
   display: inline-block;
   padding-left: 5px;
}

a:hover {
   color: rgb(128, 18, 42);
   transform: scale(1.1);
   transition: 0.3s ease;
}