:root {
    /*========== Colors ==========*/
    /*Color mode HSL(hue, saturation, lightness)*/
    --first-color: hsl(208, 92%, 54%);
    --first-color-alt: hsl(208, 88%, 50%);
    --title-color: hsl(220, 68%, 4%);
    --white-color: hsl(0, 0%, 100%);
    --text-color: hsl(220, 15%, 66%);
    --body-color: hsl(0, 0%, 100%);
    --container-color: hsl(220, 50%, 97%);
  
    /*========== Font and typography ==========*/
    /*.5rem = 8px | 1rem = 16px ...*/
    --body-font: "Montserrat", system-ui;
    --big-font-size: 1.5rem;
    --normal-font-size: .938rem;
    --small-font-size: .813rem;
    --tiny-font-size: .688rem;
  
    /*========== Font weight ==========*/
    --font-regular: 400;
    --font-medium: 500;
    --font-semi-bold: 600;
  
    /*========== z index ==========*/
    --z-tooltip: 10;
    --z-fixed: 100;
  }
  
  /*========== Responsive typography ==========*/
  @media screen and (min-width: 1150px) {
    :root {
      --big-font-size: 3rem;
      --normal-font-size: 1rem;
      --small-font-size: .875rem;
      --tiny-font-size: .75rem;
    }
  }
  
  /*=============== BASE ===============*/
  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  
  body,
  input,
  button {
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
  }
  
  body {
    background-color: var(--body-color);
    color: var(--text-color);
  }
  
  input,
  button {
    border: none;
    outline: none;
    #password-rules li.valid {
      color: #28a745; /* Green */
    }
    #password-rules li.invalid {
      color: #dc3545; /* Red */
    }
    
  }
  
  a {
    text-decoration: none;
  }
  
  img {
    display: block;
    max-width: 100%;
    height: auto;
  }
  
  /*=============== REUSABLE CSS CLASSES ===============*/
  .container {
    max-width: 1120px;
    margin-inline: 1.5rem;
  }
  
  .grid {
    display: grid;
    gap: 1rem;
  }
  
  /*=============== LOGIN  ===============*/
  .login {
    position: relative;
    height: 100vh;
    align-items: center;
    overflow: hidden;
  }
  
  .login__blob {
    display: none;
  }
  
  .login__title {
    font-size: var(--big-font-size);
    color: var(--title-color);
    text-align: center;
    margin-bottom: 2rem;
  }
  
  .login__box {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--container-color);
    border-radius: 1rem;
  }
  
  .login__input,option {
    background: none;
    width: 100%;
    padding: 1.5rem 2.5rem 1.5rem 1.25rem;
    font-weight: var(--font-semi-bold);
    border: 3px solid transparent;
    border-radius: 1rem;
    z-index: 1;
    transition: border-color .4s;
  }
  
  .login__input:autofill {
    transition: background-color 6000s, color 6000s;
  }
  
  .login__label {
    position: absolute;
    left: 1.25rem;
    font-weight: var(--font-semi-bold);
    transition: transform .4s, font-size .4s, color .4s;
  }
  
  .login__icon {
    position: absolute;
    right: 1rem;
    font-size: 1.25rem;
    transition: color .4s;
  }
  
  .login__password {
    cursor: pointer;
    z-index: 10;
  }
  
  .login__forgot {
    display: block;
    width: max-content;
    margin: 1rem 0 0 auto;
    font-size: var(--small-font-size);
    font-weight: var(--font-semi-bold);
    color: var(--text-color);
    transition: color .4s;
  }
  
  .login__forgot:hover {
    color: var(--first-color);
  }
  
  .login__button {
    width: 100%;
    display: inline-flex;
    justify-content: center;
    background-color: var(--first-color);
    color: var(--white-color);
    font-weight: var(--font-semi-bold);
    padding-block: 1.5rem;
    border-radius: 4rem;
    margin-block: 2rem;
    cursor: pointer;
    transition: background-color .4s, box-shadow .4s;
  }
  
  .login__button:hover {
    background-color: var(--first-color-alt);
    box-shadow: 0 8px 24px hsla(208, 92%, 32%, .3);
  }
  
 
  
  
  
  
  .login__switch {
    text-align: center;
    font-size: var(--small-font-size);
  }
  
  .login__switch button {
    background: none;
    color: var(--first-color);
    font-size: var(--small-font-size);
    font-weight: var(--font-semi-bold);
    cursor: pointer;
    transition: color .4s;
  }
  
  .login__switch button:hover {
    color: var(--first-color-alt);
  }
  
  .login__access, 
  .login__register {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    transition: transform .4s, opacity .4s .1s;
  }
  
  .login__register {
    transform: translateX(15rem);
    opacity: 0;
    pointer-events: none;
  }
  
  /* Input focus move up label */
  .login__input:focus ~ .login__label {
    transform: translateY(-12px);
    font-size: var(--tiny-font-size);
  }
  
  .login__input:focus {
    padding-block: 2rem 1rem;
  }
  
  /* Input focus sticky top label */
  .login__input:not(:placeholder-shown).login__input:not(:focus) ~ .login__label {
    transform: translateY(-12px);
    font-size: var(--tiny-font-size);
  }
  
  .login__input:not(:placeholder-shown).login__input:not(:focus) {
    padding-block: 2rem 1rem;
  }
  
  /* Input focus color */
  .login__input:focus {
    border-color: var(--first-color);
  }
  
  .login__input:focus ~ .login__label,
  .login__input:focus ~ .login__icon {
    color: var(--first-color);
  }
  
  /* Show hide login & create account */
  .active .login__access {
    transform: translateX(15rem);
    opacity: 0;
    pointer-events: none;
  }
  
  .active .login__register {
    transform: translateX(0);
    opacity: 1;
    pointer-events: initial;
  }
  
  /*=============== BREAKPOINTS ===============*/
  /* For small devices */
  @media screen and (max-width: 320px) {
    .container {
      margin-inline: 1rem;
    }
  }
  
  /* For medium devices */
  @media screen and (min-width: 540px) {
    .login__area {
      width: 380px;
      margin-inline: auto;
    }
  }
  
  @media screen and (min-width: 350px) and (max-height: 600px) {
    .login {
      height: 760px;
    }
  }
  
  /* For large devices */
  @media screen and (min-width: 1150px) {
    .container {
      margin-inline: auto;
    }
  
    .login__area {
      width: 460px;
      margin: initial;
    }
    .login__access, 
    .login__register {
      width: 600px;
    }
    .login__title {
      text-align: initial;
      margin-bottom: 3rem;
    }
    .login__button {
      margin-bottom: 3rem;
    }
    .login__group {
      grid-template-columns: repeat(2, 1fr);
    }
    .login__blob {
      display: block;
      height: 100vh;
      position: absolute;
      top: 0;
      right: 0;
    }
    .login__img {
      transform: translate(0rem, 0rem);
    }
  }
  #loginAlertText{
    font-weight: 500;
    color: #ff0000;
  }

  #loginAlert {
    transition: opacity 0.3s ease;
  }