if hexo-config('error_404.enable')
  .error404
    #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

    & + #rightside
      display: none