*{
    box-sizing: border-box;
}


body  {
    background:  radial-gradient(#D1FFC6, #CFFFC4, #31af11);
 
}

 
.wrapper

{

display: flex;
justify-content: center;
align-content: center;
margin: 50px;
/* margin: 30px; */

}

.container {
    background: rgb(62, 182, 112);
    height: 750px;
    width: 1200px;

    display: flex;
    justify-content: center;
align-items: center;
align-content: center;
 
    
   


}

.bounding {
    
    height:652px;
    width: 1047px;

    
display: flex;
justify-content:flex;
 
 
 


}

.if {
    background: #CFFFC4;
    height: 113px;
    width: 113px;
   

    animation: ifslide 5s;
    animation-iteration-count: 1;
}

.iftxt {
    text-align: center;

}

.youslide {
    background: #CFFFC4;
    height: 113px;
    width: 113px;
    margin-top: 30px;
    margin-left: 10px;

    animation: youslide 5s ;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
     

}

 


.liked  {

    background: #CFFFC4;
    height: 95px;
    width: 95px;
    margin-top: 540px;
    margin-right: 210px;
    
    animation: liked 5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
     

}

 
.me {
    background: #CFFFC4;
    height: 95px;
    width: 95px;
  
    
    animation: liked 5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
     



}
.you {
    background: #CFFFC4;
    height: 95px;
    width: 95px;
    margin-top: 540px;
    margin-right: auto;
    
    animation: you 5s infinite;



}

.would {
    background: #CFFFC4;
    height: 95px;
    width: 95px;
    margin-top: 140px;
    margin-right: 200px;
    
    animation: would 5s infinite;
}
 

 
 
 
 

@keyframes ifslide {
    0% {transform: translate(0);

    }

    50% {transform: translate(880px);

    }

    100% {transform: translate(0);

    }

}

@keyframes youslide {
    0% {transform: translate(0,0);

    }

    50% {transform: translate(0,500px);}

    /* 70% {transform: translate(200px,200px);} */

    100% {transform: translate(200px,500px);}

    /* 80% {transform: translate(200px)} */


    /* 80% {transform: translate(0,0);} */

    }
 
@keyframes liked {
    0% {transform: translate(200px,0);

    }

    100% {transform: translate(500px,0);}

  
 
}

@keyframes me {
    0% {transform: translate(500px,0);

    }

    50% {transform: translate(700px,0);}

     

    }
/* 
@keyframes you {

0% {transform: translate(0,0 );}

50% {{transform: translate(400px, 0);}}
    
  }  

@keyframes would {
    0% {transform: translate(0);}

50% {{transform: translate(500px);}} */

} */  

/* 
    70% {transform: translate(70,0px);

    80% {transform: translate(0, 0)}; */