body {
    background-color: rgb(199, 209, 202);
}

#wrapper{
    width: 1000px;
    height: 800px;
    margin-left: auto;
    margin-right: auto;
}

#banner {
    width: 450px;
    height: 200px;

    position: absolute;
    margin-top: 30px;
    margin-left: 550px;

    font-family: Arial;
    font-size: 40px;
    line-height: 0.5;
    font-weight: 900;

    color: #88a554;
}

#content {
    background-image: url("../img/olivetti_19.png");
    background-repeat: no-repeat;
    width: 471px;
    height: 800px;
    position: absolute;
    z-index:2;
}



#b1 {
    position: absolute;
    top: 600px;
    left: 348px;

    background-image: url("../img/buttom_1.png");
    background-repeat: no-repeat;
    background-position: center;

    width: 50px;
    height: 42px;
    border-radius: 5px;

    animation-name: button1;
    animation-play-state: running; 
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

#b2 {
    position: absolute;
    top: 641px;
    left: 348px;

    background-image: url("../img/buttom_2.png");
    background-repeat: no-repeat;
    background-position: center;

    width: 50px;
    height: 97px;
    border-radius: 5px;

    animation-name: button2;
    animation-play-state: running;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

#b3 {
    position: absolute;
    top: 718px;
    left: 165px;

    background-image: url("../img/buttom_3.png");
    background-repeat: no-repeat;
    background-position: center;

    width: 163px;
    height: 68px;
    border-radius: 5px;

    animation-name: button3;
    animation-play-state: running;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

#b4 {
    position: absolute;
    top: 718px;
    left: 83px;

    background-image: url("../img/buttom_4.png");
    background-repeat: no-repeat;
    background-position: center;

    width: 58px;
    height: 68px;
    border-radius: 5px;

    animation-name: button4;
    animation-play-state: running;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

#b5 {
    position: absolute;
    top: 196px;
    left: 368.5px;

    background-image: url("../img/wheel.png");
    background-repeat: no-repeat;
    background-position: center;

    width: 30px;
    height: 95px;
    border-radius: 5px;

    animation-name: button5;
    animation-play-state: running;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

#bd1 {
    position: absolute;
    top: 600px;
    left: 348px;

    background-image: url("../img/buttom_1.png");
    background-repeat: no-repeat;
    background-position: center;

    width: 50px;
    height: 42px;
    border-radius: 5px;
    background-color: rgb(199, 209, 202, 0.1);
}

#bd2 {
    position: absolute;
    top: 641px;
    left: 348px;

    background-image: url("../img/buttom_2.png");
    background-repeat: no-repeat;
    background-position: center;

    width: 50px;
    height: 97px;
    border-radius: 5px;
    background-color: rgb(199, 209, 202, 0.1);
}

#bd3 {
    position: absolute;
    top: 718px;
    left: 165px;

    background-image: url("../img/buttom_3.png");
    background-repeat: no-repeat;
    background-position: center;

    width: 163px;
    height: 68px;
    border-radius: 5px;
    background-color: rgb(199, 209, 202, 0.1);
}

#bd4 {
    position: absolute;
    top: 718px;
    left: 83px;

    background-image: url("../img/buttom_4.png");
    background-repeat: no-repeat;
    background-position: center;

    width: 58px;
    height: 68px;
    border-radius: 5px;
    background-color: rgb(199, 209, 202, 0.1);
}

#bd5 {
    position: absolute;
    top: 196px;
    left: 368.5px;

    background-image: url("../img/wheel.png");
    background-repeat: no-repeat;
    background-position: center;

    width: 30px;
    height: 95px;
    border-radius: 5px;
    background-color: rgb(199, 209, 202, 0.1);
}

#p1 {
    position: absolute;
    top: 143px;
    left: 152px;
    animation-name: p1a;
    animation-play-state: paused;
    animation-duration: 1s;
    animation-iteration-count: 1;
}


.f1 {
    background-image:url("../img/paper_div.png");
    background-repeat: no-repeat;
    width: 402px;
    height: 790px;

    position: absolute;
    margin-top: 10px;
    margin-left: 530px;
    z-index: -1;

    padding-top: 250px;
    padding-left: 30px;
    padding-right: 30px;

    display: none;
}

.f2 {
    background-image:url("../img/paper_div.png");
    background-repeat: no-repeat;
    width: 402px;
    height: 790px;

    position: absolute;
    margin-top: 10px;
    margin-left: 530px;
    z-index: -1;

    padding-top: 250px;
    padding-left: 30px;
    padding-right: 30px;

    display: none;
}

.f3 {
    background-image:url("../img/paper_div.png");
    background-repeat: no-repeat;
    width: 402px;
    height: 790px;

    position: absolute;
    margin-top: 10px;
    margin-left: 530px;
    z-index: -1;

    padding-top: 250px;
    padding-left: 30px;
    padding-right: 30px;

    display: none;
}

.f4 {
    background-image:url("../img/paper_div.png");
    background-repeat: no-repeat;
    width: 402px;
    height: 790px;

    position: absolute;
    margin-top: 10px;
    margin-left: 530px;
    z-index: -1;

    padding-top: 250px;
    padding-left: 30px;
    padding-right: 30px;

    display: none;
}

.f5 {
    background-image:url("../img/paper_div.png");
    background-repeat: no-repeat;
    width: 402px;
    height: 790px;

    position: absolute;
    margin-top: 10px;
    margin-left: 530px;
    z-index: -1;

    padding-top: 250px;
    padding-left: 30px;
    padding-right: 30px;

    display: none;
}


#printer{
    width: 174px;
    height: 102px;
    z-index: 2;
    top: 200px;
    left: 122px;
    position: absolute;
}


#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;  
}

p{
    font-size: 28px;
}

@keyframes p1a{
    0%,100%{transform: translateY(0);}
    50%{ transform: translateY(-300px);}
    75%{ transform: translateY(-300px);
        }
    76%{ transform: translateY(+50px);}
}

@keyframes button1 {


    0% { transform: translateY(-8px); 
        background-color: rgb(136, 165, 84, 0.8);}
    10% { transform: translateY(0px); 
        background-color: rgb(199, 209, 202, 0.1);}
    20% { transform: translateY(-8px); 
        background-color: rgb(136, 165, 84, 0.8);}
    100% {transform: translateY(-8px);
        background-color: rgb(136, 165, 84, 0.8);}
}

@keyframes button2 {
    0%,100% { transform: translateY(-8px); 
        background-color: rgb(136, 165, 84, 0.8);}
    20% { transform: translateY(-8px); 
        background-color: rgb(136, 165, 84, 0.8);}
    30% { transform: translateY(0); 
        background-color: rgb(199, 209, 202, 0.1);}
    40% { transform: translateY(-8px); 
        background-color: rgb(136, 165, 84, 0.8);}

}

@keyframes button3 {
    0%,100% { transform: translateY(-8px); 
        background-color: rgb(136, 165, 84, 0.8);}
    40% { transform: translateY(-8px); 
        background-color: rgb(136, 165, 84, 0.8);}
    50% { transform: translateY(0); 
        background-color: rgb(199, 209, 202, 0.1);}
    60% { transform: translateY(-8px); 
        background-color: rgb(136, 165, 84, 0.8);}

}

@keyframes button4 {
    0%,100% { transform: translateY(-8px); 
        background-color: rgb(136, 165, 84, 0.8);}
    60% { transform: translateY(-8px); 
        background-color: rgb(136, 165, 84, 0.8);}
    70% { transform: translateY(0); 
        background-color: rgb(199, 209, 202, 0.1);}
    80% { transform: translateY(-8px); 
        background-color: rgb(136, 165, 84, 0.8);}
}

@keyframes button5 {
    0%,100% { transform: translateY(-8px); 
        background-color: rgb(136, 165, 84, 0.8);}
    80% { transform: translateY(-8px); 
        background-color: rgb(136, 165, 84, 0.8);}
    90% { transform: translateY(0); 
        background-color: rgb(199, 209, 202, 0.1);}
    100% { transform: translateY(-8px); 
        background-color: rgb(136, 165, 84, 0.8);}
}