* {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }



        .body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #00bcd4, #8bc34a);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh; /* Allow body to expand beyond viewport if content is taller */
            background-size: cover;
            background-attachment: fixed;
            overflow-x: hidden;
        }



        .login-container {

            background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white background */

            padding: 40px;

            border-radius: 10px;

            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);

            width: 100%;

            max-width: 420px;

            text-align: center;

        }



        h1 {

            color: #333;
            margin-bottom: 0px;
            font-size: 28px;

        }



        .tabs {

            display: flex;

            justify-content: space-around;

            margin-bottom: 30px;

        }



        .tab {

            padding: 12px 25px;

            background-color: #333;

            color: white;

            border: none;

            cursor: pointer;

            border-radius: 5px;

            font-size: 16px;

        }



        .tab:hover {

            background-color: #555;

        }



        .login-form {

            display: block;

            transition: opacity 0.3s ease;

        }



        .login-form h2 {

            color: #333;

            margin-bottom: 20px;

            font-size: 22px;

        }



        form {

            display: flex;

            flex-direction: column;

            align-items: center;

        }



        label {

            margin: 10px 0 5px;

            font-size: 16px;

            color: #555;

            text-align: left;

            width: 100%;

        }



        input {

            width: 100%;

            padding: 12px;

            margin-bottom: 20px;

            border: 2px solid #ddd;

            border-radius: 5px;

            font-size: 16px;

            outline: none;

            transition: border-color 0.3s;

        }



        input:focus {

            border-color: #00bcd4;

        }



        /* Button Styles */

        button {

            padding: 12px 30px;

            background-color: #00bcd4;

            color: white;

            border: none;

            border-radius: 30px; /* Rounded corners for a modern look */

            cursor: pointer;

            font-size: 16px;

            box-shadow: 0 4px 8px rgba(0, 188, 212, 0.3); /* Soft shadow effect */

            transition: all 0.3s ease;

            letter-spacing: 1px; /* Slight space between letters */

        }



        button:hover {

            background-color: #008c9e; /* Darker shade of blue when hovering */

            box-shadow: 0 6px 12px rgba(0, 188, 212, 0.5); /* Bigger shadow on hover */

            transform: translateY(-2px); /* Slight lift effect */

        }



        button:active {

            background-color: #007b8f; /* Even darker shade when clicked */

            transform: translateY(0); /* Button "click" effect */

            box-shadow: 0 4px 8px rgba(0, 188, 212, 0.3);

        }

        

        

    .form-container.active {

      display: block;

    }



        /* Responsive Design */

        @media (max-width: 480px) {

            .login-container {

                padding: 20px;

                width: 100%;

                max-width: 90%;

            }



            .tab {

                padding: 10px 15px;

                font-size: 14px;

            }



            input, button {

                font-size: 14px;

            }

        }