* {
    padding: 0;
    margin: 0;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.egg svg {
  width: 30vw;
  height: auto;
  cursor: grab;
  }

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(-45deg, #0000ff, #ff0000);
  background-size: 200% 200%; 
  animation: gradientAnimation 16s ease infinite; 
  z-index: -1; 
}

@keyframes gradientAnimation {
    0% {
        background-position: 100% 100%;
    }
    50% {
        background-position: 50% 50%;
    }
    100% {
        background-position: 100% 100%;
    }
}

/* Laptop */
@media (max-width: 1440px) {
    .egg svg {
        width: 35vw;
    }
}

/* iPad */
@media (max-width: 1366px) {
    .egg svg {
        width: 40vw;
    }
}
@media (max-width: 1280px) {
    .egg svg {
        width: 45vw;
    }
}
@media (max-width: 1080px) {
    .egg svg {
        width: 50vw;
    }
}
@media (max-width: 1024px) {
    .egg svg {
        width: 55vw;
    }
}
@media (max-width: 834px) {
    .egg svg {
        width: 60vw;
    }
}
@media (max-width: 768px) {
    .egg svg {
        width: 65vw;
    }
}
/* Mobile */
@media (max-width: 428px) {
    .egg svg {
        width: 70vw;
    }
}