:root {
    --background-color: white;
    --text-color: black;
}

.dark-mode {
    --background-color: #121212;
    --text-color: white;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    margin: 0;
    font-family: Arial, sans-serif;
    transition: background-color 0.5s ease, color 0.5s ease; /* Smooth transition */
}

header {
    text-align: center;
    padding: 20px;
}

img.bounce {
    width: 60px; /* Reduced size */
    animation: bounce 2s infinite; /* Apply bounce animation */
}

        /* Bounce animation */
        @keyframes bounce {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-20px); /* Bounce effect */
            }
    
}

/* Styling for the "Download Gathakuru" text */
.download-text {
    text-align: center;
    font-size: 24px;
    color: #2196F3; /* Apply color */
    margin-top: 20px;
    white-space: nowrap;
    overflow: hidden;
    border-right: .15em solid #2196F3; /* Typing cursor effect */
    animation: typing 3s steps(30) 1s 1 normal both, blink-caret .75s step-end infinite;
    font-family: 'Asap', sans-serif; /* Apply Asap font */
}

/* Typing effect */
@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* Blinking cursor animation */
@keyframes blink-caret {
    50% {
        border-color: transparent;
    }
}

.theme-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
}

.theme-toggle button {
    width: 30px; /* Smaller size */
    height: 15px; /* Smaller size */
    border: 2px solid #007BFF;
    border-radius: 8px; /* Adjusted for smaller size */
    background-color: #007BFF;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.theme-toggle button::after {
    content: '';
    position: absolute;
    width: 12px; /* Smaller circle */
    height: 12px; /* Smaller circle */
    background-color: white;
    border-radius: 50%;
    top: 50%;
    left: 2px; /* Adjusted for smaller size */
    transform: translateY(-50%);
    transition: left 0.3s ease;
}

.dark-mode .theme-toggle button {
    background-color: #333;
}

.dark-mode .theme-toggle button::after {
    left: 16px; /* Adjusted for smaller size */
}

/* Download APK Button */
.download-apk {
    text-align: center;
    margin-top: 30px;
}

.download-btn {
    background-color: #0088cc; /* Telegram Blue */
    color: white;
    font-size: 18px;
    padding: 15px 25px;
    border: 2px solid white; /* White frame around the button */
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 0 5px #0088cc, 0 0 10px #0088cc, 0 0 15px #0088cc, 0 0 20px #0088cc;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.download-btn:hover {
    transform: scale(1.1);
    transition: transform 0.2s;
    border-color: #0099ff; /* More Vibrant Blue on hover */
    box-shadow: 0 0 5px #0099ff, 0 0 10px #0099ff, 0 0 15px #0099ff, 0 0 20px #0099ff; /* Vibrant Blue Glow on hover */
}

.download-btn:focus {
    outline: none;
}
.download-image {
    width: 10px;
    height: auto;  /* Maintain aspect ratio */
}