body {
  background-image: url("images/pattern.png");
  background-color: orange;
  color: black;
  font-family: Verdana;
}
.welcome {
  width: auto;
  display: block;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.welcome2 {
  width: auto;
  display: block;
  margin: 0;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

   .diary {
            display: block;
            position: absolute;
             bottom: 32%;
             left: 35%;
            transform: rotate(10deg);
            z-index: 1;
    }
    .diary:hover {
      transform: rotate(5deg);   }
      
    .diary img {
              width: 100px;
              height: 100px; }
    .bubble {
            display: block;
            position: absolute;
            bottom: 22%;
            left: 45%;
            transform: rotate (0deg); 
            z-index: 1;
    }
    .bubble:hover {
      transform: rotate(-5deg);  }
      
    .bubble img {
            width: 100px;
            height: 101px;  }
            
    .kirby {
            display: block;
            position: absolute;
            top: 40%;
            left: 30%;
            transform: rotate(0deg);
            z-index: 1;
    }
    .kirby:hover {
      transform: rotate(-5deg);  }
      
    .flower {
              position: absolute;
              top: 23%;
              left: 39%;
              transform: rotate(0deg);
              animation: rotation 15s infinite linear;
              z-index: -10;    }
    .rotate {
  animation: rotation 15s;
}

.linear {
  animation-timing-function: linear;
}

.infinite {
  animation-iteration-count: infinite;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}