body.login {
    background: radial-gradient(ellipse at top left in hsl shorter hue, #2b3061 0%, #06061a 50%, #181f2a 100%);
   /* Your brand color */
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
   color-rendering: optimizequality;
}

body.login:before {
   content: "";
   position:absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   opacity: 0.2;
   mix-blend-mode: hue;
   color-rendering: optimizequality;
   background: radial-gradient(circle at bottom right in hsl longer hue, #4c823d 0% ,#2b3061 50%, #08314b 100%)
}

body.login:after {
color-rendering: optimizequality;
content: ""; /* Required for pseudo-elements */
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-image: url('/wp-content/uploads/2024/09/Halftone-invert.webp'); /* Replace with your actual image URL */
 background-size: cover; /* Adjust to your preference (cover, contain, etc.) */
 opacity: 0.05; /* You can adjust the opacity as desired */
 z-index: -2; /* Place the pseudo-element behind the content */
}

#login {
   width: 100%;
   max-width: 400px;
   background: #ffffff;
   padding: 2rem;
   border-radius: 8px;
   box-shadow: 0px 0px 500px -10px rgb(78 109 131 / 94%);
}

#login h1 a {
   background-image: url('/wp-content/uploads/2023/07/cropped-W-icon-1.png');
   background-size: contain;
   border: 1px solid #acacdf52;
   box-shadow: 2px 4px 24px -10px #2b3061;
   border-radius: 12px;
   width: 80px;
   height: 80px;
   margin: 0 auto 1rem;
}

.login form {
   background: transparent;
   border: none;
   box-shadow: none;
   padding: 0;
}

.login .button-primary {
   background-color: #4d5ec3;
   height: 48px;
   /* CTA button color */
   border-color: #4d5ec3;
   color: #white;
   text-transform: uppercase;
   font-weight: bold;
   width: 100%;

}

.login .button-primary:hover {
   background-color: #6078d1;
   /* Lighter shade on hover */
}

.login #backtoblog a,
.login #nav a {
   color: #4d5ec3;;
   text-decoration: underline;
}

.login #backtoblog a:hover,
.login #nav a:hover {
   color: #6078d1;
}

.login label {
   font-size: 1rem;
   margin-left: 4px;
   margin-bottom: 0.75rem;
   font-weight: 200;
   color: #333;
}

.login input[type="text"],
.login input[type="password"] {
   font-size: 16px;
   border-radius: 8px;
   border: 1px solid #ccc;
   padding: 10px;
   max-width: 100%;
   width: 97%;
   margin-inline: 4px;
}

.login .message {
   margin-top: 36px;
   background-color: #e5f3e9;
   border-left: 4px solid #28a745;
   color: #333;
}