@font-face {
    font-family: kyltti;
    src: url(Flavors/Flavors-Regular.ttf);
}

@keyframes myAnim {
	0% {
		animation-timing-function: ease-in;
		opacity: 0;
		transform: translateY(250px);
	}

	38% {
		animation-timing-function: ease-out;
		opacity: 1;
		transform: translateY(0);
	}

	55% {
		animation-timing-function: ease-in;
		transform: translateY(65px);
	}

	72% {
		animation-timing-function: ease-out;
		transform: translateY(0);
	}

	81% {
		animation-timing-function: ease-in;
		transform: translateY(28px);
	}

	90% {
		animation-timing-function: ease-out;
		transform: translateY(0);
	}

	95% {
		animation-timing-function: ease-in;
		transform: translateY(8px);
	}

	100% {
		animation-timing-function: ease-out;
		transform: translateY(0);
	}
}


body {
    margin: 0;
    background-color: rgb(19, 112, 19);
}
.taivas {
background: #4accff;
background: linear-gradient(41deg, rgba(74, 204, 255, 1) 0%, rgba(255, 222, 222, 1) 0%, rgba(6, 148, 204, 1) 100%);
background-image: url(taivas.jpg);
background-size: cover;
background-position: center bottom;
    padding-top: 1px;
}
.talo {

width: 500px;
text-align: center;
margin-left: auto;
margin-right: auto;
background-color: rgb(212, 212, 212);
margin-top: 80px;
animation: myAnim 1s ease 0s 1 normal forwards;
position: relative;
background-image: url(seina.jpg);

}
.katto{
    height: 110px;
    background-color: rgb(161, 161, 161);
    margin-bottom: 10px;
    box-shadow: 0px 15px 15px 0px #999; 
    background-image:url(katto.jpg) ;
    
}

.kyltti{
    background-color: rgb(255, 255, 255);
    width: 150px;
    padding: 10px;
    font-size: 30px;
    border-radius: 6px;
    margin-left: auto;
    margin-right: auto;
    font-family: kyltti;
    color: rgba(194, 74, 74, 0.973);
    box-shadow: 0px 30px 20px -10px rgb(58, 51, 51);
    text-shadow: 2px 2px 2px #000;
    animation: myAnim 2s ease 0s 1 normal forwards;
    
   
}

.tolpat{
    width: 100px;
    height: 30px;
    border: 6px ridge #999;
    margin-left: auto;
    margin-right: auto;
    border-top: none;
    border-bottom: none;
    animation: myAnim 2s ease 0s 1 normal forwards;
}
.kyltti, .tolpat{
    position: relative;
    top: -25px;
}

.ikkuna{
    width: 80px;
    height:80px;
    margin: 20px;
    display:inline-block;
    background: #4accff;
background: linear-gradient(332deg, rgba(74, 204, 255, 1) 0%, rgba(245, 223, 223, 1) 50%, rgba(6, 148, 204, 1) 100%);
border: 10px ridge #b39cae ;
}
.ovi{
width: 80px;
height: 140px;
background-color: rgb(247, 255, 255);
margin: auto;
background-image: url(ovi.jpg);
background-size: cover;
background-position: center bottom;
}
.lamppu {
    position: absolute;
    left: -180px;
    bottom: -150px;
    pointer-events: none;
}
a {
    text-decoration: none;
    color: inherit;
}