@import "skeleton-alerts"
@import "carbon-ad"
@import "github-fork"

$grey: #E1E1E1
body
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Oxygen, Cantarell, sans-serif;

#inputRow
  border-top: 1px solid $grey
  margin-top: 3.6rem
  padding-top: 1rem
#outputRow
  .loader
    display: none
  border-top: 1px solid $grey
  &.loading
    min-height: 100px
    position: relative
    border: 1px solid $grey
    .loader
      margin-top: 15px
      display: block
      position: absolute
      top: 50%
      left: 50%
      transform: translate(-50%, -50%)
      margin: 0
    #output
      display: none
  &.loaded
    border: 0
    .loader
      display: none
    #output
      display: block
#tipsRow
  margin-top: 3.6rem
  h3
    margin-bottom: 1rem
#output
  display: none
  padding: 2.5rem 3rem
  border: 1px solid $grey
  border-radius: 4px
  margin: 0 .2rem

.embed-container
  position: relative
  padding-bottom: 56.25%
  height: 0
  overflow: hidden
  max-width: 100%

.embed-container iframe, .embed-container object, .embed-container embed
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
.loader, .loader:before, .loader:after
  background: #33C3F0
  -webkit-animation: load1 1s infinite ease-in-out
  animation: load1 1s infinite ease-in-out
  width: 0.25em
  height: 1em
.loader
  color: #33C3F0
  text-indent: -9999em
  margin: 88px auto
  position: relative
  font-size: 11px
  -webkit-transform: translateZ(0)
  -ms-transform: translateZ(0)
  transform: translateZ(0)
  -webkit-animation-delay: -0.16s
  animation-delay: -0.16s

  &:before, &:after
    position: absolute
    top: 0
    content: ''
  &:before
    left: -1.5em
    -webkit-animation-delay: -0.32s
    animation-delay: -0.32s
  &:after
    left: 1.5em
@-webkit-keyframes load1
  0%, 80%, 100%
    box-shadow: 0 0
    height: 4em
  40%
    box-shadow: 0 -2em
    height: 5em
@keyframes load1
  0%, 80%, 100%
    box-shadow: 0 0
    height: 4em
  40%
    box-shadow: 0 -2em
    height: 5em

hr
  margin-top: 0.5rem
  margin-top: 0.5rem
ul
  margin-bottom: 0.5rem
  li
    margin-bottom: 0
thead
  tr
    td
      font-weight: bold
body
  padding-bottom: 50px
@media (max-width: 800px)
  .hide-on-mobile
    display: none
  #content
    width: 100%
h2
  margin-bottom: 1rem
  #output &
    margin-bottom: 0

#ad
  margin-top: 2.5rem