@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

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

   body {
       height: 100vh;
       background-color: gainsboro;
       display: flex;
       align-items: center;
       justify-content: center;
       font-family: 'Segoe UI', sans-serif;
       overflow: hidden;
   }

   .container {
       width: 104%;
       max-width: 113rem;
       height: 500px;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .card {
       display: flex;
       width: 100%;
       height: 160%;
       background: rgba(255, 255, 255, 0.05);
       border-radius: 20px;
       overflow: hidden;
       backdrop-filter: blur(10px);
       box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
       border: 1px solid rgba(255, 255, 255, 0.2);
   }

   .side {
       width: 50%;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       position: relative;
       padding: 30px;
       transition: all 0.3s ease;
   }

   .left {
       background: url('/stairs.jpg') no-repeat center center/cover;
       color: white;
   }

   .right {
       background: rgba(0, 0, 0, 0.1);
       color: black;
   }

   .side h2 {
       margin-bottom: 20px;
       font-size: 28px;
   }

   button {
       padding: 12px 25px;
       font-size: 16px;
       border: none;
       outline: none;
       background: transparent;
       border: 2px solid currentColor;
       color: inherit;
       cursor: pointer;
       transition: all 0.3s ease;
   }

   .signup-btn:hover {
       background-color: #000000;
       color: #fdfdfd;
   }

   input {
      
       margin: 10px 10px;
       border: none;
       border-radius: 5px;
       outline: none;
       font-size: 16px;
       background: rgba(255, 255, 255, 0.2);
       color: black;
       backdrop-filter: blur(4px);
   }

   input:focus {
       border: 2px solid black;
   }

   .cursor {
       width: 20px;
       height: 20px;
       border-radius: 50%;
       position: fixed;
       top: 0;
       left: 0;
       pointer-events: none;
       z-index: 9999;
       transition: transform 0.2s ease, background 0.2s ease;
   }

   @keyframes float {

       0%,
       100% {
           transform: translateY(0) rotate(0deg);
       }

       50% {
           transform: translateY(-20px) rotate(5deg);
       }
   }

   .input-field {
       background: rgba(255, 255, 255, 0.1);
       border: 1px solid rgba(255, 255, 255, 0.2);
       border-radius: 50px;
       padding: 15px 20px;
       color: rgb(12, 12, 12);
       transition: all 0.3s ease;
       width: 100%;
   }

   .input-field:focus {
       background: rgba(255, 255, 255, 0.15);
       outline: none;
       border-color: rgba(255, 255, 255, 0.4);
       box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
   }

   .input-field::placeholder {
       color: rgba(7, 7, 7, 0.5);
   }

   .btn-login {
       width: 31rem;
       background-color: #000000;
       color: white;
       border-radius: 50px;
       padding: 12px 204px;
       transition: all 0.3s ease;
       border: none;
       font-weight: 600;
       letter-spacing: 1px;
   }

   .btn-login:hover {
       transform: translateY(-2px);
       box-shadow: 0 5px 15px rgba(44, 44, 44, 0.4);
       background-color: white;
       color: #000000;
   }

   .social-icon {
       margin: 0rem 1rem;
       width: 45px;
       height: 45px;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.1);
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.3s ease;
       border: 1px solid rgba(14, 13, 13, 0.2);
   }

   .social-icon:hover {
       background: rgba(255, 255, 255, 0.2);
       transform: translateY(-3px);
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
   }

   .title {
       background: linear-gradient(90deg, #0c0c0c, #1d1d1d);
       -webkit-background-clip: text;
       background-clip: text;
       color: transparent;
       display: inline-block;
   }

   .checkbox-container {
       display: flex;
       align-items: center;
   }

   .checkbox-container input[type="checkbox"] {
       appearance: none;
       -webkit-appearance: none;
       width: 18px;
       height: 18px;
       border: 1px solid rgba(0, 0, 0, 0.3);
       border-radius: 4px;
       outline: none;
       cursor: pointer;
       position: relative;
       margin-right: 8px;
   }

   .checkbox-container input[type="checkbox"]:checked {
       background: linear-gradient(45deg, #9d00ff, #ff00ff);
       border-color: transparent;
   }

   .checkbox-container input[type="checkbox"]:checked::after {
       content: "✓";
       position: absolute;
       color: rgb(14, 13, 13);
       font-size: 12px;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
   }

   .icon {
       color: black;
       font-size: 24px;
       margin: 0 12px;
       transition: color 0.3s ease;
       text-decoration: none;
   }

   .icon.fb:hover {
       color: #1877F2;
       /* Facebook blue */
   }

   .icon.google:hover {
       color: #DB4437;
       /* Google red */
   }

   .icon.twitter:hover {
       color: #1DA1F2;
       /* Twitter blue */
   }

   .logo-wrapper {
       display: flex;
       align-items: center;
       justify-content: flex-start;
       position: absolute;
       top: 20px;
       left: 30px;
       z-index: 10;
   }

   .logo {
       height: 40px;
       width: auto;
       object-fit: contain;
   }

   .logo-text {
       position: relative;
       font-size: 3.5em;
       font-weight: 900;
       color: transparent;
       -webkit-text-stroke: 2px #000000;
       font-family: 'Poppins', sans-serif;
       cursor: pointer;
       text-transform: uppercase;
       line-height: 1.2em;
   }

   .logo-text::before,
   .logo-text::after {
       content: attr(data-text);
       position: absolute;
       top: 0;
       left: 0;
       transition: 0.5s;
   }

   .logo-text:hover {
       color: #000000;
       -webkit-text-stroke: 1px #000;
   }

   .logo-text:hover::before {
       color: #f00;
       z-index: 1;
       -webkit-text-stroke: 1px #000;
       transform: translate(10px, -10px);
   }

   .logo-text:hover::after {
       color: #0ff;
       z-index: 2;
       -webkit-text-stroke: 1px #000;
       transform: translate(20px, -20px);
   }

   .bug {
       transition: transform 0.6s;
   }

   .bug.flip {
       transform: rotateY(180deg);
   }

   .menu-button {
       width: 11%;
       aspect-ratio: 1;
       display: flex;
       padding: 4px;
       background: #fff;
       border-radius: 63%;
       position: relative;
       height: 4%;
       margin: 20px 25px;
       align-items: center;
       justify-content: center;
       overflow: hidden;
   }


   /* Wrapper that stays centered and rotates the image */
   .menu-icon-wrapper {
       width: 100%;
       height: 60%;
       display: flex;
       align-items: center;
       justify-content: center;
       perspective: 1000px;
       /* Enables 3D flip effect */
   }

   .menu-icon {
       width: 100%;
       height: auto;
       transition: transform 0.6s ease;
       backface-visibility: hidden;
   }

   /* Flip effect */
   .menu-button:hover .menu-icon {
       transform: rotateY(180deg);
   }
   .error-message {
  color: #dc2626;
  font-size: 13px;
  margin-top: 4px;
}

#password-strength {
  color: #10b981; /* green by default, overridden via JS */
}