html{
      zoom:80%;
}
@media screen and (max-width: 700px) {
      html{
            zoom:50%;
      }
}
.Bunny_header1{
      margin:auto;
      text-align:center;
      padding: 10px;
}
.Bunny_box1{
      margin:auto;
      width:1900px;
      height:700px;
      display:flex;
      background-image: url("Images/sunsetFarm.jpg");
      /* background-size:cover; */
      background-repeat:repeat;
      position: relative;
      overflow: hidden;
}
#BackgroundContainer {
      width: 200%;
      height: 100%;
      position: absolute;
      /* animation: movingBackground 4s linear infinite; */
}
#BackgroundContainer img {
      width: 50%;
      height: 100%;
      float: left;
}
#Bunny{
      width:200px;
      height:250px;
      position: relative;
      background-image: url("Images/carryCarrot.png");
      top: 400px;
}
#Wolf{
      width: 380px;
      height: 190px;
      position:relative;
      background-image: url("Images/wolf.gif");
      background-size: cover;
      top:470px;
      left:600px;
}
.animateWolf{
      animation: wolfRunning 2s infinite linear;
}
.animateBunny{
      animation:jump 8s ease;
}
.animateBackground{
      animation: movingBackground 4s linear infinite;
}
.animateHop{
      animation:staticjump 200ms infinite ease-in-out;
}
@keyframes jump{
      0%{top:25px}
      45%{top:370px}
      47%{top:395px}
      50%{top:400px} 
      53%{top:395px}
      55%{top:370px}
      100%{top:25px} 
}
@keyframes movingBackground{
      0%{transform:translateX(0%)}
      100%{transform:translateX(-50%)}

      /* 0%{background-position: 100% 0}
      100%{background-position: -100% 0;} */

      /* 0%{left: 200px};
      100%{left: 1px} */
}
@keyframes wolfRunning{
      0%{left:1800px;}
      100%{left:-180px;}
}
@keyframes staticjump{
      0%{top:385px}
      50%{top:400px}
      100%{top:385px}
}
.modal{
      display:none;
      position:fixed;
      left:0;
      top:0;
      width:100%;
      height:100%;
      overflow:auto;
      background-color:white;
}
.modal-content{
      border:white;
      background-color: white;
      padding: 10px;
      margin:auto;
      text-align: center;
      justify-content:space-around;
}
.modal-content img{
      margin:auto;
}
.GoButton{
      border-color: #ee5b05;
      color:#ee5b05;
      background-color: white;
      text-align:center;
      font-size: 20px;
      padding: 15px;
      border-radius:50%;
}
.GoButton:hover {
      background-color:#ee5b05;
      border: none;
      color:white;
      text-align:center;
      font-size: 20px;
      padding: 15px;
      border-radius:50%;
      box-shadow: 0 5px 10px 0 rgba(123, 2, 2, 0.881), 0 6px 20px 0 rgba(247, 249, 243, 0.966);
}
.GoButton span{
      cursor: pointer;
      display:inline-block;
      position: relative;
      transition: 0.5s;
}
.GoButton span:after{
      content:'🐇';
      position: absolute;
      opacity:0;
      top:0;
      right:-30px;
      transition:0.5s;
}
.GoButton:hover span{
      padding-right:30px;
}
.GoButton:hover span:after{
      opacity:1;
      right:0;
}