html { font-size: 10px; overflow: hidden; }

body { background: url(/images/nds/bgtile-big.png); background-position: 0 16px; margin: 0;
       display: flex; flex-direction: column; height: 100vh; }

header { background: url(/images/nds/bar_red.png) top repeat; color: white; border-bottom: 1px solid black; height: 15px; flex: 0 1 auto;
         display: flex; align-items: center; justify-content: space-between; }

header p { font-size: 7px; margin: 0 3px; }

header time { letter-spacing: 1px; }

main { margin: 0 15px; flex: 1 1 auto;
       display: flex; align-items: center; justify-content: center; flex-direction: column; /* change this to a grid or sth later... maybe grid with unit spaces 47px in size? */ 
       }

footer { display: flex; align-items: center; justify-content: space-between; margin: 0 34px 16px 18px; flex: 0 1 auto; }

p { font-family: "NDS12", sans-serif; margin: 0; }

a { text-decoration: none; }

a[href="#brightness"] { background-image: url(/images/nds/bright_on.png); height: 11px; width: 11px; }
a[href="/extra/nds/settings/"] { background-image: url(/images/nds/21ds.png); height: 21px; width: 21px; }
a:active[href="/extra/nds/settings/"] { background-image: url(/images/nds/21sd.png); height: 21px; width: 21px; }
a[href="#alarm"] { background-image: url(/images/nds/alarm.png); height: 11px; width: 11px; }

div.right { display: flex; align-items: center; justify-content: space-evenly; text-align: center; }

span.head { border-left: 1px dashed #484848; height: 15px; line-height: 15px; }

span.mode, span.scrn { width: 15px; background-repeat: no-repeat; background-position: 2px 2px; }
span.time, span.date { width: 31px; }

span.top { background-image: url(/images/nds/screen-top.png) }
span.touch { background-image: url(/images/nds/screen-touch.png) }
span.manual { background-image: url(/images/nds/mode-manual.png) }
span.auto { background-image: url(/images/nds/mode-auto.png) }

div.box { height: 39px; width: 140px; border: 1px solid black; line-height: 39px; text-align: center;
          display: flex; flex-direction: column; align-items: center; justify-content: center; }

div.box span { /* display: inline-block; vertical-align: middle; */ line-height: normal; }

div.wide { height: 41px; width: 185px; border: 1px solid white;
           display: flex; }

div.wide.on  { background-image: url(/images/nds/boxbar.png); outline: 1px solid black; }
div.wide.off { background-image: url(/images/nds/boxbaroff.png); outline: 1px solid #e3e3e3; }

div.on > div.box  { background-image: repeating-linear-gradient(#e3e3e3, #e3e3e3 1px, #fbfbfb 1px, #fbfbfb 2px); border-color: #a2a2a2; color: #282828; border-left-color: #797979 }
div.off > div.box { background-color: #fbfbfb; border-color: #e0e0e0; color: #a2a2a2; }

div.game { width: 43px; height: 41px;  background-position: 5px 4px; background-repeat: no-repeat; }

div.game.card { background-image: url(/images/nds/banners/banner_0000.png);}

div.off > div.game.card { background-image: url(/images/nds/dscard.png); }
div.off > div.game.pak  { background-image: url(/images/nds/gbapak.png); }

a:active > div.wide.on { background-image: url(/images/nds/boxbartouch.png); border-color: #a2a2a2; }
a:active div.box { background-image: repeating-linear-gradient(#c3c3c3, #c3c3c3 1px, #a2a2a2 1px, #a2a2a2 2px); border-color: #fbfbfb; border-left-color: #797979; }

div.spacer { height: 33px; }

div.colorContainer {
  height: 142px;
  width: 142px;
  border: 1px solid #AAAAAA;
  outline-right: 1px solid #929292;
  outline-bottom: 1px solid #929292;
  background: white;
  display: grid;
  grid-template-columns: repeat(4, 32px);
  grid-auto-rows: 32px;
}

div.colorBox {
  height: 24px;
  width: 24px;
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
div.colorBox { border: 1px dashed white }

div.color {
  height: 16px;
  width: 16px;
}