/* styles/login.css */
                
        @font-face {
            font-family: 'HELVETICA_0';
            src: url('../fonts/helvetica.ttf') format('truetype');
        }

        @font-face {
            font-family: 'BEBASNEUE REGULAR';
            src: url('../fonts/bebasneue_regular.ttf') format('truetype');
        }


        body {
            font-family: 'HELVETICA_0', sans-serif;
            background-color: #939598;
            margin: 0;
            font-size: 16px; /* Set a base font size */
            line-height: 1.5; /* Set a base line height */
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        body {
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        body.fade-in {
            opacity: 1;
        }



        .login-container {
            text-align: center;
            max-width: 600px;
            padding: 30px;
            border-radius: 10px;
            background-color: #636467;
            color: #fff;
            font-family: 'BEBASNEUE REGULAR', sans-serif;
            font-size: 1rem;
            margin-top: 20px; /* Adjust margin as needed */
            margin-bottom: 100px;
            border: 2px solid #555; /* Add a solid border */
            box-shadow: 5px 5px 100px rgba(0, 0, 0, 0.3); /* Add a box shadow for the 3D effect */
        }
        
        

        h1 {
            font-size: 2.5rem;
        }

        .login-container img {
            max-width: 300px;
        }

        .styled-button {
            padding: 10px 40px;
            margin-top: 10px;
            background-color: #0099a8;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 4px;
            /* Add any additional styles you want for the buttons */
        }

        /* Adjust font size and line height as needed for different screen sizes */
        @media (max-width: 768px) {
            body {
                font-size: 14px;
                line-height: 1.4;
            }
        }

        @media (max-width: 576px) {
            body {
                font-size: 12px;
                line-height: 1.3;
            }
        }

        input[type="text"],
        input[type="password"]  {
            padding: 5px;
        }

        .styled-button:hover {
            background-color: #7ba840;
        }

        /* Footer styles */
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 1px 1px; /* Adjust padding to make the height smaller */
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            font-size: 0.9rem; /* Adjust font size if needed */
        }