html, head, body, h1, figure,
li, ul, div {
  margin: 0;
  padding: 0;
  color: white;

}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

@-webkit-keyframes blink { from {visibility: inherit; } to { visibility: hidden; } }
@-moz-keyframes blink { from {visibility: inherit; } to { visibility: hidden; } }
@keyframes blink { from {visibility: inherit; } to { visibility: hidden; } }

.fade-in {
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;

	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration:3s;
	-moz-animation-duration:3s;
	animation-duration:3s;
}

html {
  background-color: black;
}

span{
  visibility: inherit;
  -webkit-animation: blink 1s steps(5, start) infinite;
  -moz-animation: blink 1s steps(5, start) infinite;
  animation: blink 1s steps(5, start) infinite;

}

figure{
  margin: auto;
  height: auto;
  background-image: url('../assets/background.png');
  background-size: auto;
  border: 1px solid black;
  border-radius: 5px;
}

h1 {
  margin: auto;
  font-family: Bangers;
}

.best-score {
  text-indent: 10px;
}

.score {
  text-indent: 10px;
}

/*.clearfix:after{
  display: block;
  content: "";
  clear: both;
}*/

ul{
  height: 75px;
  /*border-left: 1px solid  #00004d;*/
  /*border-right: 1px solid  #00004d;*/
}

/*ul:last-child{
  border-bottom: 2px solid  #00004d;
}*/



li{
  float: left;
  list-style: none;
  display: block;
  height: 75px;
  width: 75px;
  /*height: auto;
  width: auto;*/
  /*background-image: url('../assets/background.png');*/
  background-size: initial;
  background-repeat: no-repeat;
}


/*li.N{
  background-image: url("../assets/minion-up.gif");
}
li.S{
  background-image: url("../assets/minion-down.gif");
}
li.W{
  background-image: url("../assets/minion-left.gif");
}
li.E{
  background-image: url("../assets/minion-right.gif");
}*/

.snake {
  background-image: url("../assets/sprite.png");
}

li.apple {
  background-image: url("../assets/teemo.png");
}

.N.move1 {
  background-position: 0px -225px;
}
.N.move2 {
  background-position: -75px -225px;
}
.N.move3 {
  background-position: -150px -225px;
}

.S.move1 {
  background-position: 0px -150px;
}
.S.move2 {
  background-position: -75px -150px;
}
.S.move3 {
  background-position: -150px -150px;
}

.W.move1 {
  background-position: 0px -75px;
}
.W.move2 {
  background-position: -75px -75px;
}
.W.move3 {
  background-position: -150px -75px;
}

.E.move1 {
  background-position: 0px 0px;
}
.E.move2 {
  background-position: -75px 0px;
}
.E.move3 {
  background-position: -150px 0px;
}


.hidden {
  display: none;
}


.screen{
  font-family: Bangers;
  position: absolute;
  top: 33%;
  left: 33%;
  width: 33%;
  background-color: #660000;
  padding: 30px 20px;
  border: 2px solid #cc7a00;
  border-radius: 5px;
  font-size: 26px;
  text-align: center;
  z-index: 1;
}

.scores {
  padding: 5px 0px;
  display: flex;
  background-color: #660000;
  font-family: sans-serif;
  border-bottom: 3px solid #cc7a00;
}

.score-container {
  margin: 0 auto;
  display: inline-block;
}

.score-container h1 {
  display: inline-block;
}
/*
div {
  display: block;
  width: 300px;
  background: #000080;
  color: #FFD700;
  position: fixed;
  margin: 0 auto;
  top: 20px;
  z-index: 1;
  padding: 20px;
  border: 5px solid #fff;
}*/