* {
    transition: 1.3;
}

body {
    background-color: rgb(1, 93, 109);
}

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

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

#top {
    position: absolute;  
    z-index: 0;         
    top: 290px;          
    left: 210px;          
    width: 380px;        
    height: 50px;   
}    

#paper {
    position: absolute;  
    z-index:1;
    top: 400px;          
    left: 225px;          
    width: 350px;        
    height: 400px;
    transition: top 1s ease-in-out;  
}

#b1 {
    position: absolute;
    top: 725px;
    left: 115px;
    animation-name: button1;
    animation-play-state: running;
    animation-duration: 9s;
    animation-iteration-count: infinite;
    height: 45px;
    width: 400px;

}

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

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

#b3Turned {
    top: 275px;
    left: -35px;
    width: 130px;
    height: 130px;
    position: absolute;
    display: none;
}

#b4 {
    position: absolute;
    top: 540px;
    left: 600px;
    width: 35px;
    height: 35px;
    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: 350px;
    height: 300px;
    top: 50px; 
    left: 225px;
    position: absolute;
}

#paperText {
    position: absolute;
    top: 65px; 
    left: 250px;
    width: 300px;
    font-family: 'Courier New', Courier, monospace; 
    font-size: 20px; 
    color: black;
    text-align: left;
    z-index: 1; 
}

#AudImg {
    position: absolute;
    top: 740px; 
    left: -50px;
    width: 50px;
    height: 50px;
}

#NoAud {
    position: absolute;
    top: 740px; 
    left: -50px;
    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.8);}
}

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