/* Define CSS variables for repeated values */
:root {
  --background-color: #404442; /* Main background color */
  --text-color: #fff; /* White color for text */
  --link-opacity: 0.6; /* Opacity for links */
  --link-hover-opacity: 0.8; /* Slightly higher opacity on hover for better interaction feedback */
}

/* Styling for the login area */
html body.login {
  background: var(--background-color);
}

/* Padding for the #login ID */
.login #login {
  padding: 5% 0 20px;
}

/* Styles for the logo within the login area */
.login #login h1 a {
  background-image: url("/wp-content/plugins/gravity-tweaks/assets/images/wmark.png");
  color: var(--text-color);
  font-size: 24px;
  height: auto;
  margin: 0 auto 20px;
  padding-top: 94px; /* Only specify the padding needed */
  text-indent: 0;
  width: auto;
}

/* Border radius and border width for forms within the login area */
.login #login form {
  border-radius: 3px;
  border-width: 2px; /* Consider specifying border style and color if not defined elsewhere */
}

/* Center text alignment for navigation and back to blog links */
.login #nav,
.login #backtoblog {
  text-align: center;
}

/* Styles for links in the navigation and back to blog sections */
.login #nav a,
.login #backtoblog a {
  color: var(--text-color);
  opacity: var(--link-opacity);
  transition: opacity 0.3s ease; /* Smooth opacity change */
}

.login #nav a:hover,
.login #backtoblog a:hover {
  opacity: var(--link-hover-opacity);
}

/* Customized background for a specific link */
.login #gravitystack a {
  background: url("/wp-content/plugins/gravity-tweaks/assets/images/customized-by-gravitystack.svg") no-repeat center;
  background-size: contain;
  display: block;
  height: 48px;
  margin: 32px 0 16px;
  padding: 0 24px;
  text-indent: -9999px;
}