:root {
     --primary: rgb(209, 20, 251);
     --secondary: rgb(87, 13, 133);
     --text: rgb(31, 41, 55);
     --label: rgb(51, 51, 51);
     --control: rgb(115, 24, 164);
     --control-hover: rgb(5, 181, 229);
     --control-shadow: rgba(0, 0, 0, 0.2);
     --light: rgb(243, 244, 246);
     --white: rgb(255, 255, 255);
     --footer: rgb(84, 89, 91);
 }

 body {
     /* font-family: 'Poppins', sans-serif; */
     font-family: "Roboto", serif;
     font-weight: 500;
     font-style: normal;
     font-optical-sizing: auto;
     margin: 0;
     padding: 0;
     display: flex;
     flex-direction: column;
     min-height: 100vh;
 }

 .content-area {
     margin: 5% 25% 5%;
     padding: 3px;
     /* Create space for the nav bar */
     flex-grow: 1;
     /* Allow the content area to grow and take up remaining space */
     display: flex;
     flex-direction: column;
     border-radius: 5px;
     box-shadow: 0 4px 8px var(--control-shadow);
 }

 header {
     margin-top: 0;
     z-index: 5;
 }

 /* Main Content */
 main {
     flex-grow: 1;
     padding: 1rem;
     transition: margin-left 0.3s ease, width 0.3s ease;
     position: relative;
     text-align: center;
     z-index: 4;
 }

 footer {
     padding: 1rem;
     text-align: center;
     z-index: 3;
 }

 /* Button Styles */
 .btn,
 button {
     background-color: var(--control);
     color: var(--white);
     padding: 12px 20px;
     font-size: 14px;
     border: none;
     border-radius: 5px;
     cursor: pointer;
     transition: background-color 0.3s ease-in-out;
     text-decoration: none;
 }

 .btn:hover,
 button:hover {
     background-color: var(--control-hover);
 }

 input[type="text"],
 [type="email"],
 [type="password"],
 textarea,
 select {
     border: 2px solid var(--control);
     border-radius: 5px;
     padding: 8px 12px;
     margin-top: 5px;
     width: 100%;
     font-size: 1em;
     outline: none;
     font-family: inherit;
     box-sizing: border-box;
 }

 input[type="text"]:focus,
 [type="password"]:focus,
 [type="email"]:focus,
 select:focus,
 textarea:focus {
     outline: none;
     border-color: var(--control);
     box-shadow: 0 0 5px var(--secondary);
 }

 .login-form {
     width: 70%;
     margin: 10px auto;
     padding: 20px;
     max-width: 800px;
 }

 .title-group {
     display: flex;
     flex-direction: column;
     margin-bottom: 5%;
 }

 .title-group .title {
     justify-content: left;
     text-align: left;
     margin-bottom: 0;
 }

 .title-group .subtitle {
     justify-content: left;
     text-align: left;
     font-size: small;
 }

 .form-group {
     display: flex;
     margin-bottom: 5px;
 }

 .form-group label {
     text-align: left;
     width: 250px;
     padding-top: 10px;
     font-weight: 500;
     color: var(--label);
 }

 .button-group {
     display: block;
     margin-top: 30px;
     text-align: center;
 }

 .submit {
     float: right;
 }

 .forgot a {
     color: var(--control);
     text-decoration: none;
 }

 .forgot a:hover {
     color: var(--control-hover);
     text-decoration: none;
 }

 .header-content {
     margin: 10px auto;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .app-title {
     display: flex;
     align-items: left;
     gap: 0.5rem;
     font-size: 2rem;
     font-weight: 700;
     color: var(--text);
     text-decoration: none;
 }

 .logo-icon {
     display: block;
     padding-left: 20px;
 }

 .logo-icon img {
     width: 65px;
     height: 65px;
     object-fit: contain;
 }

 .divider-fade {
     height: 1px;
     background: linear-gradient(90deg, transparent, rgb(158, 97, 219), transparent);
     position: relative;
 }

 .footer {
     padding: 5px 0;
     font-size: 12px;
     color: var(--footer);
 }

 /*------------------------------------*\
  #RESPONSIVE DESIGN
\*------------------------------------*/
 @media screen and (max-width: 768px) {
     .content-area {
         /* Create space for the nav bar */
         flex-grow: 1;
         /* Allow the content area to grow and take up remaining space */
         display: flex;
         flex-direction: column;
         box-shadow: 0 4px 8px var(--control-shadow);
     }

     .form-group {
         display: flex;
         flex-direction: column;
         margin-bottom: 5px;
     }
 }