body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0a1837; /* Dark blue background */
    color: #fff;
    font-family: 'Arial', sans-serif;
    overflow: hidden;
}

#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #0e2a47;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}

.container {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 20px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.1); /* Semi-transparent background */
    box-shadow: 0px 0px 15px rgba(0,0,0,0.2); /* subtle shadow for depth */
}

.logo img {
    transition: transform 0.5s ease, box-shadow 0.5s ease, opacity 0.5s ease; /* Transition effect for glow, opacity, and transform */
    display: block;
    margin: 0 auto;
    max-width: 200px;
    box-shadow: 0 0 15px #4db8ff; /* Initial glow effect */
    opacity: 0.7; /* Start with a slightly lower opacity for more impact */
}

/* Keyframes for the page load animation */
@keyframes fadeInGlow {
    to {
        box-shadow: 0 0 5px #4db8ff; /* End state of glow after animation */
        opacity: 1; /* End state of opacity after animation */
    }
}

/* Trigger the fadeInGlow animation on page load */
.logo img {
    animation: fadeInGlow 3s ease forwards;
}

/* Hover effect */
.logo img:hover {
    box-shadow: 0 0 20px #4db8ff; /* Increased glow for hover */
    transform: scale(1.05); /* Slightly larger on hover */
    opacity: 1; /* In case you want to change the opacity on hover */
}

p {
    color: #d3d3d3;
    margin: 5px 0;
}
#typed {
    font-size: 3em; /* Increase font-size here */
    color: #4db8ff; /* Lighter blue for the title */
    white-space: pre;
    display: inline-block;
    margin: 0 auto;
    height: 1em; /* Adjust height to align the cursor */
    line-height: 1em; /* Align the cursor */
}
.typed-cursor {
    font-size: 3em; /* Match the font size of the text */
    color: #4db8ff; /* Same color as the text for visibility */
    opacity: 1;
    vertical-align: bottom; /* Aligns the cursor with the baseline of the text */
    animation: typedjsBlink 0.7s infinite;
    -webkit-animation: typedjsBlink 0.7s infinite;
    animation: typedjsBlink 0.7s infinite;
}