/* CONFIG */
/* END CONFIG */
html, body { font-family: 'Roboto', sans-serif; width: 100%; height: 100%; margin: 0px; padding: 0px; box-sizing: border-box; }

body { position: fixed; display: table; }

.animate { -webkit-transition: background 5s ease-in-out, opacity 5s ease-in-out, border 5s ease-in-out; -moz-transition: background 5s ease-in-out, opacity 5s ease-in-out, border 5s ease-in-out; -o-transition: background 5s ease-in-out, opacity 5s ease-in-out, border 5s ease-in-out; transition: background 5s ease-in-out, opacity 5s ease-in-out, border 5s ease-in-out; }

h1 { width: 100%; font-size: 4rem; margin: 1rem 0 1rem 0; }

h2 { margin: 1rem 0 1rem 0; font-style: italic; font-size: 1.2rem; color: #555; }

p { float: left; clear: both; }

body > div { display: table-cell; vertical-align: middle; /*padding: 0 2rem 0 2rem;*/ margin: 0; box-sizing: border-box; }

body > div > div { width: 100%; max-width: 1000px; margin: 0px auto; box-sizing: border-box; }

#game { width: 540px; height: 540px; background-color: #eee; float: left; margin-right: 1rem; position: relative; overflow: hidden; }

.snake-bit, .snake-sample { background: green; width: 12px; height: 12px; color: green; font-size: 6px; line-height: 10px; text-align: center; font-weight: 400; overflow: hidden; position: absolute; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; }

.food { background: #CE0049; width: 12px; height: 12px; border-radius: 50%; overflow: hidden; position: absolute; opacity: 1; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -webkit-transition: background 5s ease-in-out, opacity 5s ease-in-out, border 5s ease-in-out; -moz-transition: background 5s ease-in-out, opacity 5s ease-in-out, border 5s ease-in-out; -o-transition: background 5s ease-in-out, opacity 5s ease-in-out, border 5s ease-in-out; transition: background 5s ease-in-out, opacity 5s ease-in-out, border 5s ease-in-out; }

.invisible { opacity: 0; }

.hide { opacity: 0; position: absolute; top: -10000px; }

.debug_overlays { color: #fff; }

#controls { float: left; }

#score-board { clear: both; float: left; display: block; padding: 1rem 0 1rem 0; font-size: 2rem; font-weight: 700; }

#message-board i { color: #777; }
#message-board b.red { color: red !important; font-weight: normal; }
#message-board b.green { color: #009a00 !important; }

.github { float: left; clear: left; }

.button { float: left; cursor: pointer; font-size: 1rem; background: #0076E3; color: #fff; padding: 0.5rem 1rem 0.5rem 1rem; border-radius: 3px; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; }
.button:hover { background: #1790ff; }

#head { z-index: 5; }

#snake-head-right, #snake-head-left, #snake-head-down, #snake-head-up { background: inherit; text-align: center; line-height: 100%; width: 100%; height: 100%; color: #fff; }
#snake-head-right div, #snake-head-left div, #snake-head-down div, #snake-head-up div { width: 50%; height: 100%; float: right; }
#snake-head-right div div, #snake-head-left div div, #snake-head-down div div, #snake-head-up div div { border: 1.8px solid green; box-sizing: border-box; background: #1aff1a; float: left; height: 50%; width: 100%; }

#snake-head-right { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); }

#snake-head-left { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }

#snake-head-down { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); }

#snake-head-up { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); }