body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: #ffffff;
  color: #333;
  line-height: 1.6;
}
        .logo-container {
            text-align: center;
            margin: 20px 0;
            
            
        }
        
        .logo {
            max-width: 120px;
            height: auto;
        }
        
        .dorm-type-selection {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin: 30px 0;
        }
        
        .icon-container {
            cursor: pointer;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
           
            transition: all 0.3s ease;
        }


        .icon-container:hover {
            background-color: #f0f0f0;
            transform: scale(1.05);
        }
        
        
        .icon-container.active-male {
          background-color: rgb(168, 196, 251);
      }
      
      .icon-container.active-female {
          background-color: pink;
      }
      
        
        .login-form {
            max-width: 300px;
            margin: 0 auto;
            padding: 20px;
            display: none;
            
        }
        .form-control{
          /* width: 100%; */
          /* padding: 10px; */
          border: 1px solid #ddd;
          /* border-radius: 5px; */
          box-sizing: border-box;
        }
       
        
        .input {
          max-width: 200px;
          min-height: 40px;
          padding: 10px;
          font-family: 'Courier New', Courier, monospace;
          outline: none;
          background: #e8e8e8;
          box-shadow: 5px 5px 17px #c8c8c8,
                     -5px -5px 17px #ffffff;
          border: none;
          border-radius: 10px;
          transition: all .5s;
        }
        
        .input:focus {
          background: #e8e8e8;
          box-shadow: inset 5px 5px 17px #c8c8c8,
                    inset -5px -5px 17px #ffffff;
        }
        
        .form-group {
          
          height: 40px;
          display: flex;
          justify-content: center;
          align-items: center; /* Optional: centers vertically as well */
          /* height: 100vh;        */
          margin-bottom: 8px;
        }
       
        .form-control {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        
        .btn-login {
          color: #ffffff;
          font-family: 'Inter';
          /* padding: 12px; */
          padding: 0.7em 1.7em;
          font-size: 15px;
          border-radius: 0.5em;
          background: #007bff;
          cursor: pointer;
          
          border: 1px solid #007bff; 
          transition: all 0.3s;
          box-shadow:
            6px 6px 12px #c5c5c5,
            -6px -6px 12px #ffffff;
        }
        .btn-login:active{
          color: #ffffff;
          box-shadow:
          0px 0px 0px #c5c5c5,
          0px 0px 0px #ffffff,
          inset 4px 4px 12px #007bff,
          inset -4px -4px 12px #60adff;
        }
        
        .remember-me {
          display: flex;
          align-items: center;
          gap: 8px;
      }
      
      .form-checkbox {
          width: 16px;
          height: 16px;
          cursor: pointer;
      }