body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("img/SignIn_Process_BG_Gradient.jpg");
  background-color: yellowgreen; 
  background-repeat: no-repeat;
  background-size: cover;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.rectangle {
  max-width: 800px;
  padding: 40px 60px;
  border-radius: 10px;
  box-shadow: 7px 7px 20px 8px rgba(0, 0, 0, 0.2);
  background-color: var(--white);
}

.logintitle {
  font-family: Arial;
  font-size: 48px;
  font-weight: normal;
  color: var(--blueberry);
  margin-bottom: 10px;
}

.logintext {
  font-family: Arial;
  font-size: 20px;
  color: var(--black);
  margin-bottom: 20px;
}

.introtext {
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: var(--black);
  line-height: 1.8;
  background-color: #f8f9fa;
  border-left: 4px solid #007bff;
  padding: 10px 15px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.username, .password {
  font-family: Arial;
  font-size: 14px;
  font-weight: bold;
  color: var(--black);
  display: block;
  margin-bottom: 5px;
}

.rectusername, .rectpass {
  width: 40%;
  height: 36px;
  padding: 10px;
  border-radius: 5px;
  border: solid 1.6px var(--teal-blue);
  background-color: var(--white);
  margin-bottom: 20px;
}

.loginbutton {
  width: 40%; /* Change button width to 40% */
  height: 40px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-family: Arial;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  display: block; /* Ensures the button is block-level for centering */
  margin: 20px auto; /* Center the button horizontally */
}

.loginbutton:hover {
  background-color: #0056b3;
}

.forgotusername {
  display: block;
  text-align: center;
  font-family: Arial;
  font-size: 10px;
  color: var(--black);
  margin-top: 20px;
}
  
  
  :root {
    --blueberry: #6c3d91;
    --teal-blue: #00889c;
    --black: #000000;
    --white: #ffffff;
    --f-9-f-9-f-9-background: #f9f9f9;
    --pale-purple: #b199bc;
    --steel: #78848e;
    --shadow: rgba(0, 0, 0, 0.22);
    --pale-blue: #deebeb;
    --very-light-pink: #ececec;
    --d-30000-warning-color: #b60101;
    ---e-45-d-confirmation-color: #20b615;
    --e-4-d-602-marker-color: rgba(228, 214, 2, 0.6);
  }


  @font-face {
    font-family: Arial;
    src: local(ArialMT),
      url(/path/to/ArialMT.woff2) format("woff2"),
      url(/path/to/ArialMT.woff) format("woff"),
      url(/path/to/ArialMT.ttf) format("truetype");
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
  }
  
  @font-face {
    font-family: Arial;
    src: local(Arial-BoldMT),
      url(/path/to/Arial-BoldMT.woff2) format("woff2"),
      url(/path/to/Arial-BoldMT.woff) format("woff"),
      url(/path/to/Arial-BoldMT.ttf) format("truetype");
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
  }
  
  @font-face {
    font-family: TrebuchetMS;
    src: local(TrebuchetMS),
      url(/path/to/TrebuchetMS.woff2) format("woff2"),
      url(/path/to/TrebuchetMS.woff) format("woff"),
      url(/path/to/TrebuchetMS.ttf) format("truetype");
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
  }
  
  @font-face {
    font-family: TrebuchetMS;
    src: local(TrebuchetMS-Bold),
      url(/path/to/TrebuchetMS-Bold.woff2) format("woff2"),
      url(/path/to/TrebuchetMS-Bold.woff) format("woff"),
      url(/path/to/TrebuchetMS-Bold.ttf) format("truetype");
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
  }
  
  .Headline-1-Style {
    font-family: TrebuchetMS;
    font-size: 92px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -1.44px;
    color: var(--black);
  }
  
  .Headline-2-Style {
    font-family: TrebuchetMS;
    font-size: 60px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.5px;
    color: var(--black);
  }
  
  .Headline-3-Style {
    font-family: TrebuchetMS;
    font-size: 48px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: var(--black);
  }
  
  .Headline-4-Style {
    font-family: TrebuchetMS;
    font-size: 34px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.25px;
    color: var(--black);
  }
  
  .Headline-5-Style {
    font-family: TrebuchetMS;
    font-size: 24px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: var(--black);
  }
  
  .Headline-6-Style {
    font-family: TrebuchetMS;
    font-size: 20px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.15px;
    color: var(--black);
  }
  
  .Subtitle-1-Style {
    font-family: Arial;
    font-size: 18px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: 0.17px;
    color: var(--black);
  }
  
  .Body-1-Style {
    font-family: Arial;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.56;
    letter-spacing: 0.5px;
    color: var(--black);
  }
  
  .Button-Style {
    font-family: Arial;
    font-size: 16px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 1.54px;
    color: var(--black);
  }
  
  .Subtitle-2-Style {
    font-family: Arial;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: 0.11px;
    color: var(--black);
  }
  
  .Body-2-Style {
    font-family: Arial;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.25;
    letter-spacing: 0.29px;
    color: var(--black);
  }
  
  .Caption-Style {
    font-family: Arial;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: 0.4px;
    color: var(--black);
  }
  
  .Overline-Style {
    font-family: Arial;
    font-size: 10px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.6;
    letter-spacing: 1.5px;
    color: var(--black);
  }