@import "variables"

.notfound-page
  position: relative
  display: flex
  flex-wrap: wrap
  width: $page-width
  margin: 0 auto
  gap: $large-spacer

.notfound-content
  position: relative
  padding-top: $large-spacer
  max-width: $card-width

.notes
  padding-top: $spacer

.notfound-404-chan
  position: relative
  width: $card-width
  height: $card-height
  background:
    image: url("/404-chan_sm.png")
    position: bottom right $huge-spacer
    repeat: no-repeat
    size: 144px 256px

#particles-bg
  --notfound-particles-color: #000

  position: absolute
  width: 100%
  height: 100%
  top: 0
  left: 0
  z-index: $foremost

@media (max-width: 800px)
  .notfound-content
    text-align: center
  .notfound-page
    flex-direction: column

@media (prefers-color-scheme:dark)
  #particles-bg
    --notfound-particles-color: #fff
