/* Default: extra small devices (phones, less than 768px) */

/************************************** Basic stuff */

* {
  box-sizing:             border-box;
  margin:                 0;
  border:                 0;
  padding:                0;
  line-height:            1.25em;
  vertical-align:         baseline;
  font-family:            Georgia, 'PT Serif', 'Lucida Sans Unicode', 'Lucida Grande', FreeSerif, 'Droid Serif',
                          'Liberation Serif', 'Trebuchet MS', Helvetica, Verdana, Geneva, Calibri, sans-serif;
  text-rendering:         optimizeLegibility;
  word-wrap:              normal;
  text-align:             left;
  background-color:       #f8fff8;
  color:                  #404040;
}

body {
  margin:                 0 auto;
  padding:                .25em 1em;
  max-width:              52em;
}

/************************************** Heading content */

/* 2^(1/3) = 1.2599210499 */

header {
  margin-bottom:          1rem;
  font-size:              200%;
}

/* var a = $('header span:first-child'), b = a[0].offsetLeft; c = a[0].offsetTop; console.dir(a); console.dir(b); console.dir(c); a.css('position', 'absolute').css('top', c).css('left', b); */

span#one, span#two {
  transition:             all 2s ease-out;
  transform:              rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  color:                  #c0c0c0;
}

footer {
  margin-top:             1rem;
  border-top:             1px solid #c0c0c0;
  padding-top:            .25em;
  font-size:              79%;
}

h1, h2, h3, h4, h5, h6 {
  margin:                 0.667em 0 0.333em 0;
  font-family:            'Lucida Sans Unicode', 'Lucida Grande', 'Trebuchet MS', Helvetica, Verdana, Geneva, Calibri, sans-serif;
  font-weight:            bold;
  text-shadow:            0.1em 0 0 #ffffff;
}

h1 {
  display:                inline;
  margin:                 0;
  font-size:              100%;
  color:                  #404040;
  transition:             all 2s ease-out;
  transform:              rotateX(720deg);
}

h2 {
  font-size:              158.7%;
}

h3 {
  font-size:              126%;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  text-decoration:        none;
  color:                  inherit;
}

/************************************** Grouping content */

div#sfx {
  position:               absolute;
  left:                   0;
  top:                    0;
  width:                  100%;
  transform-style:        preserve-3d;
  transform-origin:       100px 50px;
  perspective:            200px;  
}

ul {
  list-style-type:        none;
}

article:not(#contact):not(#psa) ul {
  column-count:           2;
  -webkit-column-count:   2;
  -webkit-column-rule:    none;
  -moz-column-count:      2;
}

article:not(#contact):not(#psa) ul > li {
  white-space:            nowrap;
}

article#about > ul > li, article#about > ul > li span {
  font-family:            monospace;
/*  display:                inline; */
}

article#about > ul > li span {
}

/************************************** Text-level semantics */

strong {
  color:                  #000000;
}

a {
  font-family:            inherit;
  color:                  #0000c0;
}

article:not(#contact) a {
  text-decoration:       none;
}

article:not(#contact) a:hover,
article:not(#contact) a:active,
article:not(#contact) a:focus {
  text-decoration:       underline;
}

article#contact ul a {
  font-family:            monospace;
}

a:hover, a:active, a:focus {
  color:                  #0000ff;
  background-color:       #ffffc0;
}

abbr {
  font-family:            inherit;
}

code {
  font-family:            monospace;
}

img {
  vertical-align:         middle;
}

/************************************** Special effects */

*:target {
  border-top:             solid 1px transparent;
}

/************************************** Media queries */

/* 1.25^(1/4) = 1.0573712634 */

@media (min-width: 384px) {

  body {
    padding:              .5em 2em;
    max-width:            54em;
    font-size:            105.7%;
  }

  article ul {
  article:not(#contact):not(#psa) ul {
    column-count:         3;
    -webkit-column-count: 3;
    -moz-column-count:    3;
  }

}

/* The rest is from http://getbootstrap.com/css/#grid-media-queries */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {

  body {
    padding:              1em 4em;
    max-width:            58em;
    font-size:            111.8%;
  }

  article:not(#contact):not(#psa) ul {
    column-count:         4;
    -webkit-column-count: 4;
    -moz-column-count:    4;
  }

}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {

  body {
    padding:              1.5em 6em;
    max-width:            62em;
    font-size:            118.2%;
  }

  article:not(#contact):not(#psa) ul {
    column-count:         5;
    -webkit-column-count: 5;
    -moz-column-count:    5;
  }

}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

  body {
    padding:              2em 8em;
    max-width:            66em;
    font-size:            125%;
  }

  article:not(#contact):not(#psa) ul {
    column-count:         6;
    -webkit-column-count: 6;
    -webkit-column-width: 7em;
    -webkit-column-gap:   1em;
    -moz-column-count:    6;
  }

}