html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: sans-serif;
}

p {
  text-align: center;
  font-size: 25px;
  background-color: #eaeaea;
}

#container {
  height: 90%;
  width: 90%;
  margin-left: 5%;
  position: relative;
  border: 1px solid red;
  overflow: hidden;
  background-color: #31b6ce;
}

#score_help {
  text-align: center;
  font-size: 25px;
  background-color: #eaeaea;
}

#branch {
  position: absolute;
  height: 2%;
  width: 100%;
  background-color: #7b2e00;
  top: 23%;
}

.hen {
  position: absolute;
  height: 16.9%;
  width: 13%;
  top: 7%;
  background: url('hen-right.png');
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 100;
}

#hen1 {
  left: 20%;
}

#hen2 {
  left: 40%;
}

#hen3 {
  left: 60%;
}

.egg {
  position: absolute;
  top: 18%;
  height: 5%;
  width: 2%;
  background-color: #fff;
  border-radius: 50%;
  z-index: 99;
}

#egg1 {
  left: calc(20% + 8%/2 - 2%/2);
}

#egg2 {
  left: calc(40% + 8%/2 - 2%/2);
}

#egg3 {
  left: calc(60% + 8%/2 - 2%/2);
}

.bullseye {
  display: none;
  position: absolute;
  bottom: 0px;
  height: 7%;
  width: 10%;
  background: url('bullseye1.png');
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 11;
}

#bullseye1 {
  left: calc(20% + 8%/2 - 7%/2);
}

#bullseye2 {
  left: calc(40% + 8%/2 - 7%/2);
}

#bullseye3 {
  left: calc(60% + 8%/2 - 7%/2);
}

#floor {
  position: absolute;
  height: 7%;
  width: 100%;
  background-color: #292929;
  bottom: 0;
  z-index: 10;
}

#basket {
  height: 100px;
  width: 85px;
  position: absolute;
  bottom: 5px;
  background: url('basket.png');
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  z-index: 11;
}

#score_1 {
  position: absolute;
  color: #424242;
  font-size: 30px;
  top: 45%;
  left: 30%;
}

#restart {
  border: 0;
  position: absolute;
  left: 30%;
  border-radius: 50%;
  height: 10%;
  width: 30%;
  background-color: fuchsia;
  color: white;
  top: 40%;
  font-size: 35px;
  display: none;
  cursor: pointer;
}