(:import "url(https://fonts.googleapis.com/css?family=Lato:400,100,300,400italic,300italic,700,700italic,900&subset=latin,latin-ext)")
(:import "url(https://fonts.googleapis.com/css?family=Caudex)")

;((:or .feed main)
;  :-webkit-backface-visibility hidden;
;  :-webkit-transform "translateZ(0)")

(*
  :box-sizing "border-box"
  :margin "0px"
  :padding "0px")

(body
  :transition "background-color .5s ease"
  :font-family "Lato")

(((:or main "#sidebar" .feed) > (:or ul ol))
 :list-style "none"
 :margin "0px")

(ul
  :margin "1em"
  )

((:or h1 h2)
 :font-size "153.9%")
(:h3
  :font-size "146.5%")
((:or h4 h5 h6)
 :font-size "138.5%")

(((:or ul) + (:or h1 h2 h3 h4 h5 h6))
 :width "initial")

(header
  :color "white"
  (h1
    :font-family "Caudex"
    :font-size inherit
    :margin-top "0em"
    :padding-left "10vw"
    :font-weight 200))

((:or "#sidebar" main)
 :border-top none)

(section#sidebar
  :width "38vw"
  :height "90vh"
  :position "fixed"
  :overflow "auto"
  (ul.menu
    :text-align right
    :font-variant small-caps
    (li
      :transition "all .5s ease"
      (a
        :color inherit
        :display block
        :font-size "125%"
        :font-weight 700
        :padding "0.5em"
        :text-decoration none
        :width "100%"
        ))))

(main
  :width "62vw"
  :float "right"
  :clear "right"
  :overflow "hidden"
  :position "relative"
  ((> div)
   :position "absolute"
   :top "2em"
   :bottom "0em"
   :width "100%"
   :overflow-y "scroll")
  )

(img.spinner
  :position "absolute"
  :top "50%"
  :left "50%"
  :transform "translate(-50%,-50%)"
  )

(.hide
  :display none
  )

(.feed-header
  ((:or h2 h3) :padding "0.62em")
  (h2 :padding-bottom "0.38em")
  (h3 :padding-top "0.38em")
  :transition "background-color .5s ease"
  :padding-bottom "0em")

((.link.closed .link-content) 
 :max-height "0px"
 :padding "0em")  

(.link.closed
  :padding-bottom "0em")

(.link
  :text-decoration none
  :display block
  :overflow hidden
  :font-size "0.8em"
  (.link-header 
    :padding "1em"
    :padding-bottom "0em"
    :cursor pointer
    :transition "background-color .5s ease"
    (h4
      :margin-bottom "0.5em"
      :display "inline-block")) 
  (.link-info
    :margin-left "-1em"
    :margin-right "-1em"
    :padding-left "1em"
    :padding-right "1em"
    :padding-bottom "0.32em"
    (.link-url 
      :float "left")
    (.link-date
      :float "right"
      :display block))
  ((:and .link-info :after)
   :content "\" \""
   :display block
   :clear both)
  (.link-content
    :overflow hidden

    (img
      :margin "1em" "0%" "1em" "10%"
      :max-width "80%"
      :max-height "70vh"
      )
    ((> div)
     :padding "1em"
     :font-size "12pt")
    :transition "max-height 0.5s ease"))

(.feed.closed
  :border-bottom-width thin
  (.post-list 
    :max-height "0px"
    :padding "0em")
  (h3
    :display none))

((:and .feed :first-child)
 :border-top none)

(.feed
  :overflow "hidden"
  (.post-list
    :transition "max-height 0.5s ease"))

("#add-form"
 :transition "background-color .5s ease"
 :font-size "1em"
 :height "1.8em"
 :display block
 :overflow hidden
 :width "100%"
 :position absolute
 :z-index 3

 ((:or input button)
  :transition "background-color .5s ease"
  )

 (input
   :border "none"
   :width "95%"
   :height "100%"
   :font-size "0.8em"
   :line-height "1.8em"
   :padding "1em" "0.5em"
   )
 (button
   :border none
   :border-radius 0px
   :font-size inherit
   :width "5%" 
   :height "100%"
   ))


(.flip-button
  :position absolute
  :right "0em"
  :top "0em"
  :z-index 1000
  :width "3em"
  :height "3em"
  :padding-left "1em"
  :padding-bottom "1em"
  :border-bottom-left-radius "100%"
  :border none
  :transition "all 2s cubic-bezier(0.175, 0.885, 0.32, 1.275)"
  :background-image none
  )