html
{
    margin: 0px;
    padding: 0px;
    min-height: 100%;
    height: 100%;
}

a
{
  color: black;
  text-decoration: none;
}
  
body
{
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    font-family: verdana;
}
  
div#content
{
    background-color: #e3f2fd;
    flex: 1;
    padding: 20px;
}

body.finished div#gameOverlay
{
  background-color: rgba(200,255,200, 0.3);
}

body.paused div#gameOverlay
{
  background-color: rgba(230,230,230, 0.6);
}

body.timeout div#gameOverlay
{
  background-color: rgba(255,0,0,0.3);
}


body.countdown div#gameOverlay
{
  background-color: rgba(255,255,100,0.5);
}

div#congrats
{
  display: none;
  font-size: 1em;
}

body.finished  div#congrats
{
  display: block;
}

div#paused
{
  display: none;
  font-size: 4em;
}

body.paused  div#paused
{
  display: block;
}

div#countdownCounter
{
  display: none;
  font-size: 40rem;
  color: white;
  -webkit-text-stroke: 2px black;
  margin: 0;
  font-weight: bold;
  text-align: center;
}

body.countdown div#countdownCounter
{
  display: block;
}

body.countdown div#timeFields div#timeLeft
{
  display: none;
}

div#timeFields
{
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 4rem;
  color: white;
  -webkit-text-stroke: 2px black;
  /*text-shadow: 2px 2px #ff0000;*/
}

div#timeFields h2
{
  margin-top: 0;
}


div#timeFields .year
{
  
  -webkit-text-stroke: 4px black;
}

div#gameContainer
{
  width: 100%;
  height: 100%;
}

div#gameOverlay
{
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 100;
  
  background-image: url(/images/logosmall.png);
  background-repeat: no-repeat;
  background-position: 20px 20px;
}



div#timeFields div#timeLeft
{
  float: left;
  overflow: hidden;
}
div#timeFields div#timeRight
{
  float: right;
  overflow: hidden;
  display: none;
  width: 45%;
  border-left: 2px solid rgb(0,0,0);
}

body.finished div#timeFields
{
  font-size: 2rem;
}

body.finished div#timeFields div#timeRight
{
  display: block;
}

div#timeFields div.year
{
  clear: both;
  float: right;
  font-size: 3em;
}

div#timeFields div.month
{
  font-size: 1.25em;
  clear: both;
  float: right;
}

div#timeFields div.day
{
  clear: both;
  float: right;
  font-size: 1em;
}


footer#footer
{
  border-top: 1px solid rgb(200,200,200);
  z-index: 100;
}

footer div#timeTools
{
  visibility: hidden;
  background-color: rgba(255,255,255,0.4);
  padding: 20px;
  font-size: 1.3em;
}

footer:hover div#timeTools
{
  visibility: visible;
  overflow: hidden;
}

footer div#timeTools a.start
{
  display: block;
  float: left;
  padding: 7px;
  color: white;
  background-color: green;
}

footer div#timeTools a.done
{
  display: block;
  float: right;
  padding: 7px;
  color: white;
  background-color: green;
}

/* Hide nav for states where they're not needed */
footer div#timeTools a.addMinute,
footer div#timeTools a.removeMinute,
footer div#timeTools a.pause,
footer div#timeTools a.done
{
  display: none;
}

body.running footer div#timeTools a.addMinute,
body.running footer div#timeTools a.removeMinute,
body.running footer div#timeTools a.pause
{
  display: inline;
}


body.running footer div#timeTools a.done
{
  display: block;
}


body.running footer div#timeTools a.start
{
  display: none;
}