WHITE = #E1FAFA

DARK_GRAY = lighten(#252929, 10%)
GRAY = #BFC3C8
LIGHT_GRAY = rgb(224, 225, 226)

GREEN = #35B44F
DARK_GREEN = darken(#35B44F, 60%)
LIGHT_GREEN = lighten(GREEN, 20%)

BLUE = #2A3749

PAGE_WIDTH = 1150px
ARTICLE_WIDTH = 840px
HERO_HEIGHT = 460px

PHONE = 'only screen and (max-width: 899px)'
DESKTOP = 'only screen and (min-width: 900px)'

PHONE_PADDING = 10px

H1_FONT_SIZE = 45px
H2_FONT_SIZE = 30px
H3_FONT_SIZE = 24px
H4_FONT_SIZE = 20px
H5_FONT_SIZE = 16px

mobile_font_shrink(size)
  size * 0.8

ellipsis()
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

vert-align()
  position: relative
  top: 50%
  transform: translateY(-50%)

.clearfix:before, .clearfix:after
  content: ''
  display: table

.clearfix:after
  clear: both

*, *:after, *:before
  box-sizing: border-box

html
  margin: 0
  padding: 0

body
  margin: 0
  padding: 0

  font-family: 'Source Sans Pro', sans-serif
  color: DARK_GRAY
  background-color: #f4f5f6
  font-size: 15px

a:link, a:visited
  color: darken(GREEN, 10%)
  text-decoration: none

a:hover, a:active
  text-decoration: underline

h1, h2, h3, h4, h5
  font-family: 'Asap', sans-serif
  font-weight: 700
  line-height: 1.5em

h1
  font-size: H1_FONT_SIZE

  @media PHONE
    font-size: mobile_font_shrink(H1_FONT_SIZE)

  em
    border-bottom: 6px solid rgba(0, 0, 0, 0.2)

h2
  font-size: H2_FONT_SIZE

  @media PHONE
    font-size: mobile_font_shrink(H2_FONT_SIZE)

h3
  font-size: H3_FONT_SIZE

  @media PHONE
    font-size: mobile_font_shrink(H3_FONT_SIZE)

h4
  font-size: H4_FONT_SIZE

  @media PHONE
    font-size: mobile_font_shrink(H4_FONT_SIZE)

h5
  font-size: 16px

  @media PHONE
    font-size: mobile_font_shrink(H5_FONT_SIZE)

p, ul, ol
  font-size: 18px
  line-height: 1.5em

  code
    background-color: LIGHT_GRAY
    border-radius: 3px
    padding: 0.05em 0.25em
    margin: 0 0.05em
    font-size: 90%

code
  font-family: 'Source Code Pro', monospace
  word-break: break-word
  white-space: pre-wrap

.hljs
  font-size: 16px
  padding: 1em !important // overrides default style
  border-radius: 3px
  margin-bottom: -15px

  @media PHONE
    font-size: 14px

iframe, img
  max-width: 100%

blockquote
  border-left: 5px solid rgba(GREEN, 70%)
  padding: 0.5em
  padding-left: 3.25em
  margin-left: 1.5em
  font-style: italic

  p:first-child
    margin-top: 0.5em

  p:last-child
    margin-bottom: 0.5em

  &:before
    content: '\201C'
    font-style: normal
    font-size: 100px
    position: absolute
    color: rgba(GRAY, 50%)
    z-index: -99
    margin-left: -0.45em
    margin-top: -0.3em

  cite
    display: block
    text-align: right
    margin-top: -10px
    margin-bottom: -10px

//
// BUTTON
//

.btn, a.btn:link, a.btn:visited
  background-color: GREEN
  border-radius: 6px
  display: inline-block
  color: #FFF
  padding: 0.6em 0.7em
  font-weight: 700

  @media PHONE
    font-size: 120%
    margin-bottom: 5px
    width: 80%

.btn:hover, a.btn:hover, a.btn:active
  background-color: LIGHT_GREEN
  text-decoration: none

.btn.large
  font-size: 180%

.center
  text-align: center

.featuredCenter
  text-align: center
  margin: 1.5em 0
  .btn
    margin: 0 0.75em


//
// LAYOUT
//

.headerWrap
  background-color: #FFF
  border-bottom: 1px solid rgba(#000, 0.1)

.header
  height: 65px
  width: 100%
  max-width: PAGE_WIDTH
  margin: 0 auto
  padding-left: PHONE_PADDING
  padding-right: PHONE_PADDING

  @media PHONE
    height: auto
    text-align: center

  h1, a
    font-family: 'Asap', sans-serif

  h1
    float: left
    font-size: 2.1em
    line-height: 2.1em
    margin: 0
    a:link, a:visited
      text-decoration: none
      color: DARK_GRAY

    a
      background: top left url('/img/webtorrent-small.png') no-repeat;
      background-size: 36px 36px;
      padding-left: 50px;

    @media PHONE
      float: none

nav
  float: right

  @media PHONE
    float: none
    display: none

  @media DESKTOP
    vert-align()

  a:link, a:visited
    color: DARK_GRAY
    font-size: 120%
    font-weight: 700
    text-decoration: none
    display: inline-block
    margin-left: 25px

    @media PHONE
      display: block
      margin-left: 0
      margin: 5px

  a:hover, a:active
    color: GREEN

.footerWrap
  background-color: BLUE

footer
  width: 100%
  max-width: PAGE_WIDTH
  margin: 4em auto 0 auto
  padding: 1em 4em 4em 4em
  font-family: 'Asap', sans-serif

  .gh-button
    margin-top: 5px

  @media PHONE
    margin: 0 auto

  h3
    margin-bottom: 10px
    color: white

  section
    width: 25%
    padding: 0 10px
    float: left
    color: #FFF

    @media PHONE
      float: none
      width: 100%

  a:link, a:visited, div
    display: block
    font-size: 17px
    margin: 5px 0

  div
    color: #CCC

  a:link, a:visited
    color: white
    text-decoration: rgba(255, 255, 255, 0.4) solid underline

  a:hover, a:active
    text-decoration: underline

article
  width: ARTICLE_WIDTH
  margin: 0 auto

  @media PHONE
    width: auto
    padding: 0 PHONE_PADDING

  h1
    text-align: center

  h1:not(.minimal):after
    content: ''
    display: block
    width: 100px
    height: 5px
    background: GRAY
    margin: 5px auto

  h1.minimal
    margin: 0

//
// SPONSORS
//

.feature-block.sponsors
  h3
    text-align: center
  article
    padding-top: 1em !important
    padding-bottom: 1em !important
    padding: 0 20px
    max-width: fit-content
    min-width: 330px

.flex-center
  display: flex
  flex-wrap: wrap
  justify-content: center

.sponsor, .sponsors #carbonads
  margin: 5px 25px 15px 25px
  align-self: center

.sponsors #carbonads
  min-width: 330px

.sponsor, .sponsor img
  max-width: 210px


//
// HERO
//

#hero
  background-color: BLUE
  text-align: center
  min-height: 460px
  overflow: hidden
  width: 100%

  @media PHONE
    min-height: 155px

  .is-seed &
    background-color: DARK_GREEN
    transition: 0.5s 0.5s background-color ease-in-out

  h1
    color: white
    text-align: center
    margin: 0
    padding-top: 30px
    line-height: 1

    em
      border-bottom: 6px solid rgba(255, 255, 255, 0.2)

  #progressBar, #status, #svgWrap, #videoWrap
    display: none

  #begin
    margin: 20px auto

  &.loading
    @media DESKTOP
      height: HERO_HEIGHT

    #progressBar, #status, #svgWrap, #videoWrap
      display: block

    h1
      margin-bottom: -60px

#svgWrap
  width: 100%
  max-width: PAGE_WIDTH

  @media DESKTOP
    height: HERO_HEIGHT
    position: absolute

  .torrent-graph
    width: 50%
    height: 100%

    @media PHONE
      width: 90%
      margin: auto 0px

  svg
    display: block

    .node
      cursor: pointer

      .text
        fill: rgba(WHITE, 60%)
        text-anchor: middle
        pointer-events: none
        font-family: 'Source Sans Pro', sans-serif

#videoWrap
  width: 100%
  min-height: 100px
  max-width: PAGE_WIDTH
  margin: 0 auto

  @media DESKTOP
    height: HERO_HEIGHT


  video
    min-height: 100px
    border-radius: 2px
    width: 100%

.videoOverlay
  position: absolute
  height: 100%
  width: 100%
  z-index: 9999
  display: none

  .video.muted &
    display: block

.video
  position: relative
  min-height: 100px
  border-radius: 3px
  @media DESKTOP
    max-height: 295px
    max-width: 60%
    vert-align()
    float: right
    border: 1px solid rgba(#FFF, 0.4)
    overflow: hidden

  opacity: 0
  &.canplay
    opacity: 1

  &.muted:before
    display: block
    content: '🔇 TAP TO UNMUTE'
    font-size: 20px
    color: #000
    background-color: rgba(255, 255, 255, 0.7)
    border-radius: 3px
    position: absolute
    padding: 8px 16px
    margin: 20px

#progressBar
  height: 5px
  width: 0%
  background-color: GREEN
  transition: width 0.4s ease-in-out

  @media DESKTOP
    position: absolute

#status
  color: #FFF
  font-size: 17px
  width: 100%
  max-width: PAGE_WIDTH
  margin-left: auto
  margin-right: auto
  z-index: 10
  position: relative

  code
    font-size: 90%
    font-weight: 700
    margin-left: 3px
    margin-right: 3px
    border-bottom: 1px dashed rgba(#FFF, 0.3)

#statusLeft, #statusRight
  text-align: center
  // border: 1px solid red

  @media DESKTOP
    position: absolute
    margin-top: 400px

#statusLeft
  @media DESKTOP
    width: 40%
    margin-left: 0

  @media PHONE
    margin-top: 90px

#statusRight
  @media DESKTOP
    width: 60%
    margin-left: 40%

  @media PHONE
    margin-top: 15px

a#torrentLink:link, a#torrentLink:visited
  text-decoration: none
  border-bottom: 1px solid GREEN

a#torrentLink:hover, a#torrentLink:active
  color: LIGHT_GREEN

.show-seed
  display: none

body.is-seed .show-seed
  display: inline

body.is-seed .show-leech
  display: none

//
// NEW RELEASE LINK
//

.new-release
  display: inline-block
  position: relative

@media DESKTOP
  .new-release::after
    content: 'NEW'
    font-size: 10px
    position: absolute
    top: -10px
    right: -20px
    padding: 2px 4px
    background-color: GREEN
    color: #fff
    border-radius: 5px

  .new-release:hover::after
    background-color: LIGHT_GREEN


//
// WEBTORRENT DESKTOP
//

.webtorrent-desktop-hero
  background-color: #2a3749
  margin: 0
  padding: 3em 0 2em
  color: #fff
  h1
    margin: 0
  h2
    margin: 0
  @media PHONE
    padding-left: PHONE_PADDING
    padding-right: PHONE_PADDING

.downloads
  text-align: center
  margin-bottom: 0
  font-size: 18px

  .download
    display: inline-block
    text-align: center
    background-color: GREEN
    width: 160px
    height: 130px
    margin: 15px
    padding: 20px 30px
    border: none
    border-radius: 5px
    cursor: pointer
    color: white

  .download:hover
    text-decoration: none
    background-color: LIGHT_GREEN

.feature-block p.downloads
  font-size: 18px
  line-height: 27px

.feature-block p.other-downloads
  font-size: 14px
  line-height: 21px
  a
    color: DARK_GREEN

.other-downloads
  text-align: center
  font-size: 14px
  margin: 10px 0 0 0
  a
    color: #CCC

  span:not(:last-child)::after
    content: ' | '
    margin-left: 5px
    margin-right: 5px

.feature-block
  &:nth-child(even)
    background: LIGHT_GRAY
  &.center
    text-align: center
    p
      margin-top: 0

  h1, h2, h3, h4, h5
    margin-top: 0.4em

  article
    clear: both
    width: 100%
    max-width: 1000px
    margin: 0 auto
    font-size: 22px
    padding-top: 2em
    padding-bottom: 2em
    line-height: 33px
    overflow: auto

    &:first-child
      padding-top: 1.5em

      @media PHONE
        padding-top: 1em

    @media PHONE
      padding-top: 1em
      padding-bottom: 1em

    ul > li
      margin: 11px 0

  ul, p
    font-size: 22px
    line-height: 33px

    @media PHONE
      font-size: 18px
      line-height: 26px


.feature-item
  font-size: 15px
  float: left
  display: inline-block
  width: 300px
  max-width: calc(30% - 34px)
  margin: 0 25px
  &:first-of-type
    margin-left: 0
  &:last-of-type
    margin-right: 0
  img
    max-width: 300px
    height: auto
    padding: 4px
    background-color: #fff
    border: 1px solid #ddd
    border-radius: 4px
  h3
    font-size: 1.5em
    margin: 0
  p
    font-size: 1em
    line-height: 1.5em

  @media PHONE
    float: none
    text-align: center
    margin-left: 0
    margin-right: 0
    width: 100%
    max-width: 100%
    margin-bottom: 2em

.image-right
  float: right
  margin-left: 42px
  max-width: 50%

.image-left
  float: left
  margin-right: 42px
  max-width: 50%

.telemetry-logs > div
  margin-bottom: 16px

.telemetry-logs a
  display: inline-block
  padding: 2px 6px
  margin: 2px
  border-radius: 2px
  background-color: #ddd

.telemetry-dashboard h2
.telemetry-dashboard h3
.telemetry-dashboard h4
  margin: 18px 0

.telemetry-dashboard svg
  height: 300px !important

.telemetry-dashboard section
  margin-bottom: 50px

.telemetry-dashboard svg text.event
  fill: GREEN

.telemetry-dashboard svg line.event
  stroke: GREEN

.telemetry-dashboard svg g.nv-axisMax-x text
  transform: translateX(-12px)

.telemetry-dashboard input
  margin: 0 10px 0 0
  font-size: 18px

.error-header
  font-weight: bold

.error-header > span,
.error-summary > span
  display: inline-block
  padding-left: 4px
  background-color: #ddd
  overflow: hidden
  white-space: nowrap
  text-overflow: ellipsis
  height: 22px

.error-summary
  cursor: pointer

.error-count
  width: 80px
  margin-right: 4px

.error-message
  width: calc(100% - 84px)

.error-summary .error-message
  font: 10px monospace
  padding-top: 5px

.error-message .error-message-key
  color: GREEN

.error-stacktrace
  background-color: #ddd
  margin-bottom: 4px
  padding: 6px
  font: 10px monospace
  white-space: pre
  display: none
  overflow: hidden

.error-stacktrace.visible
  display: block

.error-list
  display: none

.error-list.visible
  display: block

@import '../node_modules/highlight.js/styles/base16/zenburn.css'

#carbonads {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
  Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#carbonads {
  display: flex;
  max-width: 330px;
  background-color: hsl(0, 0%, 98%);
  box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, .1);
}

#carbonads a {
  color: inherit;
  text-decoration: none;
}

#carbonads a:hover {
  color: inherit;
}

#carbonads span {
  position: relative;
  display: block;
  overflow: hidden;
}

#carbonads .carbon-wrap {
  display: flex;
}

.carbon-img {
  display: block;
  margin: 0;
  line-height: 1;
}

.carbon-img img {
  display: block;
}

.carbon-text {
  font-size: 13px;
  padding: 10px;
  line-height: 1.5;
  text-align: left;
}

.carbon-poweredby {
  display: block;
  padding: 8px 10px;
  background: repeating-linear-gradient(-45deg, transparent, transparent 5px, hsla(0, 0%, 0%, .025) 5px, hsla(0, 0%, 0%, .025) 10px) hsla(203, 11%, 95%, .4);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
  font-size: 9px;
  line-height: 1;
}

.grow {
  -moz-osx-font-smoothing:grayscale
  backface-visibility:hidden
  transform:translateZ(0)
  transition:transform 0.25s ease-out
}

.grow:hover,
.grow:focus, {
  opacity: 0.9;
  transform:scale(1.05);
}

.grow:active {
  transform:scale(.90);
}
