@font-face {
 font-family: "Decima Mono";
 src: url("/DecimaMonoPro.otf") format("otf");
}

@font-face {
 font-family: "3Dventure";
 src: url("/3Dventure.woff2") format("woff2"),
        url("/3Dventure.woff") format("woff"),
        url("/3Dventure.otf") format("otf");
}
* { box-sizing:border-box; }
html {
  width: 100%;
  height: 100%;
}
body {
  background-color: #333;
  color: #fff;
  font-family: "Decima Mono", monospace;
  width: 100%;
  height: 100%;
  position: relative;
  font-size:18px;
}
a {
  text-decoration: none;
  color: white;
  display: block;  
}
nav, footer {
  position: absolute;
  left: 0;
  width: 100%;
  z-index:1;
}
nav {
  top:0; 
}
.logo {
  display: inline-block;
  color:#00ffff;
  font-family: "3Dventure", monospace;
  font-size:2em;
  padding:15px;
}
nav > a {
  float:right;  
  padding: 20px;
  -o-transition: 350ms ease all;
  -ms-transition: 350ms ease all;
  -moz-transition: 350ms ease all;
  -webkit-transition: 350ms ease all;
  transition: 350ms ease all;
}
nav > a:hover {
  color:#00ffff;  
}
footer {
  bottom:0;
}
footer > a {
  width:72px;
  height:59px;
  margin:25px;
  position:relative;
}
.footer-image {
  display: block;
  width:100%;
  height:100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('/neocitieslogo.svg');
}
.footer-text {
  z-index:1;
  font-size:0.8em;
  position: absolute;
  top:0;
  left:50%;
  width:8em;
  text-align:center;
  opacity:0;
  visibility: hidden;
  -o-transform:translate(-50%, 0);
  -ms-transform:translate(-50%, 0);
  -moz-transform:translate(-50%, 0);
  -webkit-transform:translate(-50%, 0);
  transform:translate(-50%, 0);
  -o-transition: 350ms ease all;
  -ms-transition: 350ms ease all;
  -moz-transition: 350ms ease all;
  -webkit-transition: 350ms ease all;
  transition: 350ms ease all;
}
footer > a:hover .footer-text {
  opacity:1;
  visibility: visible;
  -o-transform:translate(-50%, -40px);
  -ms-transform:translate(-50%, -40px);
  -moz-transform:translate(-50%, -40px);
  -webkit-transform:translate(-50%, -40px);
  transform:translate(-50%, -40px);
}
section {
  width: 100%;
  height: 100%;
  position: relative;
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}
h1 {
  font-size: 4em;
  margin:0 0.17em;
  color:#00FFFF;
  font-family: "3Dventure", monospace; 
  text-align: center;
}
form {
  text-align: center; 
}
textarea, input, button { outline: none; }
input[type=text] {
  border: 1px solid white;
  background: transparent;
  width:250px;
  height:40px;
  line-height:40px;
  box-sizing:border-box;
  display:inline-block;
  vertical-align: top;
  padding: 0 20px;
  color: #fff;
  -o-transition: 350ms ease all;
  -ms-transition: 350ms ease all;
  -moz-transition: 350ms ease all;
  -webkit-transition: 350ms ease all;
  transition: 350ms ease all;
}
input[type=submit] {
  background:transparent;
  color:#fff;
  border: 1px solid white;
  cursor:pointer;
  height:40px;
  line-height:40px;
  padding: 0 20px;
  display:inline-block;
  vertical-align:top;
  -o-transition: 350ms ease all;
  -ms-transition: 350ms ease all;
  -moz-transition: 350ms ease all;
  -webkit-transition: 350ms ease all;
  transition: 350ms ease all;
}

input[type=text]:focus,
input[type=submit]:focus {
  border-color:#00ffff;
}