html {
    height: 100%;
    overflow: hidden;
  }
  
  body {
    position: relative;
    height: 100%;
    background: linear-gradient(#000141 25%, #00026e 50%, #000125 50%, #000000 100%);
    
  }
  
  .image-container {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    width: 100%;
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.top-image-container {
    top: 10%;
    width: auto;
    height: 40%;
    
    display: flex;
    justify-content: center;
}


.bottom-image-container {
  bottom: 0;
  width: 100%;
  height: 60%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  animation: wiggle 3s infinite ease-in-out;
}

@media (max-width: 768px) {
  body {
      overflow: hidden;
  }
}


.image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* Add any additional styles for the images, e.g., width, height, and border-radius */
}

  
  .wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    margin: 0 auto;
    perspective: 360px;
    perspective-origin: 50% 50%;
  }
  
  .top-plane, .bottom-plane {
    width: 200%;
    height: 150%;
    position: absolute;
    bottom: -30%;
    left: -50%;
    background-image: -webkit-linear-gradient(#54005c 2px, transparent 2px), -webkit-linear-gradient(left, #54005c 2px, transparent 2px);
    background-size: 100px 100px,100px 100px;
    background-position: -1px -1px,-1px -1px;
    transform: rotateX(85deg);
    animation: planeMoveTop 2s infinite linear;
  }
  
  .bottom-plane {
    transform: rotateX(-85deg);
    top: -30%;
    animation: planeMoveBot 2s infinite linear;
  }
  
  @keyframes planeMoveTop {
    from {
      background-position: 0px -100px,0px 0px;
    }
    to {
      background-position: 0px 0px, 0px 0px;
    }
  }
  @keyframes planeMoveBot {
    from {
      background-position: 0px 0px,0px 0px;
    }
    to {
      background-position: 0px -100px, 100px 0px;
    }
  }
  @media (max-height: 350px) {
    .wrap {
      perspective: 210px;
    }
  }

  @keyframes wiggle {
    50%, 50% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-5px);
    }
}