Logo bigger and sharp

Hi,

I would like to make my logo on the top of the website bigger.
With this CSS code from one of your earlier topics I managed to get the logo bigger (great!!), but the quality is till poor/blurry.

img.logo {
max-height: 100%;
}
#site-navigation .module.left, #page .nav-bar a {
height: auto;
width: auto;
}

When I try to upload a better image it keeps asking me to crop the image when I select it for the logo. I think it scales it down or something?

Any idea how I can get the logo in good quality?

This is the url:

Thank you,

Can someone please help me with this.
Thanks