article {
  padding-top: 50px;
  text-align: center
}

h1 {
  line-height: 80px;
  font-size: 80px;
  letter-spacing: 2px
}

h2 {
  padding-bottom: 2rem;
  font-size: 24px;
  letter-spacing: 2px
}

header h1 {
  line-height: 1.6rem
}

.error-02 section {
  margin: 2rem
}

#svg {
  margin: 0 auto;
  width: 80%;
  height: auto
}

#play01 {
  animation: play 5s alternate infinite
}

@keyframes play {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(37%)
  }
}

#artist {
  animation: artist 2s ease-in-out alternate infinite;
  transform-origin: center;
  transform-box: fill-box
}

@keyframes artist {
  from {
    transform: rotate(-20deg)
  }

  to {
    transform: rotate(20deg)
  }
}

#my-baer {
  animation: baer 2.5s ease-in-out alternate infinite;
  transform-origin: center;
  transform-box: bottom
}

@keyframes baer {
  from {
    transform: translateY(0)
  }

  to {
    transform: translateY(-50px)
  }
}

#baer-leg {
  animation: leg 2.5s ease-in-out alternate infinite;
  transform-origin: center;
  transform-box: fill-box
}

@keyframes leg {
  from {
    transform: translate(0, 0) rotate(0)
  }

  to {
    transform: translate(-30px, -5px) rotate(-5deg)
  }
}

@media screen and (min-width: 600px) {
  #search404 {
    width: 70%;
    margin: 0 auto
  }

  #search404 form {
    margin-left: 4rem
  }
}

@media screen and (min-width: 1025px) {
  article {
    display: flex;
    justify-content: center
  }

  article div {
    width: 50%
  }

  #svg {
    width: 30%;
    max-width: 500px
  }

  article div:nth-child(1) {
    padding-top: 100px
  }

  h1 {
    margin: 0;
    padding: 0;
    text-align: center;
    display: block
  }

  h2 {
    margin: 0;
    padding: 0;
    text-align: center;
    display: block
  }

  #search404 {
    width: 100%;
    margin: 0 auto
  }

  #search404 form {
    width: 50rem;
    margin-left: 32%
  }
}