html,
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden !important;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}


#container {
  width: 95%;
  height: 95%;
  border-radius: 25px;
  background-image: url(images/bkg.jpg);
  background-size: cover;
  background-position: center right;
  overflow: hidden;
}

#score_help {
  display: flex;
  flex-direction: column;
  font-size: 60px;
  position: absolute;
  right: 5%;
  top: 5%;

}

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

.hen1 {
  position: absolute;
  height: 24%;
  width: 12%;
  top: 6%;
  background: url("images/Heavenly\ Magic\ Cappuccino.png");
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 100;
}

.hen2 {
  position: absolute;
  height: 24%;
  width: 12%;
  top: 6%;
  background: url("images/Magic\ Cone\ Vanilla.png");
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 100;
}

.hen3 {
  position: absolute;
  height: 24%;
  width: 12%;
  top: 6%;
  background: url("images/Magic\ Heavenly\ Crunch.png");
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 100;
}

#hen1 {
  left: 12%;
}

#hen2 {
  left: 42%;
}

#hen3 {
  left: 72%;
}


#egg1 {
  position: absolute;
  height: 15%;
  width: 8%;
  top: 10%;
  background: url("images/choco.png");
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 99;
}

#egg2 {
  position: absolute;
  height: 15%;
  width: 8%;
  top: 10%;
  background: url("images/vanilla.png");
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 99;
}

#egg3 {
  position: absolute;
  height: 15%;
  width: 8%;
  top: 10%;
  background: url("images/berry.png");
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 99;
}

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

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

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

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

.bullseye2 {
  display: none;
  position: absolute;
  bottom: 0px;
  height: 7%;
  width: 7%;
  background: url("images/bullseye3.png");
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 11;
}

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

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

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

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

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

#basket {
  height: 120px;
  width: 105px;
  position: absolute;
  bottom: 5px;
  background: url("images/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: 38%;
  font-weight: 800;
}

















































/*
====================
  Congrats Pop-ups
====================
*/


.overlay {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  background-color: white;
  background-color: rgba(230, 230, 230, 0.95);
  overflow-x: hidden;
  transition: .5s;
  display: none;
}

.overlay-content {
  position: relative;
  top: 20%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay-content button {
  background: #2ecc71;
  border-radius: 20px;
  border: 0;
  padding: 10px 20px;
  color: white;
  font-size: 3em;
  cursor: pointer;
}

.overlay-content button:hover {
  background: #27ae60;
  /*font-size:1em;*/
}


.dwith{
  font-size: 100px;
}

.h4Width{
  margin-top: -50px;
  font-size: 50px;
  font-weight: 400;
}