* {
    transition: 1.3;
}

body {
    background-color: rgb(18, 99, 58);
}

#banner {
    width: 700px;
    height: 90px;
    position: absolute;
    top:-15px;
    left: 15px;
    padding: 0px 10px;
    font-family: "Special Elite";
    font-size: 28px;
    color: #b4dac1;
    letter-spacing: 1.3cap;
}

#content {
    background-image: url("../img/BG.png");
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 450px;
    margin: 30px;
    margin-left: 10px;
    width: 800px;
    height: 800px;
    position: relative;
    z-index:2;
}

#top {
    position: absolute;  
    z-index: 0;         
    top: 464px;          
    left: 100px;          
    width: 300px;        
    height: 30px;   
}    


#b1 {
    position: absolute;
    top: 740px;
    left: 85px;
    animation-name: button1;
    animation-play-state: running;
    animation-duration: 9s;
    animation-iteration-count: infinite;
    height: 35px;
    width: 300px;

}

#b2 {
    position: absolute;
    top: 623px;
    left: 180px;
    animation-name: button2;
    animation-play-state: running;
    animation-duration: 9s;
    animation-iteration-count: infinite;
    height: 28px;
    width: 28px;
}

#b3 {
    position: absolute;
    top: 440px;
    left: -15px;
    width: 75px;
    height: 75px;
    animation-name: button3;
    animation-play-state: running;
    animation-duration: 9s;
    animation-iteration-count: infinite;
}

#b3Turned {
    top: 440px;
    left: -10px;
    position: absolute;
    display: none;
    width: 75px;
    height: 75px;
}

#b4 {
    position: absolute;
    top: 606px;
    left: 440px;
    width: 30px;
    height: 30px;
    animation-name: button4;
    animation-play-state: running;
    animation-duration: 9s;
    animation-iteration-count: infinite;
}

#b5 {
    position: absolute;
    top: 350px;
    left: 610px;
    width: 60px;
    height: 60px;
    animation-name: button5;
    animation-play-state: running;
    animation-duration: 9s;
    animation-iteration-count: infinite;
}

#popup {
    top: 300px; 
    left: 5px;
    transition: top 1s ease-in-out; 
    position: absolute;
}

#paper {
    width: 290px;
    height: 290px;
    top: 200px; 
    left: 100px;
    position: absolute;
}

#paperText {
    position: absolute;
    top: 210px; 
    left: 110px;
    width: 260px;
    font-family: 'Courier New', Courier, monospace; 
    font-size: 18px; 
    color: black;
    text-align: left;
    z-index: 1; 
}

#AudImg {
    position: absolute;
    top: 60px; 
    left: 0px;
    width: 50px;
    height: 50px;
}

#NoAud {
    position: absolute;
    top: 60px; 
    left: 0px;
    width: 40px;
    height: 45px;
    display: none;
}


@keyframes button1 {
    0%, 100% { transform: translateY(0); }
    60% { transform: translateY(-8px); }
    80% { transform: translateY(0px); }
}

@keyframes button2 {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(180deg); }
    20% { transform: rotate(360deg); }
    100% { transform: rotate(360deg); }
}

@keyframes button3 {
    0% {transform: rotate(0deg)}
    30% {transform: rotate(0deg)}
    40% {transform: rotate(50deg) scale(1);;}
    50% {transform: rotate(0deg) scale(1.3);}
}

@keyframes button4 {
    0% {transform: rotate(0deg)}
    40% {transform: rotate(0deg)}
    50% {transform: rotate(-50deg) scale(1);;}
    60% {transform: rotate(0deg) scale(1.5);}
}

@keyframes button5 {
    0% {transform: scale(1);}
    60% {transform: scale(1);}
    70% {transform: scale(1.3);}
    80% {transform: scale(1);}
}