style.css

/* Basic Reset & Body Style */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #000011; /* Dark space blue */
    color: #f0f0f0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden; /* Prevent horizontal scrollbar */
}

/* Three.js Canvas */
#bg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1; /* Place canvas behind all other content */
}

/* Content Centering */
.content-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 2rem;
}

/* Iframe Container Styling */
.iframe-container {
    width: 90%;
    max-width: 1200px;
    background: rgba(0, 20, 30, 0.6); /* Semi-transparent background */
    border: 1.5px solid #00ffff;
    border-radius: 10px;
    padding: 10px;
    box-shadow:
        0 0 10px rgba(0, 255, 255, 0.5),
        0 0 25px rgba(0, 255, 255, 0.4),
        0 0 50px rgba(0, 255, 255, 0.3),
        inset 0 0 10px rgba(0, 255, 255, 0.3); /* Glowing effect */
    backdrop-filter: blur(3px); /* Frosted glass effect */
    -webkit-backdrop-filter: blur(3px);
}

iframe {
    display: block;
    border-radius: 5px; /* Match container's rounded corners */
}