@layer page {

  /* override navigation colors */
  .app-top-nav {
    background: var(--theme-1);
    background: var(--lg-green);
    color: var(--white);
  }

  /* hide subpage nav, clock, social, size */
  .app-subpage,
  .clock,
  .social,
  .window-size {
    display: none;
  }

  /* override footer colors */
  .footer-auth {
    color: var(--white);
  }

  /* wallpaper with background picture */
  .wallpaper {
    background: var(--theme-1);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100dvh;
  }

  /* register wallpaper */
  .wallpaper-register {
    background-image: url("/app/pictures/1710236688503-IMG_6016-600x400.jpg");
  }

  /* verify wallpaper */
  .wallpaper-verify {
    background-image: url("/app/pictures/1710008848626-IMG_0453-600x400.jpg");
  }

  /* login wallpaper */
  .wallpaper-login {
    background-image: url("/app/pictures/1709940571268-IMG_0378-600x400.jpg");
  }

  /* reset wallpaper */
  .wallpaper-reset {
    background-image: url("/app/pictures/1710231337284-IMG_3680-600x400.jpg");
  }

  /* auth wrapper */
  .wrapper-auth {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 32px;
    justify-content: space-between;
    min-height: calc(100dvh - 56px);
    padding: 16px;
  }

  /* move page down on taller screens */
  @media (min-height: 800px) {
    .wrapper-auth {
      padding-top: calc(8dvh);
    }
  }

  /* auth container */
  .ctn-auth {
    background-color: var(--bg-white-transparent);
    border-radius: 4px;
    height: 100%;
    max-width: 500px;
    padding: 0.75rem 1.125rem;
    position: relative;
    width: calc(100dvw - 32px);
  }

  .ctn-auth:focus-within {
    background-color: var(--white);
  }

  /* page or form title */
  .title-auth {
    color: var(--accent-1);
    margin-block-end: 0;
    text-align: center;
  }

  /* ? BUTTONS */
  /* eyeball show-hide password */
  .pass-word {
    position: relative;
  }

  .btn--eye {
    align-items: center;
    display: flex;
    cursor: pointer;
    position: absolute;
    right: 5px;
    top: 5px;
  }

  /* submit button */
  .btn--submit {
    align-items: center;
    color: var(--success);
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-inline: auto 0;
    padding: 8px 16px;
  }

  /* spinner button */
  .btn--spinner {
    background-color: var(--success);
    color: var(--white);
  }

  .btn--spinner:hover {
    background-color: var(--success);
    color: var(--white);
    opacity: 1;
  }

  .spin {
    animation: spin 2s linear infinite;
  }

  @keyframes spin {
    from {
      transform: rotate(0deg)
    }

    to {
      transform: rotate(360deg)
    }
  }

  /* ? ANCHORS */
  .btn--register,
  .btn--reset,
  .btn--generate-password,
  .btn--terms {
    color: var(--success);
    font-size: 14px;
    line-height: 1;
    margin-block-end: -3px;
    padding: 4px 12px;
  }

  /* terms container */
  .ctn-terms {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-block-end: 8px;
  }

  /* place beside label */
  .ctn-generate-password,
  .ctn-password-reset {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  /* place button on left side */
  .form-verify .btn--submit {
    margin-inline: 0 auto;
  }

  /* set height to avoid layout shift */
  .verify-output {
    min-height: 32px;
  }

  /* clock for expirying verify code */
  .clock-display {
    color: var(--success);
    font-weight: 600;
  }

  /* close button at top right */
  .btn--close {
    all: unset;
    color: var(--success);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    outline: revert;
    padding: 0.7rem 1.125rem;
    position: absolute;
    right: 0px;
    top: 0px;
  }

  .btn--close:hover {
    background-color: var(--primary-5);
    border-radius: 0 4px 0 4px;
    color: var(--danger);
  }

  /* password generator */
  .dialog-generate-password {
    background-color: var(--white);
    border: 1px solid var(--neutral-1);
    border-radius: 4px;
    margin-top: 32dvh;
    padding: 0;
  }

  .gen-password {
    margin: 0;
    padding: 16px 32px;
    text-align: center;
  }

  .gen-form input {
    all: unset;
    background-color: var(--primary-1);
    width: 100%;
    font-size: 14px;
    text-align: center;
  }

  .gen-btns {
    background-color: var(--white);
    color: var(--white);
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr 1fr;
  }

  .but {
    all: unset;
    background-color: var(--primary-1);
    font-size: 14px;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
  }

  .but:hover {
    background-color: var(--primary-2);
  }

  .hide-messages {
    visibility: hidden;
  }

  /*  REGISTER FORM  capitalize first letter*/
  input[type=text]#fname,
  input[type=text]#lname {
    text-transform: capitalize;
  }
  
}