@media screen and (min-width: 320px){                
    body{             
        background: #e0e0e0;       
    }
                   
    h1{    
        color: white; 
        font-size: 50px;
        text-align: center;
        padding: 20px;    
        position: relative;    
        animation: top 3s;    
        animation-fill-mode: forwards;        
    }

    @keyframes top {             
        from {top: -200px;}          
        to {top: 0px;}        
    }
    
    .container p{           
        width: 50%;    
        font-size: 20px;
        padding: 30px;
        float: left;        
        position: relative;
        animation: left 3s;
        animation-fill-mode: forwards;
    }
    
    @keyframes left {
        from {left: -800px;}    
        to {left: 0px;}    
    }
    
    .container img{    
        width: 350px;
        height: 350px;
        float: right;
        text-align: center;
        margin-right: 70px;
        margin-top: 120px;
        transition: width 2s, height 2s, transform 2s;
        position: relative;
        animation: right 3s;
        animation-fill-mode: forwards;    
    }
    
    .container img:hover {
        width: 350px;
        height: 350px;
        transform: rotate(360deg);
    }   
    
    @keyframes right {
        from {right: -800px;}
        to {right: 0px;}
    }
    
    .playstore a img{               
        width: 30%;        
        text-align: center;
        margin-left: 70px;
        margin-top: 50px;
        position: relative;
        animation: right 6s;        
        animation-fill-mode: forwards;        
    }
}

@media screen and (max-width: 1024px){             
    body{   
        background: #e0e0e0;        
    }
                    
    h1{    
        color: white;        
        font-size: 40px;        
        text-align: center;        
        background-color: #F25F4F;                
        padding: 10px;            
        position: relative;            
        animation: top 3s;            
        animation-fill-mode: forwards;                
    }
    
    @keyframes top {              
        from {top: -200px;}                 
        to {top: 0px;}               
    }
    
    .container{    
        text-align: center;       
    }
      
    .container p{       
        width: 100%;        
        font-size: 18px;       
        padding: 0px;        
        position: relative;        
        animation: left 3s;        
        animation-fill-mode: forwards;        
    }
   
    @keyframes left {    
        from {left: -800px;}           
        to {left: 0px;}            
    }
    
    .container img{    
        width: 200px;        
        height: 200px;        
        margin-top: 0px;        
        margin-right: 130px;        
        text-align: center;        
        transition: width 2s, height 2s, transform 2s;        
        position: relative;        
        animation: right 3s;        
        animation-fill-mode: forwards;           
    }
   
    .container img:hover {    
        width: 200px;        
        height: 200px;        
        transform: rotate(360deg);        
    }    
   
    @keyframes right {   
        from {right: -800px;}        
        to {right: 0px;}        
    }    
    
    .playstore a img{    
        width: 60%;        
        margin-left: 0px;        
        margin-top: 10px;        
        text-align: center;        
        position: relative;
        animation: left 6s;
        animation-fill-mode: forwards;        
    }            
}