@font-face {
    font-family: 'ComfortaaBold';
    src: url('font/Comfortaa-Bold.woff2') format('woff2'),
         url('font/Comfortaa-Bold.woff') format('woff'),
         url('font/Comfortaa-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'ComfortaaMedium';
    src: url('font/Comfortaa-Medium.woff2') format('woff2'),
         url('font/Comfortaa-Medium.woff') format('woff'),
         url('font/Comfortaa-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Comfortaa';
    src: url('font/Comfortaa-Light.woff2') format('woff2'),
         url('font/Comfortaa-Light.woff') format('woff'),
         url('font/Comfortaa-Light.ttf') format('truetype');
}

body {
    background-color: #FFFFFF;
    font-family: 'Comfortaa', Arial, sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 1em;
    background-size: cover;
	line-height: 1.5em;
}

a {color: #5c0894; font-weight: 600; text-decoration: none;}

.ClearFix {clear:both}


/*******************
 ** LOGO
 ******************/
 
 .logo-container {
  max-width: 50%;  /* Make sure it doesn't overflow */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3px;
  position: relative;
  margin: 0 auto;
  
}

.logo {
  max-width: 100%;
  height: auto;
  max-height: 70vh; /* Limit the logo's size on large screens */
  object-fit: contain;
}

#WebsiteTitle {
 max-width: 50%;  /* Make sure it doesn't overflow */
  display: flex;
  justify-content: right;
  align-items: right;
  padding: 10px;
  position: relative;
  margin: -40px auto 0 auto;  
}


/********************
 ** LOGIN FORM
 *******************/
.container {
            background: #fff;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 800px;
            text-align: left;
			margin: 0 auto;
        }
		
#LoginForm {max-width: 400px}
		
        h1 {
            margin-bottom: 1rem;
            color: #333;
        }
        .form-group {
            margin-bottom: 1rem;
            text-align: left;
        }
        label {
            display: block;
            margin-bottom: 0.5rem;
            color: #555;
        }
        input {
            width: 100%;
            padding: 0.8rem;
            font-size: 1rem;
            border: 1px solid #000000;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            background-color: #5c0894;
            color: #fff;
            border: none;
            padding: 0.8rem 1.2rem;
            font-size: 1rem;
            border-radius: 4px;
            cursor: pointer;
            width: 100%;
        }
        button:hover {
            background-color: #2c0347;
        }
        .error {
            color: red;
            margin-bottom: 1rem;
        }
        .logout-link {
            text-decoration: none;
			display: inline-block;
			background-color: #5c0894;
			color: #ffffff;
			padding: 10px;
        }
        .logout-link:hover {
            text-decoration: none;
			background-color: #2c0347;
        } 
		
		li {margin: 0 0 10px 0}

/************************
 ** MOBILE
 ***********************/
 
@media (max-width: 992px) 
{
	.logo {max-width: 90%;}
	#WebsiteTitle {margin: -20px 0 10px 100px;}
	#HeadingTextImage {height: 2vh;}
	#LoginForm {max-width: 300px;}
}