html, body {height: 100%; width: 100%; margin: 0; padding: 0;}
body {background: #fff url('../images/druplicon.jpg') center top 30px no-repeat; background-size: 57.4%; font: 20px/28px arial, verdana, helvetica, sans-serif; color: #333;}

* {box-sizing: border-box;}

a {color: #777; font-weight: bold; text-decoration: none;}
a:hover {text-decoration: underline;}

#page {padding: 30px; height: 100%; background: url('../images/flottefyre.png') center top no-repeat; background-size: cover;}
#content {position: relative; height: 100%;}
#content section {position: absolute; bottom: 0; width: 800px; max-width: 100%; background: #fff; background: rgba(255,255,255,.9); text-align: center; box-shadow: 0 0 5px rgba(0,0,0,.3); transition: padding .3s ease, background .2s ease;}
#content a {height: 100%; width: 100%; display: block; color: #333; padding: 25px; transition: padding .3s ease, background .2s ease, color .2s ease; background: transparent;}
#content a:hover {background: rgba(240,240,240,1); color: #333; text-decoration: none;}
#content a label {font-weight: normal; color: #777; white-space: nowrap; font-size: .8; display: block; cursor: pointer;}

@media (min-width: 860px) {
  body {background-size: auto;}
  #content section {left: 50%; margin: 0 0 0 -400px;}
  #content a {padding: 50px; color: #777;}
  #content a label {display: inline;}
  #content a label::after {content: ":";}
}