header
  h1 CSS3 Checkbox Logic Gates
  h3
    a(href="https://twitter.com/OkaTweets" target="_blank") @OkaTweets

.container
  h2 AND Gate
  input(type="checkbox" checked="checked")#box-AND-1
  input(type="checkbox")#box-AND-2

  label(for="box-AND-1").box
  label(for="box-AND-2").box

  .light.light-AND
  
.container
  h2 OR Gate
  input(type="checkbox")#box-OR-1
  input(type="checkbox")#box-OR-2

  label(for="box-OR-1").box
  label(for="box-OR-2").box
  
  .light.light-OR
  
.container
  h2 NOT Gate
  input(type="checkbox")#box-NOT-1

  label(for="box-NOT-1").box
  
  .light.light-NOT
  
.container
  h2 NAND Gate
  input(type="checkbox")#box-NAND-1
  input(type="checkbox")#box-NAND-2

  label(for="box-NAND-1").box
  label(for="box-NAND-2").box
  
  .light.light-NAND
  
.container
  h2 NOR Gate
  input(type="checkbox")#box-NOR-1
  input(type="checkbox")#box-NOR-2

  label(for="box-NOR-1").box
  label(for="box-NOR-2").box
  
  .light.light-NOR
  
.container
  h2 XOR Gate
  input(type="checkbox")#box-XOR-1
  input(type="checkbox")#box-XOR-2

  label(for="box-XOR-1").box
  label(for="box-XOR-2").box
  
  .light.light-XOR
  
.container
  h2 XNOR Gate
  input(type="checkbox")#box-XNOR-1
  input(type="checkbox")#box-XNOR-2

  label(for="box-XNOR-1").box
  label(for="box-XNOR-2").box
  
  .light.light-XNOR