body {
padding: 2em; margin: 0; background-color: #555; color: white; font: 1.5em Helvetica, sans-serif; /* Prepare for having a background-image */ background-position: center center fixed no-repeat; background-repeat: no-repeat; background-attachment: fixed; background-size: cover;
}
/* Overlay image */ body:before {
content: " "; margin: 0; padding: 0; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADAQMAAABs5if8AAAAA3NCSVQICAjb4U/gAAAABlBMVEUAAAD///+l2Z/dAAAAAnRSTlP/AOW3MEoAAAAJcEhZcwAACusAAArrAYKLDVoAAAAWdEVYdENyZWF0aW9uIFRpbWUAMjUvMDQvMTHvvlk6AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M1cbXjNgAAAA5JREFUCJljSGB4wPAAAAVmAiGdUf+vAAAAAElFTkSuQmCC); opacity: .3; z-index: -1;
}
h1, h2, h3 {
margin: 0; padding: 0; text-shadow: black 0 0 7px;
}
h1 {
font-size: 230%;
}
h2 {
font-size: 150%;
}
h3 {
font-size: 100%; margin-top: 1ex; font-weight: normal;
}
form {
opacity: .5; position: absolute; bottom: 42px; left: 42px;
}
form:hover {
opacity: 1;
}
input {
font-size: 1em; color: inherit; text-decoration: none; padding: .2em .3em; background: #222; color: #aaa; -webkit-border-radius: .4em; -moz-border-radius: .4em; -o-border-radius: .4em; border-radius: .4em; border: .1em solid #222; cursor: pointer; width: 2em; height: 2em;
}
input:hover {
border-color: inherit;
}
@media (max-width:800px) {
input { font-size: 2em; }
}