@import url('https://fonts.googleapis.com/css?family=Allerta+Stencil');

html {
  background:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('images/bg.jpg');
  -webkit-background-size:cover;
  -moz-background-size:cover;
  -o-background-size:cover;
  background-size:cover;
  background-repeat:no-repeat;
  min-height:100%;
  min-width:100%;
}

body {
  font-family:'Calibri', sans-serif;
}

header {
  padding:28pt;
  color:#2AD4D4;
}

section {
  float:left;
}

aside {
  position:absolute;
  right:0;
  bottom:1em;
  left:0;
  text-align:center;
  float:left;
  color:#D5D5D5;
}

aside ul li {
  display:inline;
  float:left;
  border:1px solid #333333;
  width:30%;
  min-height:3em;
  margin:0 0.5em 0.5em;
}

aside ul li a {
  color:#F5F5F5;
}

footer {
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  font-size:10pt;
  text-align:center;
  color:#E5E5E5;
}

button, input[type="submit"] {
  font-size:16pt;
	background-color:#2AD4D4;
	padding:0.3em 1em;
	margin-top:0.5em;
	border:0;
	color:#FFFFFF;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
  -khtml-border-radius:2px;
  border-radius:2px;
}

input[type="text"] {
  height:2em;
}

input#search {
  width:33%;
}

.logo,
.logo a {
  font-family:'Allerta Stencil', 'Segoe UI', 'Calibri', sans-serif;
  font-size:28pt;
  color:#FFFFFF;
  text-decoration:none;
}

.stage {
  text-align:center;
}

.result {
  margin:1em auto;
  padding:1em;
  background:rgba(255, 255, 255, 0.8);
  width:95%;
}

.status {
  background-color:#00D500;
  font-size:smaller;
  border-radius:2px;
  padding:1px 3px;
  color:#333333;
}

@media screen and (max-width:480px),
@media screen and (max-width:680px) {
  input#search {
    width:90%;
  }

  aside ul li {
    width:27%;
    padding:0.5em;
    margin:2px;
  }
  
  aside {
    position:relative;
  }
  
  aside ul {
    padding:0;
  }
}