index.scss

:root {
  --roomborder: #ececec;
  --roomtext: #d1d1d1;
  --roomdark: #0d1117;
  --roomlight: #151b23;
  --borderbottom: #4e4e4eb9;
  --white: white;
  --room-bottom: #2a2e38;
  --white: #fff;
  --black: #000;
  --bodydark: #151b23;
  --navdark: #0d1117;
  --lightBulue: rgb(34, 237, 255);
  --links: rgb(34, 237, 255);
}

.auth-body {
  z-index: 99;
  padding: 5rem 0;
  margin: 0;
  height: 100%;
  width: 100%;

  // border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;

  .login-user {
    border: 1px solid var(--navdark);
    background-color: #0d1117d8;
    backdrop-filter: blur(8px);
    box-shadow: 0 0 7px rgba(255, 255, 255, 0.169);
    border-radius: 1rem;
    height: 100%;
    width: 33%;
    padding: 2rem;

    .top {
      display: flex;
      flex-direction: column;
      gap: 1.1rem;

      // border: 1px solid black;
      .top-1 {
        // border: 1px solid black;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        p {
          font-size: 1.1vw;
          color: white;
        }
        i {
          color: var(--white);
          font-size: 1.3vw;
          cursor: pointer;
        }
      }
      .top-2 {
        // border: 1px solid black;
        display: flex;
        justify-content: center;
        font-size: 2vw;
        color: white;
      }
    }
    .mid {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 1rem 0 0.5rem 0;
      gap: 1rem;

      .input-box {
        position: relative;
        width: 100%;
        height: 50px;
        margin: 1% 0 5% 0;
        // border: 1px solid red;
      }

      .input-box input {
        width: 100%;
        height: 100%;
        background: transparent;
        color: var(--white);
        font-size: 16px;
        font-weight: 500;
        border: none;
        outline: none;
        border-bottom: 2px solid var(--white);
        transition: 0.5s;
      }

      .input-box input:focus,
      .input-box input:valid {
        border-bottom-color: var(--lightBulue);
      }

      .input-box label {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        font-size: 16px;
        color: var(--white);
        pointer-events: none;
        transition: 0.5s;
      }

      .input-box input:focus ~ label,
      .input-box input:valid ~ label {
        top: -5px;
        color: var(--lightBulue);
      }

      .input-box i {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        font-size: 18px;
        transition: 0.5s;
        color: white;
      }

      .input-box input:focus ~ i,
      .input-box input:valid ~ i {
        color: var(--lightBulue);
      }
      .body-btn {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 5%;
        button {
          width: 100%;
          height: 45px;
          background-color: var(--white);
          color: var(--black);
          border: none;
          outline: none;
          border-radius: 40px;
          cursor: pointer;
          font-size: 16px;
          font-weight: 600;
          transition: 0.3s;
          margin-top: 5px;
        }
      }

      .body-btn button:hover {
        background-color: rgba(255, 255, 255, 0.793);
      }
      .mid-1 {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        padding: 0 0;
        color: var(--white);
        text-align: start;
        margin-top: 10px;

        p,
        a {
          font-size: 0.9vw;
          padding: 0.3rem 0.4rem;
          color: var(--white);
          text-decoration: none;
          font-weight: 600;
        }
        a:hover {
          text-decoration: underline;
        }
      }
    }
    .or {
      display: flex;
      width: 100%;
      justify-content: center;
      color: white;
    }
    .bottom {
      // border: 1px solid black;
      display: flex;
      padding: 0 0 3% 0;
      align-items: center;
      justify-content: center;

      .google-box {
        border: 1px solid var(--white);
        cursor: pointer;
        border-radius: 40px;
        width: 90%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        transition: 0.2s ease-in;

        i {
          font-size: 20px;
          color: white;
        }
        p {
          font-size: 18px;
          color: white;
        }
      }
      .google-box:hover {
        background-color: rgba(216, 216, 216, 0.408);
      }
    }
  }
}