/**
 * CSS Style.
 */

/* Global */

a,
a:focus,
a:hover {
  color: #222;
  text-decoration: none;
}

html,
body {
  height: 100%;
  min-height: 30em;
}

body {
  width: 100%;
  color: #444;
  font-size: 125%;
  font-weight: 300;
  font-family: BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

header {
  top: 0em;
  width: 100%;
  position: fixed;
  animation: 1s ease-out 0s 1 slideInFromTop;
  margin-top: 2em;
  text-align: center;
}

nav a {
  color: #222;
  margin: 0 .5em;
  padding: .5em;
  border-top: .3rem solid transparent;
}

nav a:hover,
nav a:focus {
  border-top-color: #bbb;
}

nav .active,
nav:active {
  color: #222;
  border-top-color: #666;
}

main {
  width: 100%;
  height: 100%;
  display: table;
  min-height: 100%;
  box-shadow: inset 0 0 5rem rgba(0,0,0,.5);
  background-image: url(/img/paper.png);
  background-color: #eee;
}

main section {
  width: 100%;
  height: 100%;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

main section h1 {
  font-size: 10em;
  font-family: candy;
  font-weight: normal;
  margin-top: -20px;
}

main section p {
  font-size: 1.5em;
  margin-top: -1.5em;
  font-weight: bold;
  margin-bottom: 2em;
}

main svg {
  width: 5em;
  margin: 0 .2em;
}

main svg path {
  fill: #888;
}

main a:hover svg path {
  fill: #333;
}

header a,
main svg path {
  -webkit-transition: .4s ease-in-out;
     -moz-transition: .4s ease-in-out;
       -o-transition: .4s ease-in-out;
          transition: .4s ease-in-out;
}

footer {
  display: table-row;
}

footer section {
  padding-bottom: 0.6em;
  font-size: 0.7em;
  color: #777;
  text-shadow: 1px 0 #ddd;
}