@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

* {
	overflow:hidden;
 	font-family: "Inter", sans-serif;
	overflow-x:hidden;
	outline:none;
	text-decoration:none;
	transition:all 250ms linear;
}

body {
	background:#DFDACC;
	padding:0;
	margin:0;
	overflow-y:scroll;
}

.mainForm {
	text-align:center;
    	border:1px solid #000;
    	border-radius:5px;
    	box-shadow:2px 3px #999;
    	width:35%;
    	min-height:500px; /* Allow growth beyond 500px */
    	position:fixed;
    	top:15%;
    	left:32.5%;
    	margin:0;
    	padding:15px 0;
    	display:flex;
    	flex-direction:column;
    	align-items:center;
    	justify-content:flex-start; /* Start from top to avoid cutoff */
    	overflow-y:auto; /* Scroll if content overflows */
}

.mainForm * {
    	margin:8px 0; /* Reduced from 10px for less spacing */
}

.mainForm h2 {
    	font-size:24px; /* Reduced from 28px */
}

.mainForm p {
	font-size:22px;
}

.mainForm .error {
    	font-weight:bold;
    	font-size:18px; /* Reduced from 24px */
    	color:red;
}

.mainForm input[type="text"], .mainForm input[type="password"] {
    	width:80%;
    	padding:5px 0;
    	text-indent:5px;
    	border:none;
    	box-shadow:inset 0 0 1px 0.5px #000;
    	border-radius:5px;
    	font-size:18px; /* Reduced from 20px */
    	line-height:1.5; /* Ensure text isn’t cut off */
}	

.mainForm input[type="submit"] {
    	margin:12px 0; /* Reduced from 15px */
    	font-size:20px; /* Reduced from 22px */
    	width:60%;
    	padding:7.5px 0;
    	border:none;
    	background:#2a419e;
    	color:#fff;
    	font-weight:bolder;
    	border-radius:5px;
}

.mainForm input[type="submit"]:hover {
    	background:rgba(42,65,158,0.8);
}

.mainForm img {
    	margin:8px; /* Reduced from 10px */
    	width:125px;
    	background:#DFDACC;
    	text-align:center;
}	

@media (max-width:768px) {
    .mainForm {
        width:80%;
        left:10%;
        top:10%;
        min-height:400px;
    }
}

:root {
    	--nav-bg-color:#2a419e;
    	--nav-text-color:#ffffff;
    	--nav-height:10%;
    	--nav-border-color:#ff0000;
}
.mainNav ul {
    	position:fixed;
    	top:0;
    	left:0;
    	width:100%;
    	height:var(--nav-height);
    	margin:0;
    	padding:0;
    	background:var(--nav-bg-color);
    	z-index:1000;
    	list-style:none;
	 box-shadow:2px 2px 2px 2px #999;
}
.mainNav li {
    	width:15%;
    	height:100%;
    	box-sizing:border-box;
    	float:left;
    	display:flex;
    	align-items:center;
    	justify-content:center;
    	text-align:center;
}
	
.mainNav li a {
    	color:var(--nav-text-color);
    	text-decoration:none;
    	display:block;
    	width:100%;
    	height:100%;
    	display:flex;
    	align-items:center;
    	justify-content:center;
}	
.mainNav li a:hover,
.mainNav li a:focus {
    	background:rgba(255,255,255,0.1);
    	outline:2px solid var(--nav-text-color);
}	
.mainNav li a img {
    	max-height:60px;
    	margin:5px;
    	object-fit:contain;
}	
@media (max-width:768px) {
    .mainNav ul {
        height:auto;
    }
    .mainNav li {
        width:100%;
        float:none;
        border:none;
        padding:10px 0;
    }
    .mainNav li a img {
        max-height:40px;
    }
}

.mainNav .rightNav {
	float:right;
}

.sideNav ul {
	position:fixed;
	top:10%;
	left:0;
	height:90%;
	width:12.5%;
	background:#b2aea3;
	margin:0;
	padding:0;
	z-index:100;
    	box-shadow:2px 2px 2px 2px #999;
}

.sideNav li {
	width:100%:
	text-align:center;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:10px 0px;
}

.sideNav li a {
	font-size:18px;
	color:#000;
}

.sideNav li:hover {
	background:#c9c4b8;
}

.mainContainer {
    position:fixed;
    top:10%;
    left:12.75%;
    width:87.25%;
    height:90%;
    overflow-y:scroll;
}

.mainContainer .containerHead {
    width:80%;
    position:relative;
    left:10%;
    margin-top:5%;
    border-radius:5px;
    box-shadow:2px 2px 2px 2px #999;
    text-align:center;
    background:#3f54a8;
    color:#fff;
    padding-bottom:20px;
}

.mainContainer .containerHead .initials {
    border:3px solid #fff;
    border-radius:50%;
    width:100px;
    height:100px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    left:50%;
    transform:translateX(-50%);
    background-color:#333;
    color:#fff;
    font-size:24px;
    font-family:Arial, sans-serif;
    font-weight:bold;
}

.mainContainer .containerHead ul {
    width:100%;
    margin:0;
    padding:20px 0;
}

.mainContainer .containerHead li {
    float:left;
    width:25%;
    text-align:center;
}

.mainContainer .containerHead li a {
    color:#fff;
    font-weight:bold;
}

.mainContainer .containerHead li:hover a {
    color:#000;
}

.mainContainer .containerElement {
    width:80%;
    position:relative;
    left:10%;
    margin-top:40px;
    border-radius:5px;
    box-shadow:2px 2px 2px 2px #999;
    text-align:center;
    background:#6a7abb;
    color:#fff;
}

.mainContainer .containerHead::after {
    content:"";
    display:table;
    clear:both;
}