body,
 html {
     margin: 0;
     padding: 0;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: #f0f0f0;
     /* Light gray background */
 }

 .image-container {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 50%;
     height: 50%;
 }

 .rotating-image {
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
     transform: scale(0.75);
     animation: rotate 10s linear infinite;
 }

 /* .rotating-image {
     width: 80vmin;
     height: 80vmin;
     object-fit: cover;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: scale(0.5);
     animation: rotate 10s linear infinite;
 } */

 @keyframes rotate {

     /* from { transform: scale(0.5) rotate(0deg);}
    to { transform: scale(0.5) rotate(360de);} */
     0% {
         transform: translate(-50%, -50%) rotate(0deg);
     }

     100% {
         transform: translate(-50%, -50%) rotate(360deg);
     }
 }

 @media (max-aspect-ratio: 1/1) {
     .rotating-image {
         width: auto;
         height: 100%;
     }
 }

 @media (min-aspect-ratio: 1/1) {
     .rotating-image {
         width: 100%;
         height: auto;
     }
 }