body {
    background-color: #8296aa;
    margin: 0;
    padding: 0;
    font-family: 'Baloo-Regular', helvetica, sans-serif;
    color: darkgreen;
    font-size: 14px;
    
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .86s ease;
}
.bgcol{
    background-color: #576676;
    transition: .86s ease;
}
.cont{
    width: 130px;
    height: 300px;
    background-color: ;
    display: flex;
    -webkit-perspective: 150;
    overflow: hidden;
}

.zero {
    
    transform: translate(0,100px)
        rotateX(10deg);
    transition: 1.2s ease;
    
    flex:1;
    width: 130px;
    height: 200px;
    -webkit-perspective: 400;
    perspective-origin: 50px 0px;
    background-color: ;
    overflow: visible;
}

.one:hover ~ .zero {
    transition: .86s ease;
    transform: translate(0,0px)
        rotateX(-10deg);
    
}
.one {
    width: 130px;
    height: 300px;
    background-color:;
    position: absolute;
    display: flex;
    justify-content: center;
    z-index: 1;
}
.one > span{
    position: relative;
    font-size: 1em;
    width: 130px;
    text-align: center;
    transition: .86s ease;
    color: #760000;
}
span:hover{
    color: rgb(124, 252, 0);
    transition: .86s ease;
    padding-top: 20px;
    font-size: 1.3em;
}

.two {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 14px;
    top: 20px;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 56px;
    transform: translate(0,20px) rotateX(45deg) rotateY(0deg) rotateZ(0deg);
    transition: 1.3s ease;
    border: 5px solid darkred;
    border-bottom-width: 8px;
    border-right-width: 1px;
    border-left-width: 1px;
    background-size: cover;
    background-color: red;
    background-image: url(../src/1.jpg);
    background-blend-mode: multiply;
    background-repeat: no-repeat;
    background-position: 0 -17px;
    box-shadow:
        
        0 5px 0 -1px rgba(0, 0, 0, .63),
        
        0 6px 5px 1px red,
        -1px 7px 2px 0px white,
        
        0 8px 5px 2px red,
        0 8px 0px 3px black,
        0px 10px 0 5px darkgreen,
        
        inset 0 6px 0 rgba(0, 0, 0, .66);
    border-radius: 50% 10% 50% 10%;
}



.cont:hover > .zero > .two {
    background-color: lawngreen;
    transform: translate(0,30px) rotateX(-40deg) rotateY(0deg) rotateZ(0deg) ;
    transition: .9s ease;
    border-color: darkgreen;
    border-bottom-width: 5px;
    
    border-top-width: 8px;
    box-shadow: 
        0 -5px 0px -1px rgba(0, 0, 0, .77),
        
        
        0 -6px 5px 1px lawngreen,
        -1px -8px 3px 1.5px black,
        
        0 -8px 5px 2px lawngreen,
        0 -9px 0px 3px black,
        0px -11px 0 5px darkgreen,
        
        
        inset 0 -6px 0 rgba(0, 0, 0, 1);    
        background-position: 0 -33px;
}


.tre{
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: green;
    border-radius: 50% 10% 50% 10%;
    
    transform: translate(0,100px);
    
}



.two > h1{
    transition: 1.3s ease;
    transform: translate(0, -15px);
    text-shadow: 0 23px 0px rgba(0,0,0,.66);
    color: rgba(34, 139, 34, 0.66);
}
.cont:hover > .zero > .two > h1{
    transform: translate(0, 15px);
    color: rgba(0, 100, 0, 0.88);
    transition: .9s ease;
    text-shadow: 0 -23px 0px rgba(0,0,0,.66);
}













bla{}