* { margin: 0; padding: 0; }

body { background-color: #fff; color: #000; font: normal 10px Verdana, Geneva, Arial, Helvetica, sans-serif; }

html, body { overflow: hidden; }
html, body, div#wrap { width: 100%; height: 100%; }
body, div#wrap { display: flex; }
div#wrap { flex-direction: column; justify-content: space-between; max-width: 640px; max-height: 480px; margin: auto; }

a { color: #558; }
a:hover { color: #965; }

img { border: 0; }

div#main { position: relative; margin: 5px; }
div#main p { font-size: 14px; background-color: rgba(255, 255, 255, 0.8); padding: 0.75em 1em; border-radius: 1em; }

h1 { margin: 0; font-size: 24px; font-weight: bold; font-family: Tahoma, Geneva, sans-serif; opacity: .69; }
h2 { margin: .75em 0 .10em 0; font-size: 24px; font-weight: bold; }

.sb { display: /* zip, zero, nadda */ none; }

#cells { position: absolute; margin: auto; width: 100%; height: 100%; max-width: 640px; max-height: 480px; }
#cells div { position: absolute; opacity: 0.69; outline-style: solid; transition: outline-width 10s ease-out; outline-width: 0; }
#cells div.clicked { background-color: #000 !important; box-shadow: 0 0 5px #000; }

@media (max-width: 640px), (max-height: 480px) {
	#cells { overflow: hidden; }
}

#cells div:hover { transition: outline-width 500ms linear; outline-width: 24px; }

span.word { display: inline-block; position: relative; animation-name: fadein; animation-duration: 2s; }
span.word:after { position: absolute; bottom: -1px; left: 0; width: 100%; line-height: 10px; font-size: 10px; text-align: center; border-top: 1px solid #555; color: #555; white-space: nowrap; letter-spacing: -1px; }
span.word.wordtype-adj:after { content: "adj."; }
span.word.wordtype-noun:after { content: "noun"; }
span.word.wordtype-number:after { content: "num."; }
span.word.wordtype-plnoun:after { content: "pl. noun"; }
span.word.wordtype-plprof:after { content: "pl. profession"; }
span.word.wordtype-verb:after { content: "verb"; }
span.word.wordtype-verbing:after { content: "verb ending in -ing"; }

div#footer { position: relative; opacity: .8; font-family: "Trebuchet MS", Helvetica, sans-serif; text-align: center; z-index: 5; }
div#footer-in { margin: 0 auto; }
div#footer-nav ul { margin: 0; list-style: none; }
div#footer-nav ul li { display: inline-block; }
div#footer-nav ul li a { background-color: #1f1f1f; color: #cdcdcd; font-size: 12px; display: block; margin: 0 1px; padding: 4px 10px; text-decoration: none; }
div#footer-nav ul li a:hover { transition: background-color 500ms ease; background-color: rgba(127, 70, 32, .69); color: #f0f0f0; text-shadow: 1px 1px 0 #1f1f1f; box-shadow: 0 0 2px 2px rgba(127, 70, 32, .42); }
div#footer-last_right { font-size: 10px; color: #4e4e4e; text-align: right; }

@keyframes fadein { from { color: rgba(0,0,0,0); } to { color: rgba(0,0,0,1); } }