@import "./basic/reset"

// Variables
@import "../../themes/hugo-theme-lowtech/assets/styles/font"

$size-small: 1024px
$color-dark: #010101
$color-light: #fffffe
$size-space: 2rem

@mixin dark-theme
  // https://www.happyhues.co/palettes/4
  --color-black: #{$color-dark}
  --color-white: #{$color-light}
  --color-stroke: #010101
  --color-main: #fffffe
  --color-highlight: #7f5af0
  --color-secondary: #72757e
  --color-tertiary: #2cb67d

  --color-background: #16161a
  --color-headline: #fffffe
  --color-paragraph: #94a1b2
  --color-card-background: #242629
  --color-card-headline: #fffffe
  --color-card-paragraph: #94a1b2
  --color-link: #fffffe

  --color-secondary-background: #242629
  --color-secondary-headline: #fffffe
  --color-secondary-paragraph: #94a1b2
  --color-secondary-card-background: #16161a
  --color-secondary-card-headline: #fffffe
  --color-secondary-card-paragraph: #94a1b2
  --color-secondary-link: #fffffe

  --color-tertiary-background: black
  --color-tertiary-headline: #fffffe
  --color-tertiary-paragraph: #94a1b2
  --color-tertiary-card-background: #16161a
  --color-tertiary-card-headline: #fffffe
  --color-tertiary-card-paragraph: #94a1b2
  --color-tertiary-link: #2cb67d

@mixin light-theme
  // https://www.happyhues.co/palettes/2
  --color-black: #{$color-light}
  --color-white: #{$color-dark}
  --color-stroke: #00214d
  --color-main: #fffffe
  --color-highlight: #00ebc7
  --color-secondary: #ff5470
  --color-tertiary: #fde24f

  --color-background: #fffffe
  --color-headline: #00214d
  --color-paragraph: #1b2d45
  --color-card-background: #f2f4f6
  --color-card-headline: #00214d
  --color-card-paragraph: #1b2d45
  --color-link: #00214d

  --color-secondary-background: #f2f4f6
  --color-secondary-headline: #00214d
  --color-secondary-paragraph: #1b2d45
  --color-secondary-card-background: #fffffe
  --color-secondary-card-headline: #00214d
  --color-secondary-card-paragraph: #1b2d45
  --color-secondary-link: #00214d

  --color-tertiary-background: #001534
  --color-tertiary-headline: #fffffe
  --color-tertiary-paragraph: #b7c9e4
  --color-tertiary-card-background: #fffffe
  --color-tertiary-card-headline: #00214d
  --color-tertiary-card-paragraph: #1b2d45
  --color-tertiary-link: #fffffe

svg
  .stroke
    stroke: var(--color-stroke)
  .main
    fill: var(--color-main)
  .highlight
    fill: var(--color-highlight)
  .secondary
    fill: var(--color-secondary)
  .tertiary
    fill: var(--color-tertiary)

body
  color-scheme: light dark
  --font: "Libre Franklin Regular"
  --border-radius: 4px

  @include light-theme

  &.dark-theme
    @include dark-theme

@media (prefers-color-scheme: dark)
  body
    @include dark-theme

    &.light-theme
      @include light-theme

h1
  display: inline-block
  position: relative
  padding: 2rem 4rem

  @media screen and (max-width: $size-small)
    padding: 1rem

  &::after,
  &::before
    height: 8px
    width: 100%
    background: var(--color-highlight)
    content: ""
    position: absolute
    border-radius: 1rem 1rem 1rem 1rem / 1rem 1rem 1rem 1rem
    left: 0
    right: 0
    transform: rotate(-2deg)

  &::before
    top: -1rem

  &::after
    bottom: -1rem

#me .container
  align-items: center
  @media screen and (max-width: $size-small)
    flex-direction: column-reverse
    justify-content: center

  div
    width: 450px
    max-width: 100%

    svg
      width: 400px
      height: 400px
      @media screen and (max-width: $size-small)
        width: calc(200px + #{$size-space*2})
        height: calc(200px + #{$size-space*2})
        margin: 0 auto
        padding: $size-space

@import "./home"
@import "./basic/html"
@import "./font"
@import "./header"
@import "./footer"
@import "./container"