/* * 1. GLOBAL STYLES & RESET 
        * Blade-Runner/Sci-Fi Theme: Dark, high-contrast, modern font
        */
        :root {
            --color-blue: #0A1B4F; /* Dark Blue from Logo */
            --color-red: #E53935; /* Red from Logo */
            --color-green: #24CC56; /* Button Green */
            --color-white: #EAEAEA; /* Off-white for body text */
            --color-light-gray: #B0B0B0; /* Subtext */
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            /* Full screen height, Flexbox centering for vertical/horizontal elasticity */
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--color-blue);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: var(--color-white);
            line-height: 1.6;
            text-align: center;
            padding: 2rem 0
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        /*
        * NEW: OUTER WRAPPER (To achieve centered 60% width and white edge)
        */
        .outer-wrapper {
            /* 60% of viewport width (clamped) */
            max-width: 900px;
            width: clamp(300px, 60vw, 900px); 

            max-height: 90vh;
            overflow-y: auto;
            
            /* White Edge */
            border: 1px solid var(--color-white);
            box-shadow: 0 0 30px rgba(234, 234, 234, 0.1); 
            
            /* Centering/Flex is already on the body, just add padding */
             padding: 1.5rem 1rem; 

            /* NEW: Rounded Corners */
            border-radius: 12px;
        }

        /*
        * 2. MAIN CONTAINER & ELASTIC TEXT
        */
    .container {
            /* Max width on desktop, padding for all screen sizes */
            max-width: 900px; /* This is now contained by .outer-wrapper */
            width: 100%;
            padding: 0; 

        }

        /* Elastic Header Text (adjusts with viewport width) */
        h1 {
            color: var(--color-red);
            font-size: clamp(2rem, 6vw, 4rem); 
            font-weight: 900;
            letter-spacing: 2px;
            margin-bottom: 0.5rem;
            text-shadow: 0 0 10px rgba(229, 57, 53, 0.5); 
        }

        /* Elastic Body Text */
        p {
            color: var(--color-white);
            font-size: clamp(1rem, 1.5vw, 1.25rem);
            margin: 0 0 2rem 0;
            padding: 0 1rem;
        }

        .contact-info {
             color: var(--color-light-gray);
             font-size: clamp(0.9rem, 1.2vw, 1.1rem);
             margin-top: 1.5rem;
             margin-bottom: 2rem; 
        }

        /*
        * 3. LOGO 
        */
        .logo {
            max-width: 300px;
            width: clamp(200px, 30vw, 300px); 
            height: auto;
            margin-bottom: 1.5rem; /* Adjusted for space with Socrates image */
            filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.2));
        }
        
        /*
        * OLD: SOCRATES IMAGE STYLES 
        */
        /*
        .socrates-image {

            width: clamp(150px, 20vw, 250px);
            height: clamp(150px, 20vw, 250px);

            border-radius: 50%;
            object-fit: cover;
            border: 5px solid var(--color-white); 
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.15);
            margin-bottom: 2rem;
        }
            */

        /*
        * NEW: SOCRATES IMAGE STYLES 
        */
        .socrates-image {
            display: block; /* FIX: Added to ensure vertical stacking */
            margin: 0 auto 2rem auto; /* FIX: Centered */
            /* Medium, elastic size */
            width: clamp(150px, 20vw, 250px);
            height: clamp(150px, 20vw, 250px);
            /* Make it a circle */
            border-radius: 50%;
            object-fit: cover;
            /* FIX: Border color changed to red to match founder photo */
            border: 5px solid var(--color-red); 
            /* Subtle shadow for depth */
            box-shadow: 0 0 20px rgba(229, 57, 53, 0.3); /* Changed to red glow */
            margin-bottom: 2rem;
        }

        /* * 4. LOGIN BUTTON STYLES
        * NOTE: The button wrapper is now an <a> tag for the link
        */
        .login-link {
            display: inline-block; /* Allows button styles to work */
        }
        
        .login-button {
            /* Button styles applied to the actual button element */
            background-color: var(--color-green);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 1rem 2rem;
            font-size: clamp(1rem, 1.8vw, 1.3rem); 
            font-weight: 700;
            cursor: pointer;
            transition: background 0.2s ease, transform 0.1s ease;
            box-shadow: 0 4px 15px rgba(36, 204, 86, 0.4); 
            margin-bottom: 0; 
        }

        .login-button:hover {
            background-color: #1aae47; 
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(36, 204, 86, 0.6);
        }

        .login-button:active {
            transform: translateY(0);
        }

        /*
        * 5. FOUNDER SECTION
        */
        .founder-section {
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid rgba(229, 57, 53, 0.2); 
            opacity: 0.9;
        }

        .founder-photo {
            width: clamp(80px, 12vw, 100px); 
            height: clamp(80px, 12vw, 100px);
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid var(--color-red);
            margin-bottom: 1rem;
            opacity: 1; 
        }

        .founder-bio {
            color: var(--color-light-gray);
            font-size: clamp(0.85rem, 1.1vw, 1rem);
            white-space: pre-wrap; 
            margin-bottom: 0;
            padding: 0;
            text-shadow: 0 0 2px rgba(255, 255, 255, 0.1); 
        }

        /*
        * 6. SOCIAL ICONS 
        */
        .social-links {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            margin-bottom: 1rem;
        }

        .social-icon {
            display: inline-block;
            color: var(--color-white);
            font-size: clamp(1.8rem, 3vw, 2.5rem);
            transition: color 0.3s ease, transform 0.1s ease;
        }

        .social-icon:hover {
            color: var(--color-green); 
            transform: scale(1.1);
        }

        ul {
  list-style-position: inside;
  padding-left: 0;
  margin-left: 0;
}

ul li {
  text-align: left;
  margin: 0.25rem 0;
}