<div id="fall"></div>

// #divtober 01: Fall
// a.singlediv.com/divtober2023

black(alpha)
  rgba(0,0,0,alpha)

white(alpha)
  rgba(255,255,255,alpha)

fall-pattern()
  background-image: repeating-linear-gradient(to right, black(0),
                                                        black(0) .3em,
                                                        black(.02) .3em,
                                                        black(.02) .4em),
                    repeating-linear-gradient(to top,   black(0),
                                                        black(0) .3em,
                                                        black(.02) .3em,
                                                        black(.02) .4em),
                    conic-gradient(from 225deg, var(--fallcolor1), var(--fallcolor2))  
  
body
  min-height: 300px
  height: 100vh
  position: relative
  background-color: sienna
  text-align: center

div
  position: absolute
  left: 50%
  top: 50%

  &::before,
  &::after
    display: block
    content: ''
    position: absolute
    
  @media (max-width: 400px)
    &:not(.no-scale)
      transform: scale(.8)

#fall
  --fallcolor1: gold
  --fallcolor2: crimson
  fall-pattern()
  width: 8em
  height: @width
  margin-left: -(@width/2)
  margin-top: -(@height/2 + 2.5em)
  border-radius: 4em 0
  box-shadow: inset .5em -.5em 1em alpha(maroon,.3),
              -4.85em 4.85em .2em -3.7em sandybrown,
              -5em 5em 0 -3.5em chocolate,
              -6.05em 6.05em .2em -3.7em sandybrown,
              -6.2em 6.2em 0 -3.5em chocolate
  rotate: -45deg

  &::before,
  &::after
    fall-pattern()
    width: 100%
    height: 100%
    border-radius: 4em 0

  &::before
    --fallcolor1: green
    --fallcolor2: yellow
    left: -8em
    top: 0em
    box-shadow: inset .5em -.5em 1em alpha(darkgreen,.3)
    rotate: -90deg

  &::after
    --fallcolor1: firebrick
    --fallcolor2: purple
    left: 0em
    top: 8em
    box-shadow: inset .5em -.5em 1em alpha(indigo,.3)
    rotate: 90deg

// @lynnandtonic
// a.singlediv.com