/* Add your CSS code here.

#qr-code-container a {
    display: inline-block;  /* Ensure link behaves like a block element */
    margin-top: 10px;       /* Add spacing above the download link */
    text-decoration: none;  /* Remove underline */
    color: #007bff;         /* Link color */
    font-weight: bold;      /* Bold text */
}

button {
    margin-top: 10px;       /* Add spacing above the button */
    padding: 10px 20px;     /* Adjust button size */
    font-size: 16px;        /* Increase font size */
    cursor: pointer;        /* Pointer cursor on hover */
	}

input {
    margin-right: 10px;     /* Add spacing between input and button */
    padding: 5px;           /* Add padding inside the input field */
    font-size: 16px;        /* Match font size with the button */
}

.qr-code-generator-container {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center;    /* Center items horizontally */
    text-align: center;     /* Center text */
    padding: 20px;
}

#qr-code-container {
    max-width: 100%;          /* Ensure container does not exceed the screen width */
    margin-top: 20px;         /* Add space above the container */
}

#qr-code-image {
    max-width: 100%;          /* Ensure the image scales within the container */
    height: auto;             /* Maintain the aspect ratio */
    max-height: 600px;        /* Optional: Limit height for larger screens */
    border: 2px solid #ccc;   /* Optional: Add a border for visibility */
    border-radius: 10px;      /* Optional: Rounded corners */
}

#download-qr-code {
    display: inline-block;    /* Make the link behave like a block */
    margin-top: 10px;         /* Add space above the download link */
    text-decoration: none;    /* Remove underline */
    font-weight: bold;        /* Bold text */
    color: #007bff;           /* Link color */
}

@media (max-width: 768px) {
    #qr-code-image {
        max-height: 200px;    /* Adjust image size for smaller screens */
    }
}

#generate-qr-code-button {
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    color: white; /* Text color */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background: linear-gradient(
        to right,
        violet,
        indigo,
        blue,
        green,
        yellow,
        orange,
        red
    );
    background-size: 200% 100%;
    animation: gradient-rainbow 12s linear infinite; /* Animate gradient */
    transition: transform 0.2s; /* Smooth hover effect */
}

/* Add hover effect for interactivity */
#generate-qr-code-button:hover {
    transform: scale(1.1); /* Slight zoom on hover */
}

/* Gradient Animation Keyframes */
@keyframes gradient-rainbow {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}


#generate-qr-code-button:hover {
    transform: scale(1.1); /* Slight zoom on hover */
}

#download-qr-code {
    display: none; /* Initially hidden */
    visibility: hidden; /* Ensure hidden */
}

#qr-code-container a.visible {
    display: inline-block !important;
    visibility: visible !important;
}





For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */