footer{
background-color:#f8f9fa;
padding:20px;
text-align:center;
color:#6c757d;
position:absolute;
bottom:0;
width:100vw;
box-sizing:border-box;
}

footer img{
height:16px;
object-fit:contain;
}

footer a{
color:#6c757d;
text-decoration:none;
font-size:16px;
}

footer a:hover{
text-decoration:underline;
}

#toutou {
  position: absolute;
  top: 0;
  text-align: center;
  background-image: linear-gradient(#f7b787, #f2a6b8);
  padding: 20px;
  width: 100vw;
  box-sizing: border-box;
}

#toutou h1 {
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  background: linear-gradient(
  to left,
  rgba(247, 183, 135, 0.21),
  rgba(242, 166, 184, 0.21)
);
  padding: 10px 20px;
  border-radius: 8px;
  display: inline-block;
  margin: 0;
}


body {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #f0f0f0;
      perspective: 800px;
    }

   .rabbit {
      position: relative;
      width: 200px;
      height: 200px;
      transform-style: preserve-3d;
      animation: rotate 5s infinite linear;
    }

   .head {
      position: absolute;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: white;
      top: 20px;
      left: 50px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

   .ear {
      position: absolute;
      width: 60px;
      height: 120px;
      background-color: white;
      border-radius: 50px / 120px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

   .ear.left {
      left: 30px;
      top: -10px;
      transform: rotate(-15deg);
    }

   .ear.right {
      right: 30px;
      top: -10px;
      transform: rotate(15deg);
    }

   .eye {
      position: absolute;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background-color: black;
    }

   .eye.left {
      left: 30px;
      top: 40px;
    }

   .eye.right {
      right: 30px;
      top: 40px;
    }

   .nose {
      position: absolute;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: pink;
      bottom: 30px;
      left: 40px;
    }

   .mouth {
      position: absolute;
      width: 40px;
      height: 20px;
      bottom: 20px;
      left: 30px;
      border-bottom: 2px solid black;
      border-radius: 50%;
    }

   .body {
      position: absolute;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background-color: white;
      top: 100px;
      left: 40px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

   .leg {
      position: absolute;
      width: 30px;
      height: 40px;
      border-radius: 30px / 40px;
      background-color: white;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

   .leg.left-front {
      left: 40px;
      bottom: 40px;
      transform: rotate(-10deg);
    }

   .leg.right-front {
      right: 40px;
      bottom: 40px;
      transform: rotate(10deg);
    }

   .leg.left-back {
      left: 20px;
      bottom: 20px;
      transform: rotate(-20deg);
    }

   .leg.right-back {
      right: 20px;
      bottom: 20px;
      transform: rotate(20deg);
    }

   .tail {
      position: absolute;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: white;
      right: 10px;
      bottom: 40px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

    @keyframes rotate {
      from {
        transform: rotateY(0deg);
      }

      to {
        transform: rotateY(360deg);
      }
    }