*{
    margin: 0;
    padding: 0;
}

body{
    overflow-x: hidden;
    background-image: linear-gradient(to right, #2858A1, #4DBCE7, white 400%); 
}
.radius{
    border-radius: 20px;
}
#imagem {
    margin-left: 20%;
    margin-right: 20%;
}

/* min-width & max-width */
@media screen and (min-width: 1080px) and (max-width: 1920px) {
    #card2{
        margin-top: 30%; 
    }
}

@media screen and (min-width: 768px) and (max-width: 1366px) {
    #imagem{
        margin-left: 20%;
        margin-right: 10%;  
    }
    #card2{
        margin-top: 5%;
    }
    
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    #imagem{
        margin-left: 10%;
        margin-right: 10%;  
    }
    
}

@media screen and (max-width: 991px) {
    #imagem{
        margin-left: 27%;
    }
    #card2{
        margin-left: -110%; 
    }
    #position{
        margin-left: 15%; 
    }
    
}

@media screen and (min-width: 600px) and (max-width: 800px) {
    #imagem{
        margin-left: 27%;
    }
    #card2{
        margin-left: -110%; 
    }
    #position{
        margin-left: 20%; 
    }
}

@media screen and (min-width: 320px) and (max-width: 766px) {
    #imagem{
        margin-left: 15%;
    }
    #card2{
        margin-left: -110%; 
    }
    #position{
        margin-left: 15%; 
    }
    
}

    @media screen and (min-width: 480px) and (max-width: 720px) {
        #imagem{
            margin-left: 15%;
        }
        #card2{
            margin-left: -110%; 
        }
        #position{
            margin-left: 23%; 
        }
    }

@media screen and (min-width: 320px) and (max-width: 568px) {
    #imagem{
        margin-left: 9%;
    }
    #card2{
        margin-left: -110%;
        
    }
    #position{
        margin-left: 15%;
    }
    
}