html {
    scroll-behavior: smooth;
  }
body {
    scroll-behavior: smooth; background-image:url(kuvat/squiggles.jpg); background-size:cover; background-repeat: no-repeat; background-position: left top; margin:0;
}
#header {
    position: fixed;top: 0;width: 100%; min-width: 400px; transition: 0.3s; transition-timing-function: ease; background-color: #fe6d5d;
    padding: 20px; font-size: 45px; font-family: 'shrikhand'; color: #ffffff; text-align: center;
}
.wrapper {
    width: clamp(400px 30vw 1200px);margin-top:120px ; align-content: center; text-align: center; padding-bottom: 80px; 
}
h1 {
    font-family: 'shrikhand'; color: #442222; text-align: center;
}
h2 {
    font-family: 'cutive mono'; color: #442222; font-size: 25px; padding: 10px; letter-spacing: -3px;
}
h3 {
    font-family: 'shrikhand'; font-size: 32px; color: #442222; letter-spacing: 0.3px; word-spacing: 5px;
}
p {
    font-family: 'cutive mono'; color: #442222; font-size: 20px;
}
.white {
    color: #FADDD9;
}
.block {
    background-color: #fe6d5d; width: 300px; float:initial; margin: auto; border-radius: 10px; padding: 3px ; margin-top: 10px;
}
.shrikhand-regular {
    font-family: "Shrikhand", serif;
    font-weight: 400;
    font-style: normal;
}
a:link {
    color: #442222;
}
a {
    font-family:'cutive mono'; color: #442222; background-color:#fe6d5d;border: 2px solid #422800;border-radius: 30px;cursor: pointer;display: inline-block;font-weight: 600;font-size: 20px;padding: 10 30px;line-height: 50px;text-align: center;text-decoration:unset;user-select: none;-webkit-user-select: none;touch-action: manipulation; box-shadow: 5px 5px #442222 inset; margin-top: 30px; margin-bottom: 40px;text-decoration: none; 
    }
      
    a:hover {
        background-color: #FADDD9;box-shadow: #442222 4px 4px 0 0;color:#442222; transform: translate(-2px,-2px);
    }
      
    a:active {
        box-shadow: #442222 2px 2px 0 0;transform: translate(2px, 2px);
    }
      
    @media (min-width: 768px) {
        a {min-width: 120px;padding: 0 25px;
        }       
    }
.info {
    width: clamp(400px, 50vw, 1200px); height: auto; background-color:#FADDD9; border-radius: 50px; padding: 40px; padding-inline: 100px;  margin: auto; align-content: space-evenly; text-align: center; scroll-padding: 30px; border: solid 5px #442222; box-shadow: 10px 10px #442222; 
}
.bg {
    background-color: #442222; align-content: center; justify-content: center;  margin: auto;margin-top: 40px; height: 500px;
}
.overwiew {
    width: clamp(400px, 50vw, 1200px); margin: auto; 
}
.end {
    text-align: center; height: 600px; margin-top: 100px;
}
.alapalkki {
    background-color: #442222; height: 150px; background-position: left bottom; text-align: center; align-content: center;
}
.footer {
    color: #FADDD9; font-size: 16px; align-content: center; text-align: center;
}