@use "sass:color"
@use "colors"
  
:root
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif
  line-height: 1.5
  font-weight: 400

  color-scheme: dark
  color: rgba(255, 255, 255, 0.758)
  background-color: colors.$background

  font-synthesis: none
  text-rendering: optimizeLegibility
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale

a
  font-weight: 500
  color: colors.$accent
  text-decoration: inherit
  &:hover
    text-decoration: underline

body
  margin: 0
  display: flex
  place-items: center
  min-width: 320px
  min-height: 100vh

#app
  margin: 0 auto
  padding: 2rem
  text-align: center

button
  border-radius: 8px
  border: 1px solid transparent
  padding: 0.6em 1.2em
  font-weight: 500
  font-family: inherit
  background-color: #1a1a1a
  cursor: pointer
  transition: all 0.25s

  &:hover
    color: colors.$accent
    transform: translateY(-2px)
    filter: drop-shadow(0 0 0.5em color.scale(colors.$accent, $alpha: -90%))
  
  &:focus, &:focus-visible
    outline: none

main
  display: flex
  flex-direction: column
  gap: 1em
  padding: 1em
  place-items: center

.heading
  font-family: "Caveat", cursive
  font-size: 3em
  background: colors.$accent-strong
  background: -webkit-linear-gradient(70deg, colors.$accent-strong, colors.$accent)
  background: linear-gradient(70dge, colors.$accent-strong, colors.$accent)
  -webkit-background-clip: text
  -webkit-text-fill-color: transparent
  line-height: 1

  will-change: filter
  transition: filter 300ms
  filter: drop-shadow(0 0 1em color.scale(colors.$accent-strong, $alpha: -80%))
  &:hover
    filter: drop-shadow(0 0 2em color.scale(colors.$accent-strong, $alpha: -20%))

.edit-mode-banner
  font-size: 1.2em
  text-align: center
  color: colors.$accent-strong

.sub-heading
  display: flex
  place-items: center
  gap: 10px
  img
    height: 1em

.rules
  max-width: 900px
  opacity: 0.9

.btn-div
  display: flex
  gap: 1em
  flex-wrap: wrap
  place-items: center

.color-picker
  display: flex
  flex-direction: column
  padding: 1em 0 0 0
  overflow: hidden
  height: 42px
  width: 30px

  &.selected
    border-color: colors.$accent

  input
    padding: 0
    border: 0

@import url('https://fonts.googleapis.com/css2?family=Teko&display=swap')
.timer
  font-family: 'Teko', sans-serif
  font-size: 2em
  color: colors.$accent
  margin-bottom: -24px

  // Larger gap between letters
  letter-spacing: 0.3em

.status
  color: colors.$correct

  &.error
    color: colors.$cross

.overlay
  position: fixed
  inset: 0

  background-color: rgba(0, 0, 0, 0.5)

  display: flex
  justify-content: center
  align-items: center

  z-index: 1000
  backdrop-filter: blur(5px)

  h2, p
    user-select: none
    margin: 0

  > div
    background-color: colors.$background
    padding: 2rem
    border-radius: 8px

    display: flex
    flex-direction: column
    gap: 1rem

    max-width: 400px
