@keyframes flipAnimation {
  0% { transform: perspective(400px) rotateY(0); }
  100% { transform: perspective(400px) rotateY(360deg); }
}
@keyframes bounceAnimation {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}



@font-face {
    font-family: Otsikko;
    src: url(Rubik_Vinyl/RubikVinyl-Regular.ttf);
}

body{
   
    background-color: rgb(255, 255, 255);
    background-image: url(taust.jpg);
}

main {
    max-width: 1000px;
    margin: auto;
    background-color: rgb(194, 32, 186);
}

.resepti:hover {
  animation-name: bounceAnimation;
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: both;
}


h1{
    text-align: center;
    font-family: Otsikko;
    font-style: italic;
    color: #fff;
 animation-name: flipAnimation;
  animation-duration: 10s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: both;
  
}

a:hover {
    text-decoration: none;
    
}

a:visited {
    color: azure;
}

a {
    color: aqua;
    
}
img {

}