.login__content {
    /* Layout & Positioning */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}

.login__form {
    /* Box Model */
    border-radius: 8px;
    margin: 0 8px 0 8px;
    max-width: 400px;
	padding: 50px;
	width: 100%;

    /* Visual Appearance */
	background: #cdcdcb;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    opacity: 0.7;
}

.form__group {
    /* Layout & Positioning */
    align-items: center;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	justify-content: center;
}

.form__field {
    /* Layout & Positioning */
	display: flex;
	flex-direction: column;

    /* Box Model */
	width: 100%;
}

.form__label {
    /* Layout & Positioning */
	text-align: left;

    /* Box Model */
	margin-bottom: 0.5rem;

    /* Typography */
	font-weight: 500;
	font-size: 1rem;

    /* Visual Appearance */
	color: #333;
}

.form__input {
    /* Box Model */
	padding: 0.75rem 1rem; /* Comfortable padding inside form controls */
	border: 1px solid #ccc; /* Light gray border */
	border-radius: 8px; /* Rounded corners */

    /* Visual Appearance */
	background-color: #fff; /* White background for inputs */

    /* Typography */
	font-size: 1rem; /* Consistent font size */

    /* Interactivity */
	transition: border-color 0.2s ease, box-shadow 0.2s ease; /* Smooth focus effect */
}

button {
    /* Box Model */
    width: 100%;
    margin-top: 2rem;
	padding: 0.75rem 1rem;
    border: none;
    border-radius: 4px;

    /* Visual Appearance */
    background-color: #4CAF50;
    color: white;

    /* Typography */
    font-size: 16px;

    /* Interactivity */
    cursor: pointer;
}

button:hover {
    /* Visual Appearance */
    background-color: #45a049;
}

@media (max-width: 480px) {
    .login__form {
        /* Typography */
        font-size: 0.85rem;

        /* Box Model */
		padding: 10px;
    }
}