* {
    padding: 0px;
    margin: 0px;
    list-style: none;
    font-family: sans-serif;

}

html, body {
  height: 100%;
  min-height: 730px;
  min-width: 572px;
  background-color: beige;
}

.page {
  min-height: 100%;
  margin: 0 auto -40px;
  text-align: center;
  overflow: hidden;
}

.buttons-container {
  display: flex;
}

button{
  width: 150px;
  height: 50px;
  margin: 20px;
}


#logo {
  width: 240px;
  height: 70px;
  background: url(../img/logo.png) center center no-repeat;
  position: relative;
  align-self: center;
  margin: 20px;
}

#console {
  align-self: center;
  display: block;
  width: 572px;
  height: 350px;  
  background:  url("../img/game-bg.jpg") center center no-repeat;
  position: relative;
}

#game-container {
  display: flex;
  flex-direction: column;
}

#score-container  h3 {
  margin: 5px;
}

#score-container {
  width: 200px;
  height: 125px;
  text-align: center;
  display: inline-block;
  background-color:rgb(224, 221, 221);
  text-decoration: none;
  padding: 10px 10px;
  border: 1px solid rgb(122, 122, 122);

}

#score-container.invisible {
  display: none;
}


/* Wolf body setup */
/* wolf body has 2 positions - left and right*/

div.wolf-left{
  position: absolute;
  width: 98px;
  height: 152px;
  background: url("../img/wolf/wolf-p-0.png") center center no-repeat; 
  top: 166px;
  left: 177px;
}

#wolf.wolf-right{
  position: absolute;
  width: 98px;
  height: 152px;
  background: url("../img/wolf/wolf-p-1.png") center center no-repeat; 
  top: 165px;
  left: 292px;
}

/* basket */
/* basket has 4 positions: bottom-left, top-left, bottom-right, top-right */

.basket-bot-left {
  width: 84px;
  height: 78px;
  position: absolute;
  background: url("../img/basket/basket-p-0-0.png") center center no-repeat; 
  top: 227px;
  left: 127px;
}


.basket-top-left {
  width: 84px;
  height: 78px;
  position: absolute;
  background: url("../img/basket/basket-p-0-1.png") center center no-repeat; 
  top: 158px;
  left: 127px;
}


.basket-bot-right {
  width: 84px;
  height: 78px;
  position: absolute;
  background: url("../img/basket/basket-p-1-0.png") center center no-repeat; 
  top: 235px;
  left: 360px;
}


.basket-top-right {
  width: 84px;
  height: 78px;
  position: absolute;
  background: url("../img/basket/basket-p-1-1.png") center center no-repeat; 
  top: 165px;
  left: 366px;
}



/* EGGS */

/* starting position for egg1 */
#eggs .egg1 {
    width: 15px;
    height: 15px;
    background: transparent url('../img/egg/egg.png') center center no-repeat;
    position: absolute;
    top: 198px;
    left: 47px;
    -moz-transform:rotate(65deg);
    -webkit-transform:rotate(65deg);
    -o-transform:rotate(65deg);
    -ms-transform:rotate(65deg);
    transform: rotate(65deg);
}



#eggs .egg2 {
  width: 15px;
  height: 15px;
  background: transparent url('../img/egg/egg.png') center center no-repeat;
  position: absolute;
  top: 120px;
  left: 48px;
  -moz-transform:rotate(65deg);
  -webkit-transform:rotate(65deg);
  -o-transform:rotate(65deg);
  -ms-transform:rotate(65deg);
  transform: rotate(65deg);
}

#eggs .egg4 {
  width: 15px;
  height: 15px;
  background: transparent url('../img/egg/egg.png') center center no-repeat;
  position: absolute;
  top: 120px;
  left: 507px;
  -moz-transform:rotate(350deg);
  -webkit-transform:rotate(350deg);
  -o-transform:rotate(350deg);
  -ms-transform:rotate(350deg);
  transform: rotate(350deg);
}

#eggs .egg3 {
  width: 15px;
  height: 15px;
  background: transparent url('../img/egg/egg.png') center center no-repeat;
  position: absolute;
  top: 198px;
  left: 507px;
  -moz-transform:rotate(350deg);
  -webkit-transform:rotate(350deg);
  -o-transform:rotate(350deg);
  -ms-transform:rotate(350deg);
  transform: rotate(350deg);
}



/* SCORE */

#console #score {
    position: absolute;
    top: 48px;
    left: 326px;
  }
#console #score ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
    }

/* a background for the score field */
#console #score ul > li {
    width: 31px;
    height: 47px;
    margin: 0 0 0 -2px;
    background: transparent url('../img/score/num-bg.png');
    display: inline-block;
    vertical-align: top;
    }

    /* img with all numbers are attachet to background of <span> element inside each <li> element */
    /* but its background position == 0, 0 and it makes it invisible */
#console #score ul > li span {
    width: 100%;
    height: 100%;
    background: transparent url('../img/score/nums.png');
    background-position: 0px 0px;
    /* text-indent: -200px; */
    display: block;
    overflow: hidden;
    animation-duration: 3s;
  }

  /* then li element gets a class [n-0, n-2 etc] background-position is changing and particular number is shown on the web page */
  #console #score ul > li.n-0 span {
    background-position: 0px 0px;
  }
  #console #score ul > li.n-1 span {
    background-position: -31px 0px;
  }
  #console #score ul > li.n-2 span {
    background-position: -62px 0px;
  }
  #console #score ul > li.n-3 span {
    background-position: -93px 0px;
  }
  #console #score ul > li.n-4 span {
    background-position: -124px 0px;
  }
  #console #score ul > li.n-5 span {
    background-position: -155px 0px;
  }
  #console #score ul > li.n-6 span {
    background-position: -186px 0px;
  }
  #console #score ul > li.n-7 span {
    background-position: -217px 0px;
  }
  #console #score ul > li.n-8 span {
    background-position: -248px 0px;
  }
  #console #score ul > li.n-9 span {
    background-position: -279px 0px;
  }



  /* LOSS */

  /* div with the full picture is already on the page but attribute <width> == 0 and pic is invisible*/
  div#loss {
    height: 32px;
    width: 0px;
    position: absolute;
    top: 115px;
    left: 327px;
    background: url(../img/loss/loss.png) left center no-repeat;
  }

/* when loss gets additional class [one, two, tree] it gets corresponding width that expose 1, 2 or 3 elements*/
div#loss.one {
    width: 36px;
  }

div#loss.two {
    width: 75px;
 
  }

div#loss.three {
    width: 114px;

  }


/* Animation for blinking */
.blink_me {
  animation: blinker 1s linear infinite;
}
  
@keyframes blinker {
  50% {
    opacity: 0;
  }
}