@use "@/common/styles/_colors" as *

.not-found-page
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center
  min-height: calc(100vh - 5rem)
  padding: 2rem
  text-align: center
  color: $white

.not-found-content
  display: flex
  flex-direction: column
  align-items: center
  gap: 1rem
  max-width: 400px

.not-found-icon
  width: 100px
  height: 100px
  border-radius: 50%
  background: $dark-gray
  display: flex
  align-items: center
  justify-content: center
  margin-bottom: 1rem

  svg
    color: $orange

.not-found-title
  font-size: 5rem
  font-weight: 700
  margin: 0
  color: $white
  line-height: 1

.not-found-subtitle
  font-size: 1.5rem
  font-weight: 600
  margin: 0
  color: $white

.not-found-description
  font-size: 1rem
  color: $subtext
  margin: 0
  line-height: 1.5