/* =============================================================== */
/* Links & Buttons                                                 */
/* =============================================================== */

a {
  color: var(--link-fg);
  background-color: var(--link-bg);
  text-decoration: none;
  text-decoration-thickness: var(--underline-thickness);
  text-underline-offset: var(--underline-offset);
  transition: color var(--transition-medium), text-decoration-color var(--transition-medium);
}

a:hover,
a:focus-visible {
  color: var(--link-hover-fg);
  background-color: var(--link-hover-bg);
}

nav ul {
  list-style: none;
  display: flex;
  align-items: baseline;
  margin: 0;
  padding: 0;
}

.comment .reply a,
.comment-respond h2 a,
nav a,
header a,
button,
[type="button"],
[type="submit"],
[type="reset"],
.button {
  font-weight: var(--font-weight-bold);
  display: inline-flex;
  align-items: center;
  padding: var(--link-padding);
  border-radius: var(--radius);
  transition: background-color var(--transition-medium), color var(--transition-medium);

}

.comment .reply a,
.comment-respond h2 a,
button,
[type="button"],
[type="submit"],
[type="reset"],
.button {
  border: var(--border);
  color: var(--button-fg);
  background-color: var(--button-bg);
}

.comment .reply a:focus-visible,
.comment-respond h2 a:focus-visible,
nav a:focus-visible,
header a:focus-visible,
button:focus-visible,
[type="button"]:focus-visible,
[type="submit"]:focus-visible,
[type="reset"]:focus-visible,
.button:focus-visible,
.comment .reply a:hover,
.comment-respond h2 a:hover,
nav a:hover,
header a:hover,
button:hover,
[type="button"]:hover,
[type="submit"]:hover,
[type="reset"]:hover,
.button:hover {
  background-color: var(--color-green-tint);
  color: var(--color-green-dark);
  text-decoration: none;
}