Make Login smaller on mobile navigation

Hi @tuanphan, can you please help me make the login button smaller in the mobile navigation (pic attached).

https://www.letsgathr.org/
pw: Gathr

Thank you!

Lisa

 @tuanphan, can you help with this request?

.header--menu-open .header .user-accounts-text-link {
    color: #ffffff;
}

.user-accounts-link {
    background-color: #190c8d;
    color: #ffffff !important;
    font-size: 1.3em;
    font-weight: 600;
    position: relative;
    outline: none;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    height: 55px;
    width: 160px;
}

Thank you @Mdhanjal_Squarespace ! 

I previously added the below code to create the Login button in the navigation and push it to the far right. When adding your code, it is impacting the existing Login button.  Is there an alternate way so I can keep this code in tact, but only make the Login smaller in mobile navigation?

.user-accounts-link {
    background-color: #5775ff;
  color: #ffffff;
    padding: 0.5rem 2rem;
  border:1px solid #ffffff;
    border-radius: 20px;
}
.header-layout-nav-right .header-actions {
    flex-direction: row-reverse;
}

Thank you @tuanphan!