* {
    margin: 0; /* Remove default margin from all elements */
    padding: 0; /* Remove default padding from all elements */
    box-sizing: border-box; /* Include padding and border in element's total width/height */
    font-family: system-ui, sans-serif; /* Use system default UI font */
}

/* Style the full page body */
body {
    height: 100vh; /* Make body full viewport height */
    display: grid; /* Use CSS Grid layout */
    place-items: center; /* Center content both horizontally and vertically */
    background: linear-gradient(120deg, #0f2027, #203a43, #2c5364); /* Diagonal gradient background */
    overflow: hidden; /* Hide any overflowing content */
}


.card {
    position: relative; /* Allow positioning of pseudo-elements inside */
    width: 320px; /* Set fixed card width */
    height: 200px; /* Set fixed card height */
    border-radius: 20px; /* Rounded corners */
    background: rgba(255, 255, 255, 0.12); /* Semi-transparent white background */
    backdrop-filter: blur(15px); /* Apply blur effect behind the card */
    border: 1px solid rgba(255, 255, 255, 0.25); /* Light transparent border */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 4); /* Deep shadow for floating effect (⚠ should be 0.4 not 4) */
    animation: breathe 5s ease-in-out infinite; /* Apply breathing animation infinitely */
    overflow: hidden; /* Hide overflow (important for light animation) */
}

/* Shiny moving light effect */
.card::before {
    content: ""; /* Required for pseudo-element */
    position: absolute; /* Position relative to .card */
    inset: -50%; /* Expand beyond card boundaries */
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.4),
            transparent); /* Diagonal shiny strip */
    animation: light 6s linear infinite; /* Move light effect continuously */
}

/* Content wrapper inside card */
.content {
    position: relative; /* Keep content above pseudo-element */
    z-index: 1; /* Ensure text stays above the light effect */
    height: 100%; /* Take full card height */
    display: flex; /* Use flexbox */
    flex-direction: column; /* Stack elements vertically */
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally */
    color: white; /* Set text color to white */
    text-align: center; /* Center text alignment */
}

/* Card title */
.content h2 {
    font-size: 22px; /* Set heading size */
    letter-spacing: 1px; /* Add spacing between letters */
}

/* Card paragraph */
.content p {
    margin-top: 10px; /* Add space above paragraph */
    font-size: 13px; /* Smaller text size */
    opacity: 0.7; /* Make text slightly transparent */
}

/* Breathing animation keyframes */
@keyframes breathe {

    0%,
    100% {
        transform: scale(1); /* Normal size */
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); /* Normal shadow */
    }

    50% {
        transform: scale(1.05); /* Slightly enlarge card */
        box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6); /* Stronger shadow */
    }
}

/* Light sweep animation */
@keyframes light {
    0% {
        transform: translateX(-100%) rotate(25deg); /* Start off left side */
    }
    100% {
        transform: translateX(100%) rotate(25deg); /* Move to right side */
    }
}