/* Reset browser styles */
h1, h2, h3, p, div, ul, li, a {
  margin: 0;
  padding: 0;
  border: 0;
}

/* Sprite Stuff */
:root {
   --pixel-size: 4;
}
 
.Character {
   width: calc(32px * var(--pixel-size));
   height: calc(32px * var(--pixel-size));
   overflow: hidden;
   position: relative;
   margin: 0;
   background-color: pink 0.5;
}

.Character_spritesheet {
   animation: moveSpritesheet 1s steps(4) infinite;
   width: calc(128px * var(--pixel-size));
   position: absolute;
}

.Character_shadow { 
   position: absolute;
   width: calc(32px * var(--pixel-size));
   height: calc(32px * var(--pixel-size));
}

.pixelart {
   image-rendering: pixelated;
}

.face-left {
   top: calc(-32px * var(--pixel-size));
}
.face-right {
   top: calc(-64px * var(--pixel-size));
}
.face-up {
   top: calc(-96px * var(--pixel-size));
}

@keyframes moveSpritesheet {
   from {
      transform: translate3d(0px,0,0)
   }
   to {
      transform: translate3d(-100%,0,0)
   }
}
html, body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: 'Roboto', 'sans-serif';
  color: darkcyan;
  overflow: hidden;
  background: none;
}
footer {
  position: fixed;
  bottom: 2.5%;
  display: block;
  width: 200px;
  height: 100px;
  overflow-y: scroll;
}

#audio {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	opacity: 50%;
}

#master-grid-container {
  display: grid;
  width: 8000px;
  height: 8000px;
  grid-template-columns: repeat(500, 16px);
  grid-template-rows: repeat(500, 16px);
  margin: 10000px;
  background: green;
}

#home-container {
	height: 100vh;
	width: 100vw;
	background: DarkSlateGrey;
}

#embersEdgeLogo {
padding-top: 25px;
background: DarkSlateGrey;
width: 100%;
}

#embersEdgeLogo img {
margin: auto;
display: block;
max-width: 100%;
height: auto;
}

#signin-container {
	background: DarkSlateGrey;
	z-index: 5;
}

#signin-form-container {
  padding: 0;
  text-align: center;
}

#signin-form {
margin: 25px;
background: DarkSlateGrey;
}

/* color grass/grid background */

.grid-item {
  width: 16px;
  height: 16px;
  background-color: #33cc33;
}