@keyframes hue-animation {
    0% { filter: hue-rotate(0deg); }
    50% {filter: hue-rotate(180deg)}
    100% { filter: hue-rotate(360deg); }
}

@keyframes blink {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
/* Existing styles */
body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    background: url('bg.gif') no-repeat center center fixed;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.logo img {
    max-width: 50%; /* Adjust size as necessary */
    height: auto;
    opacity: 0.7;/* Center the logo horizontally */
    animation: hue-animation 10s infinite linear;
    margin: calc(15% + 20px) auto 0;
    scale: 0.6;
}

/* Add these new styles */
.coming-soon {
    position: absolute;
    bottom: 5%; /* Distance from bottom */
    width: 100%;
    color: #dfa5ff; /* Adjust text color to make it visible on your background */
    opacity: 0.9;
}

.coming-soon h1, .coming-soon p {
    text-shadow: 2px 2px 4px rgba(0, 255, 55, 0.5); /* Creates a shadow for better readability */
}

@media screen and (max-width: 768px) {
    .logo img {
        max-width: 70%; /* Adjust size for smaller screens */
    }
    .coming-soon h1 {
        font-size: 2em;
    }
    .coming-soon p {
        font-size: 1em;
    }
}

@keyframes typing {
  0%, 100% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
}

.typing-dots::after {
  content: '';
  animation: typing 2s infinite;
}