* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root{
      --switzer: Switzer, Arial, sans-serif;
      --pale-gray: #f6f5f4;
      --inter: Inter, sans-serif;
      --soft-black: #302f2fee;
      --chinese-black: #111;
      --white: white;
      --home-accent: #0066cc;
    }

    button {
        cursor: pointer;
        border: none;
        font-family: var(--inter);
        background: none;
        }

    body {
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: end;
        font-family: 'Inter', sans-serif;
        background-color: var(--pale-gray);
        overflow: hidden;
    }

    .backdrop-img {
      position: absolute;
      height: 20rem;
      opacity: .05;
      top: 30vh;
      z-index: -1;
    }

    .backdrop-img {
    position: absolute;
    height: 20rem;
    opacity: .05;
    top: 30vh;
    z-index: -1;
    }

    .backdrop-img.left {
    left: 0;
    }

    .backdrop-img.right {
    right: 0;
    }


    .container {
      display: flex;
      background-color: var(--white);
      width: 35rem;
      border: 1px solid rgba(128, 128, 128, 0.249);
      box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
      border-radius: 12px;
      padding: 48px;
      margin-right: 15vw;
      flex-direction: column;
      transition: all 0.3s ease;
    }

    h1 {
      font-size: 42px;
      color: var(--chinese-black);
      letter-spacing: -1px;
    }

    .new-user-text {
      margin-bottom: 70px;
      font-size: 16px;
    }

    .new-user-text button, .password-forget-wrapper a{
      color: var(--home-accent);
      text-decoration: underline;
      font-size: 16px;
    }

    .password-forget-wrapper {
      display: flex;
      margin-top: 6px;
      justify-content: right;
    }

    form label {
      font-size: 16px;
      font-weight: 400;
      color: var(--chinese-black);
    }

    form input {
      width: 100%;
      height: 50px;
      border-radius: 12px;
      border: 1px solid grey;
      outline: none;
      padding: 0 12px;
      font-size: 18px;
      font-weight: 400;
      color: #111111b8;
    }

    .input-email {
      text-transform: lowercase;
    }

    .form-spacer-small {
      height: 5px;
    }

    .form-spacer-big {
      height: 24px;
    }

    .action-btns-wrapper {
      display: flex;
      justify-content: end;
      column-gap: 24px;
      margin-top: 24px;
    }

    .action-btns-wrapper button {
      padding: 8px 32px;
      border-radius: 12px;
      font-size: 18px;
      cursor: pointer;
    }

    .cancel-btn {
      color: rgb(28, 28, 28);
      border: 1px solid rgba(0, 0, 0, 0.318);
      background: none;
    }

    .submit-btn {
      background-color: var(--home-accent);
      color: var(--white);
      font-weight: 600;
    }

    input:focus {
        outline: none;
        border: 2px solid var(--home-accent);}

    /* Login/Register secties */
    .form-section {
      display: none;
      flex-direction: column;
      animation: fade .3s ease;
    }

    .form-section.active {
      display: flex;
    }

    .caution-field {
        background-color: rgba(248, 153, 1, 0.302);
        border: solid 1px rgb(248, 153, 1);
        width: 100%;
        border-radius: 12px;
        position: relative;
        margin-bottom: 48px;
        overflow: hidden;
    }

    .caution-field p {
        padding: 13px 6px 13px 22px;
        color: rgba(0, 0, 0, 0.675);
    }

    .caution-field::before {
        content: "";
        background-color: rgb(248, 153, 1);
        height: 110%;
        position: absolute;
        width: 10px;
        display: flex;
    }

    .title-container {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 30px;
        justify-content: space-between;
    }

     .title-container img{
        height: 42px;
    }

    .password-strength {
        height: 4px;
        background: #f3f3f3;
        border-radius: 2px;
        margin-top: 5px;
        overflow: hidden;
    }

    .password-strength-bar {
        height: 100%;
        width: 0;
        transition: all 0.3s ease;
    }

    .strength-weak { background: #dc3545; width: 33%; }
    .strength-medium { background: #ffc107; width: 66%; }
    .strength-strong { background: #28a745; width: 100%; }


    .alert-error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
            margin-bottom: 30px;
            padding: 6px;
            border-radius: 12px;
        }

    .alert-success {
        background: #d7f8d7;
        color: #1c721c;
        margin-bottom: 30px;
        padding: 6px;
        border-radius: 12px;
    }


    @keyframes fade {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }




/* Medium screen 1280 x 720*/
@media only screen and (max-width: 1300px) {
  body {
    display: flex;
    justify-content: center;
    align-items: start;
    font-family: 'Inter', sans-serif;
    padding-top: 5rem;
    padding-bottom: 5rem;
    overflow-y: auto;
    width: auto;
    height: auto;
  }

  .container {
    margin: 0;
    width: 30rem;
    padding: 38px;
  }

  .container h1 {
    margin-right: 20px;
  }

  .container p, .new-user-text button {
    font-size: 14px;
  }

  .container label {
    font-size: 14px;
  }
  .container input {
    height: 40px;
  }
  .action-btns-wrapper button{
    font-size: 16px
  }

  form input {
  font-size: 16px;
  }

  .alert-error, .alert-success {
  font-size: 14px;
}

}





@media only screen and (max-width: 1000px) {
    

    html, body {
        width: 100%;
        overflow: auto;
        justify-content: center;
        align-items: start;
        margin: 0;
        padding-bottom: 15vh;
        }
    
    body {
      padding-top: 2rem;
    }

    .container {
        margin-right: 0;
        padding: 20px;
        max-width: 100vw;
        overflow: auto;
        margin-top: 20px;
        background-color: #f6f5f473;
        box-shadow: none;
        border: none;
        overflow-y: visible;
    }

    .title-container {
        justify-content: left;
    }

    .cancel-btn {
        background: #f9f9f8;
    }

    input {
        background: #f9f9f8;
    }

    .title-container img {
        margin-left: auto;
    }

    .backdrop-img.right {
        display: none;
    }
    
    }