Lo que pasa es que el tamaño de tu esfera de navidad la tienes en porcentajes, por eso se va a ir estirando dependiendo del tamaño de tu contenedor padre, lo que podrías hacer es darle un ancho y alto fijo de la misma medida y así evitar que la forma esférica se deforme e irla haciendo más chica (de ser necesario) con media querys.
div.bolaNavidad {
height: 100px;
width: 100px;
}
@media only screen and (max-width: 767px){
div.bolaNavidad {
/* Nuevas medidas */
}
}
La ventaja de hacerlo así es que tu decides los breakpoints en donde quieres que se redimensione la esfera, ya que con porcentajes automáticamente se irá acomodando, como mencioné anteriormente, conforme al ancho del contenedor padre. Dependerá mucho del caso de uso que le des para saber si te conviene más porcentajes o media querys.