/* General Styles */
body {
    font-family: Arial, sans-serif;
    color: #333;
    line-height: 1.6;
    animation: backgroundFade 10s infinite;
    display: grid;
    justify-content: center;
    height: 80vh;
    margin: 10vh 10vw;
}

@keyframes backgroundFade {
    0% { background-color: #f4f4f4; }
    25% { background-color: #e8e8ff; }
    50% { background-color: #f0e8f4; }
    75% { background-color: #e8fff4; }
    100% { background-color: #f4f4f4; }
}

/* Heading Style */
h1 {
    color: #333;
    text-align: center;
    display: flex;
    padding: 0% 0 0 170px;
    align-items: flex-end;
}

/* Label and Input Styles */
label, /* Added for general label styles */
#id_company { /* Assuming this is an ID for a specific element */
    width: 100%;
    line-height: 1.6;
    margin-block-start: 0em;
    margin-block-end: 0em;
    font-size: 22px;
}

/* Form Styles */
form {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 100%; /* Adjusted to 100% for better responsiveness */
    margin: auto; /* Centering the form */
}

form input { /* Styles for the button */
    width: 90%; /* Full width */
    padding: 10px; /* Padding for better touch */
    margin-bottom: 10px; /* Space between inputs */
    font-size: 18px;
}
form button { /* Styles for the button */
    width: 100%; /* Full width */
    padding: 10px; /* Padding for better touch */
    margin-bottom: 10px; /* Space between inputs */
    font-size: 18px;
}

form button {
    background: #333;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
}

form button:hover {
    background: #4cae4c;
}

/* Paragraph Styles */
p {
    color: #333;
}

/* Responsive Design */
@media screen and (orientation: landscape) {
    @media (max-width: 1000px) {
        body {
            width: 60vw;
            padding: 10px;
            margin: 0;
            display: block;
        }

        form {
            width: 80vw;
            margin: 0 0 0 5vw;
            max-width: none;
        }
        h1 {
            height: 10vh;
            width: 100vw;
            margin: 5vh 0;
            padding: 0;
            align-items: center;
            justify-content: center;
            font-size: 30px;
        }
        form * {
            font-size: 20px;
        }
        form button {
            font-size: 20px;
            width: 90%;
            margin: 10px;
        }
        form input {
            font-size: 20px;
            margin: 0px;
        }
        form p{
            margin: 0px;
            height: 110px;
        }
    }
}
@media screen and (orientation: portrait) {
    @media (max-width: 1000px) {
        body {
            width: 90vw;
            padding: 10px;
            margin: 0;
            display: block;
        }

        form {
            width: 80vw;
            margin: 0 0 0 5vw;
            max-width: none;
        }
        h1 {
            height: 10vh;
            width: 100vw;
            margin: 10vh 0;
            padding: 0;
            align-items: center;
            justify-content: center;
            font-size: 50px;
        }
        form * {
            font-size: 40px;
        }
        form button {
            font-size: 40px;
            width: 90%;
            margin: 20px;
        }
        form input {
            font-size: 40px;
            width: 80%;
            margin: 20px 20px 0 10px;
            padding: 0;
        }
        form p{
            margin: 0px;
            height: 150px;
        }
    }
}