@import 'font-awesome';

// Quick FontAwesome fix so icons push the sentence
// a bit to the right
[class^="icon-"]:before { margin-right : .5rem }

* { 
  margin             : 0; 
  padding            : 0; 
  outline            : 0; 
  border             : 0; 
  -webkit-box-sizing : border-box 
}

ul    { list-style : none }
input, button, textarea { font-size : 100% }

html { height : 100%; min-height : 420px; font-size : 62.5%; overflow-x : hidden  }
html, body { height : 99.9% }
body {
  font-size   : 1.5rem;
  line-height : 2.3rem;
  width       : 100%;
  -webkit-perspective      : 800;
  -webkit-text-size-adjust : none;
  -webkit-transform-style  : preserve-3d;
  -webkit-user-select      : none;
}

// A base section unit. Think of this as a "screen".
body > section {
  display        : block;
  position       : absolute;
  padding        : 1.6rem 0;
  top            : 0;
  left           : 0;
  width          : 100%;
  opacity        : 0;
  overflow       : auto;
  overflow-x     : hidden;
  pointer-events : none;
  -webkit-transition      : all 0.25s ease-in-out;
  -webkit-transform-style : preserve-3d;
  -webkit-transform       : translate3d(100%,0%,0);
  &>*:not(header) {
    margin-left   : 1rem !important;
    margin-right  : 1rem !important;
  }
  &.current {
    opacity        : 1;
    pointer-events : auto;
    -webkit-transform : translate3d(0%,0%, 0)
  }
}

// Floating header, header stuffs
body > section > header {
  margin     : 0;
  text-align : center;
  &.fixed {
    position : fixed;
    top      : 0;
    left     : 0;
    width    : 100%;
    z-index  : 10000
  }
  & + * { margin-top : 4.6rem !important }
  h1 {
    font-size   : 1.9rem;
    margin      : 0.9rem 0;
    white-space : nowrap
  }
  a {
    position        : absolute;
    font-size       : 1.9rem;
    margin-top      : 0.9rem;
    text-decoration : none;
    &.left  { left  : 1.6rem }
    &.right { right : 1.6rem }
  }
}

// Type margins and sizes
body > section {
  h1 { font-size: 2.9rem; margin-bottom : 1.6rem }
  h2 { font-size: 2.6rem; margin: 1.3rem 0 }
  p, input, textarea, button, li { font-size : 1.8rem }
  p { margin : 0.9rem 0 }
}

form {
  margin : 1.3rem 0;
  label { 
    display     : block;
    margin      : 0.25em 0;
    font-weight : bold;
  }
  input, textarea { 
    display     : block;
    padding     : 0.9rem;
    width       : 100%;
    font-family : inherit;
  }
}

ul.common {
  li {
    padding : 0.9rem;
  }
}

// Rules for opting-in
.t-centered { text-align : center }
.t-padded-top { padding-top : 5rem }
.t-left-align { text-align : left }
h1.t-bigger { font-size : 3.9rem }


#notifications {
  position : fixed; 
  right    : 0;
  bottom   : 0;
  left     : 0;
  li {
    display     : none;
    padding     : 0.6rem 1rem;
    font-weight : bold;
    font-size   : 1.6rem;
    &:before { margin-right : 1rem }
  }
}