@tailwind base;
@tailwind components;
@tailwind utilities;

.bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: 300% 300%;
    background-image: linear-gradient(
        -45deg, 
        rgba(0,156,241,0.9) 0%, /* Adjust opacity here */
        rgba(87,111,230,0.8) 25%, 
        rgba(152,68,183,0.7) 51%, 
        rgba(255,53,127,0.6) 100% /* Adjust opacity here */
    );  
    animation: AnimateBG 20s ease infinite;
}

.m-w-md {
    max-width: 720px; /* Adjust this as needed */
    width: 100%;
    padding: 24px;
    box-sizing: border-box;
    overflow: auto; /* Enable scrolling for the form */
    max-height: calc(100vh - 48px); /* Limit form height to viewport height minus padding */
    background-color: rgba(255, 255, 255, 0.8); /* Adjust opacity here */
}

body {
    overflow-y: auto; /* Enable scrolling for the entire page */
}

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