/*=============== LOGIN ===============*/
.login{
   position: relative;
   height: 100vh;
   display: grid;
   align-items: center;

   &__bg{
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
   }
   &__form{
      position: relative;
      margin-inline: 1.5rem;
      background-color: hsla(0, 0%, 100%, .01);
      border: 2px solid hsla(0, 0%, 100%, .7);
      padding: 2.5rem 1rem;
      color: var(--white-color);
      border-radius: 1rem;
      backdrop-filter: blur(16px);
   }
   &__title{
      text-align: center;
      font-size: var(--h1-font-size);
      margin-bottom: 1.25rem;
   }
   &__inputs,
   &__box{
      display: grid;
   }
   &__inputs{
      row-gap: 1.25rem;
      margin-bottom: 1rem;
   }
   &__box{
      grid-template-columns: 1fr max-content;
      column-gap: .75rem;
      align-items: center;
      border: 2px solid hsla(0, 0%, 100%, .7);
      padding-inline: 1.25rem;
      border-radius: 4rem;
   }
   &__input,
   &__button{
      border: none;
      outline: none;
   }
   &__input{
      width: 100%;
      background: none;
      color: var(--white-color);
      padding-block: 1rem;

      &::placeholder{
         color: var(--white-color);
      }
   }
   &__box i{
      font-size: 1.25rem;
   }
   &__check,
   &__check-box{
      display: flex;
      justify-content: space-between;
      align-items: center;
   }
   &__check{
      margin-bottom: 1rem;
      font-size: var(--small-font-size);

      &-box{
         column-gap: .5rem;
      }
      &-input{
         width: 1rem;
         height: 1rem;
         accent-color: var(--white-color);
      }
   }
   &__forgot{
      color: var(--white-color);

      &:hover{
         text-decoration: underline;
      }
   }
   &__button{
      width: 100%;
      padding: 1rem;
      margin-bottom: 1rem;
      background-color: var(--white-color);
      border-radius: 4rem;
      color: var(--black-color);
      font-weight: 500;
      cursor: pointer;
   }
   &__register{
      font-size: var(--small-font-size);
      text-align: center;

      & a{
         color: var(--white-color);
         font-weight: 500;

         &:hover{
            text-decoration: underline;
         }
      }
   }
}