#banner {
    width: 900px;
    height: 90px;
    position: relative;
    padding: 10px;
    margin: auto;
}

body {
    background-color: rgb(206, 232, 245);  
}

#wrapper {
width: 1200px;
height: 900px;
margin: auto;
}


h1 {
    font-family: "marvin", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin-top: 5px;
    text-align: center;
    font-size: 45px;   
}

.hungry {
    color:rgb(74, 177, 0);
}

.hungry2 {
    color: rgb(231, 174, 3);
}

.hippos {
    color:rgb(252, 117, 49);
}

.exclamation {
    color:rgb(248, 132, 132);
}

#content {
    background-image: url("img/base.png");
    background-repeat: no-repeat;
    width: 890px;
    height: 600px;
    position: relative;
    margin-left: 100px;
    border: 12px solid rgb(238, 35, 35);
    border-radius: 25px;
    padding: 50px;
    margin: auto;
    background-color: rgb(118, 180, 209); 
}


#pause {
    height:50px;
    background-color: rgb(238, 35, 35);
    width: 120px;
    top:630px;
    lefT: 700px;
    position: absolute;
    font-family: "marvin", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    font-size: 25px;
    color: white;
    border-radius: 10px;  
}

#pause:hover {
    background-color: white;
    color: rgb(238, 35, 35);
    cursor: pointer;
}

#reset {
    height:50px;
    background-color: rgb(238, 35, 35);
    width: 120px;
    top:630px;
    lefT: 850px;
    position: absolute;
    font-family: "marvin", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    font-size: 25px;
    color: white;
    border-radius: 10px;  
}

#reset:hover {
    background-color: white;
    color: rgb(238, 35, 35);
    cursor: pointer;
}

#b1 {
    position: absolute;
    left: 255px;
    top: 315px;
    transition: .5s;
    animation-name: b1;
    animation-play-state: running;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    width: 10%;
}

#b2 {
    position: absolute;
    left: 560px;
    top: 140px;
    transition: .5s;
    animation-name: b2;
    animation-play-state: running;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

#b3 {
    position: absolute;
    top: 310px;
    left: 575px;
    transition: .5s;
    animation-name: b3;
    animation-play-state: running;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    
}

#b4 {
    position: absolute;
    top: 140px;
    left: 285px;
    transition: .5s;
    animation-name: b4;
    animation-play-state: running;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

#b5 {
    position: absolute;
    top: 250px;
    left: 400px;
    transition: .5s;
    animation-name: b5;
    animation-play-state: running;
    animation-duration: 7s;
    animation-iteration-count: infinite;
}



@keyframes b1 {
    0% {transform: rotate(0deg);}
    50% {transform: rotate(-10deg) scale(1.2);}
    100% {transform: rotate(0deg);}
}

@keyframes b2 {
    0% {transform: rotate(0deg);}
    20% {transform: rotate(0deg) scale(1.1);;}
    40% {transform: rotate(-10deg);}
    60% {transform: rotate(0deg);}
    80% {transform: rotate(-10deg) scale(1.1);}
    100% {transform: rotate(0deg);}
}

@keyframes b3 {
    0% {transform: rotate(0deg);}
    30% {transform: rotate(0deg) scale(1);}
    40% {transform: rotate(10deg) scale(1.1);}
    60% {transform: rotate(0deg);}
    80% {transform: rotate(10deg);}
}

@keyframes b4 {
    0% {transform: rotate(0deg);}
    20% {transform: rotate(0deg) scale(1);}
    40% {transform: rotate(-10deg) scale(1.1);}
    60% {transform: rotate(0deg);}
    80% {tranform: rotate(-10deg) scale(1.1);}
}

@keyframes b5 {
    0% {margin-top: 50px; margin-left: 20px; }
    20% {margin-top: 80px; margin-left: 30px;}
    40% {margin-top: -20px; margin-left: -20px;}
    60% {margin-top: 30px; margin-left: 70px;}
    80% {margin-top: -50px; margin-left: 20px;}
    100% {margin-top: 50px; margin-left: 20px; }
}


p {
    font-family: "marvin", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 13px;
}

.f1 {
    position: absolute;
    width: 320px;
    height: 80px;
    left: 20px;
    top: 500px;
    background-color: white;
    border: 5px solid rgb(47, 111, 0);
    color: rgb(62, 147, 1);
    border-radius: 15px;
    display: none;
    font-family: "marvin", sans-serif;
    font-weight: 400;
    font-style: normal;
    padding: 10px;
   
}

.f2 {
    position: absolute;
    border: 5px solid rgb(215, 86, 21);
    color: rgb(244, 116, 53);
    border-radius: 15px;
    display: none;
    background-color: white;
    width: 310px;
    padding: 10px;
   left: 627px;
   top: 15px;
}

.f3 {
    position: absolute;
    border: 5px solid rgb(255, 118, 118);
    color: rgb(255, 130, 130);
    border-radius: 15px;
    display: none;
    background-color: white;
    width: 320px;
    padding: 10px;
    top: 510px;
    left: 617px;
}

.f4 {
    position: absolute;
    border: 5px solid rgb(219, 157, 0);
    color: rgb(213, 167, 0);
    border-radius: 15px;
    display: none;
    background-color: white;
    width: 290px;
    padding: 10px;
    top: 15px;
    left: 20px;
}

.f5 {
    position: absolute;
    border: 5px solid rgb(118, 118, 118);
    color:rgb(121, 121, 121);
    border-radius: 15px;
    display: none;
    background-color: white;
    width: 360px;
    padding: 10px;
    top: 420px;
    left: 280px;

}


.f1:hover {
    transition: .5s;
    transform: scale(1.075);
}

.f2:hover {
    transition: .5s;
    transform: scale(1.075);
}

.f3:hover {
    transition: .5s;
    transform: scale(1.075);
}

.f4:hover {
    transition: .5s;
    transform: scale(1.075);
}

.f5:hover {
    transition: .5s;
    transform: scale(1.075);
}