@import "palette"

.VPHero .container
  flex-direction: column
  text-align: center !important
  gap: 10px

.VPHero .image
  order: 0
  margin: 0

.VPHero .image-container
  transform: none
  height: auto

.VPHero .image img
  max-height: 130px
  max-width: none
  position: static
  transform: none

.VPHero .container .actions
  justify-content: center !important

.VPHero .main
  margin: 0 auto

.demo-video
  max-width: 700px // The width of the video
  width: 100%
  margin: 50px auto
  border-radius: 6px

.action-button
  background-color: #dd0b78 !important
  border-bottom: #c6096b !important

p[align="center"]
  img
    display: inline-block
  img[height="20"]
    height: 20px

@font-face
  font-family: 'Nerd Font'
  src: url("/nerd-font.woff2") format("woff2")
  font-weight: 400
  font-style: normal
  unicode-range: e000-f8ff, f0000-fffff, 100000-10ffff

code
  overflow-wrap: break-word

.vp-doc [class*='language-'] > button.copy
  top: unset
  bottom: 12px

:root
  --vp-font-family-mono: 'Nerd Font', source-code-pro, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace
  --vp-c-brand-1: darken($accentColor, 30%)
  --vp-c-brand-2: lighten($accentColor, 10%)
  --vp-c-brand-3: $accentColor
  --vp-c-brand-soft: rgba($accentColor, 0.14)

  /* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css#L319-L362 */
  --vp-code-block-bg: $codeBgLightColor
  --vp-code-color: $codeBgLightColor
  --vp-code-block-divider-color: $dark-gutter

  --vp-code-lang-color: $dark-text-3

  --vp-code-line-highlight-color: $dark-default-soft
  --vp-code-line-number-color: $dark-text-3

  --vp-code-copy-code-border-color: $dark-divider
  --vp-code-copy-code-bg: $dark-bg-soft
  --vp-code-copy-code-hover-border-color: $dark-divider
  --vp-code-copy-code-hover-bg: $dark-bg
  --vp-code-copy-code-active-text: $dark-text-2

.dark
  --vp-c-brand-1: lighten($accentDarkColor, 30%)
  --vp-c-brand-2: darken($accentDarkColor, 10%)
  --vp-c-brand-3: $accentDarkColor
  --vp-c-brand-soft: rgba($accentDarkColor, 0.14)

  --vp-code-color: $preTextLightColor