mixin card(content, answer, id)
  .card(class=`${answer ? 'card--answer' : ''} ${id ? `card--${id}` : ''}`)
    .card__content= content
    footer.card__footer
      -if(answer)
        img(src="http://blog.codepen.io/wp-content/uploads/2012/06/Button-Black-Small.png")
      -else
        img(src="http://blog.codepen.io/wp-content/uploads/2012/06/Button-White-Small.png")
      span Cards Against Developers
        sub vol. 2
input(type='radio', name='choice', id='javascript', checked)
input(type='radio', name='choice', id='typescript')
.scene
  label(for='typescript')
  label(for='javascript')
  +card('Use _______ instead of _______.')
  +card('JavaScript', true, 'javascript')
  +card('TypeScript', true, 'typescript')

*
  box-sizing border-box

input
  visibility hidden

body
html
  min-height 100vh
  padding 0
  margin 0

  @media(min-width 768px)
    font-size 14px

  @media(min-width 992px)
    font-size 16px

$cardWidth = 50vmin
.card
  background #000
  border-radius 1.25rem
  color #fff
  filter drop-shadow(5px 5px 5px black)
  flex-shrink 0
  font-family 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif
  font-size 1.5rem
  font-weight bolder
  height ($cardWidth * 1.4)
  max-height (300 * 1.4)px
  padding 2.5rem
  position absolute
  transition transform .25s ease-out
  width $cardWidth
  max-width 300px
  min-width 220px
  min-height (220 * 1.4)px


  &:nth-of-type(1)
    transform translate(-40%, 0) rotate(-15deg)

  &__footer
    align-items center
    bottom 30px
    display flex
    font-size .75rem
    left 2.5rem
    position absolute
    right 2.5rem

    img
      height 2rem
      margin-right 6px
      width 2rem

  &--answer
    color #000
    background #fff


#javascript:checked
  ~ .scene
    background hsl(51, 93%, 61%)
    .card--javascript
        transform translate(40%, 0) rotate(15deg) translate(0, 10%)
        z-index 2
    .card--typescript
      transform translate(40%, 0) rotate(15deg) translate(0, -10%)
      z-index 1
    label[for='typescript']
      z-index 3

#typescript:checked
  ~ .scene
    background hsl(203, 100%, 39%)
    .card--typescript
      transform translate(40%, 0) rotate(15deg) translate(0, 10%)
      z-index 2
    .card--javascript
      transform translate(40%, 0) rotate(15deg) translate(0, -10%)
      z-index 1
    label[for='javascript']
      z-index 3

label
  cursor pointer
  height ($cardWidth * 1.4) * 1.2
  position absolute
  transform translate(40%, 0) rotate(15deg)
  width $cardWidth
  
.scene
  align-items center
  background #db0a5b
  display flex
  font-size 10px
  justify-content center
  margin 0
  min-height 100vh
  padding 0
  height 100vh
  width 100vw
  position relative
  transition background 0.25s
  
[type='radio']
  position absolute
  opacity 0
  
sub
  margin-left 6px