:root {
        --primary-color: #00bcd4; /* Updated to a more modern shade */
        --secondary-color: #ff4081; /* Updated to a more modern shade */
        --tertiary-color: #ffeb3b; /* Updated to a more modern shade */
        --background-color: #121212; /* Darker background for modern aesthetics */
        --text-color: #ffffff;
    }

    * {
        background-color: #020214;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    html, body {
        height: 100%;
        font-family: 'Roboto', sans-serif; /* Updated to a more modern font */
        color: var(--text-color);
        /* background: url('picking-out-recruitment-sjwz5p0swb6zke3u.jpg') no-repeat center center fixed; */
        background-size: cover;
        overflow: hidden;
    }

    .hyperdimensional-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        perspective: 1200px; /* Increased perspective for a more immersive effect */
    }

    .hypercube {
        width: 320px; /* Slightly increased size for modern look */
        height: 320px;
        position: relative;
        transform-style: preserve-3d;
        transition: transform 0.6s ease; /* Slightly smoother transition */
    }

    .hypercube-face {
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(0, 188, 212, 0.1); /* Updated to match primary color */
        border: 2px solid var(--primary-color);
        display: flex;
        justify-content: center;
        align-items: center;
        backface-visibility: hidden;
        transition: transform 0.6s ease; /* Slightly smoother transition */
    }

    .hypercube-face:nth-child(1) { transform: translateZ(160px); }
    .hypercube-face:nth-child(2) { transform: rotateY(180deg) translateZ(160px); }
    .hypercube-face:nth-child(3) { transform: rotateY(-90deg) translateZ(160px); }
    .hypercube-face:nth-child(4) { transform: rotateY(90deg) translateZ(160px); }
    .hypercube-face:nth-child(5) { transform: rotateX(-90deg) translateZ(160px); }
    .hypercube-face:nth-child(6) { transform: rotateX(90deg) translateZ(160px); }

    .portal-content {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: rgba(18, 18, 18, 0.9); /* Darker background for modern aesthetics */
        border-radius: 15px; /* Slightly reduced border radius */
        padding: 25px; /* Increased padding for better spacing */
        transform: translateZ(1px);
        opacity: 0;
        transition: opacity 0.6s ease; /* Slightly smoother transition */
    }

    .portal-content.active {
        opacity: 1;
    }

    h2 {
        color: var(--primary-color);
        font-size: 1.75rem; /* Increased font size for better visibility */
        margin-bottom: 1.5rem; /* Increased margin for better spacing */
        text-shadow: 0 0 15px var(--secondary-color); /* Enhanced text shadow */
    }

    .quantum-input {
        width: 100%;
        margin-bottom: 1.5rem; /* Increased margin for better spacing */
        position: relative;
    }

    .quantum-input i {
        position: absolute;
        left: 12px; /* Adjusted for better alignment */
        top: 50%;
        transform: translateY(-50%);
        color: var(--primary-color);
    }

    input {
        width: 100%;
        padding: 12px 12px 12px 40px; /* Increased padding for better touch targets */
        border: none;
        border-radius: 25px; /* Updated to a more modern border radius */
        background-color: rgba(255, 255, 255, 0.15); /* Updated for a modern look */
        color: var(--text-color);
        transition: box-shadow 0.3s ease, background-color 0.3s ease; /* Added background color transition */
    }

    input:focus {
        outline: none;
        box-shadow: 0 0 20px var(--secondary-color);
        background-color: rgba(255, 255, 255, 0.2); /* Slightly brighter on focus */
    }

    button {
        width: 100%;
        padding: 12px; /* Increased padding for better touch targets */
        background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
        color: var(--background-color);
        border: none;
        border-radius: 25px; /* Updated to a more modern border radius */
        font-size: 18px; /* Increased font size for better visibility */
        cursor: pointer;
        transition: transform 0.3s ease, background-color 0.3s ease; /* Added background color transition */
    }

    button:hover {
        transform: scale(1.05);
        background-color: rgba(0, 0, 0, 0.1); /* Added hover effect */
    }

    .quantum-footer {
        margin-top: 1.5rem; /* Increased margin for better spacing */
        text-align: center;
    }

    .quantum-footer a {
        color: var(--primary-color);
        text-decoration: none;
        margin: 0 15px; /* Increased margin for better spacing */
        transition: color 0.3s ease;
    }

    .quantum-footer a:hover {
        color: var(--tertiary-color);
    }

    @keyframes quantumFloat {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        50% { transform: translateY(-12px) rotate(5deg); } /* Increased float distance for a more dynamic effect */
    }

    .quantum-particle {
        position: absolute;
        opacity: 0.8; /* Increased opacity for better visibility */
        animation: quantumFloat 5s ease-in-out infinite;
        pointer-events: none;
    }

    #dimensionalMap {
        width: 100%;
        height: 160px; /* Slightly increased height for better visibility */
        position: relative;
        margin-bottom: 1.5rem; /* Increased margin for better spacing */
    }

    .dimension {
        width: 12px; /* Increased size for better visibility */
        height: 12px; /* Increased size for better visibility */
        border-radius: 50%;
        position: absolute;
        transition: all 0.5s ease;
    }

    #quantumMessageBoard {
        width: 100%;
        height: 160px; /* Slightly increased height for better visibility */
        overflow-y: auto;
        margin-bottom: 1.5rem; /* Increased margin for better spacing */
        padding: 12px; /* Increased padding for better spacing */
        background: rgba(255, 255, 255, 0.15); /* Updated for a modern look */
        border-radius: 15px; /* Updated to a more modern border radius */
    }

    #quantumMessageBoard p {
        margin: 6px 0; /* Increased margin for better spacing */
        font-size: 1rem; /* Increased font size for better visibility */
        color: var(--tertiary-color);
    }