if hexo-config('error_404.enable')
  #error-wrap
    position: absolute
    top: 50%
    right: 0
    left: 0
    margin: 0 auto
    padding: 0 1rem
    max-width: 1000px
    transform: translate(0, -50%)

    .error-content
      display: flex
      flex-direction: row
      justify-content: center
      align-items: center
      margin: 0 1rem
      height: 18rem
      border-radius: 8px
      background: var(--card-bg)
      box-shadow: var(--card-box-shadow)
      transition: all .3s

      &:hover
        box-shadow: var(--card-hover-box-shadow)

      +maxWidth768()
        flex-direction: column
        margin: 0
        height: 25rem

      .error-img
        flex: 1
        height: 100%
        border-top-left-radius: 8px
        border-bottom-left-radius: 8px
        background-color: $theme-color
        background-position: center
        background-size: cover

        +maxWidth768()
          flex: 1
          width: 100%
          border-top-right-radius: 8px
          border-bottom-left-radius: 0

      .error-info
        flex: 1
        padding: .5rem
        text-align: center
        font-size: 14px

        if $site-name-font
          font-family: $site-name-font

        +maxWidth768()
          flex: 1.1
          width: 100%

        .error_title
          margin-top: -4rem
          font-size: 9em

          +maxWidth768()
            margin-top: -3rem

        .error_subtitle
          @extend .limit-more-line
          margin-top: -3.5rem
          word-break: break-word
          font-size: 1.6em
          -webkit-line-clamp: 2

        a
          display: inline-block
          margin-top: .5rem
          padding: .3rem 1.5rem
          background: var(--btn-bg)
          color: var(--btn-color)

          i
            padding-right: .3rem