.lock{
    width: 100px;
    height: 80px;
    border-radius: 10px;
    background-image: linear-gradient(to right, gold, orange);
    position: relative;
    margin-top: 100px;
    line-height: 80px;
    text-align: center;
    margin-left: 46%;
    /*float: right;*/
    /*animation: rotation 2s infinite linear;*/
}

body{
    background-image: linear-gradient(to left, darkcyan, darkviolet);
    height: 100%;
    width: 100%;
}

@keyframes rotation {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(359deg);
    }
}

h1{
    font-family: "Bitstream Vera Sans Mono",sans-serif;
    font-style: italic;
    text-align: center;
    margin-top: 50px;
}

.lock:before{
    content: '';
    width: 70px;
    height: 60px;
    border-radius: 35px 35px 0 0;
    border: 20px solid #AAA;
    border-bottom: none;
    box-sizing: border-box;
    position: absolute;
    top: -60px;
    left: 15px;
}

.keyhole{
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background-color: #000;
    margin-top: 20px;
}

.keyhole:before{
    content: '';
    display: block;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom: 30px solid #000;
}

.bird{
    display: block;
    width: 100px;
    height: 150px;
    background-color: #ff0065;
    border-radius: 50px 50px 100px 0;
    transform: rotateZ(30deg);
    position: relative;
    margin-left: 100px;
    margin-top: -100px;
    float: left;
}

.bird:before{
    content: '';
    display: block;
    position: absolute;
    width: 0px ;
    height: 0px;
    border: 15px solid transparent;
    transform: rotateZ(-30deg);
    border-left: 25px solid #FFCA00;
    right: -29px;
    top: 2px;
}

@keyframes flap {
    0%  {
        transform: scaleY(-1);
    }
}

.bird:after{
    content: '';
    display: block;
    position: absolute;
    width: 60px ;
    height: 90px;
    background-color: #cdb615;
    transform: rotateZ(90deg);
    border-radius: 50px 50px 100px 0;
    left: -20px;
    top: 40px;
    transform-origin: 0 top 0;
    animation: flap 1s linear infinite alternate;
}

.eye{
    display: block;
    position: absolute;
    width: 17px ;
    height: 17px;
    background-color: white;
    border-radius: 10px;
    right: 25px;
    top: 25px;
}

.eye:before{
    content: '';
    display: block;
    position: absolute;
    width: 11px ;
    height: 11px;
    background-color: black;
    border-radius: 10px;
    right: 1px;
    top: 4px;
}

.illusion{
    float: right;
    margin-top: -100px;
    margin-right: 100px;
    border: 1px solid salmon;

}

.l1{
    height: 130px;
    width: 130px;
    border: 1px solid darkred;
    animation: rotation 5s infinite linear;
}

.l2{
    height: 120px;
    width: 120px;
    border: 1px solid aqua;
    margin: 3.5px;
    animation: rotation 5s infinite linear;
}
.l3{
    height: 110px;
    width: 110px;
    border: 1px solid darkorange;
    margin: 3.5px;
    animation: rotation 5s infinite linear;
}
.l4{
    height: 100px;
    width: 100px;
    border: 1px solid fuchsia;
    margin: 3.5px;
    animation: rotation 5s infinite linear;

}
.l5{
    height: 90px;
    width: 90px;
    border: 1px solid crimson;
    margin: 3.5px;
    animation: rotation 5s infinite linear;

}
.l6{
    height: 80px;
    width: 80px;
    border: 1px solid palegreen;
    margin: 3.5px;
    animation: rotation 5s infinite linear;
}
.l7{
    height: 80px;
    width: 80px;
    border: 1px solid chartreuse;
    margin: 3.5px;
    animation: rotation 5s infinite linear;
}
.l8{
    height: 70px;
    width: 70px;
    border: 1px solid greenyellow;
    margin: 3.5px;
    animation: rotation 5s infinite linear;
}
.l9{
    height: 60px;
    width: 60px;
    border: 1px solid yellow;
    margin: 3.5px;
    animation: rotation 5s infinite linear;
}