@import url('https://fonts.googleapis.com/css2?family=Road+Rage&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

body {
    background-color: #000;
    text-align: center;
    font-family: "Rubik", sans-serif;
    font-size: 16px;
    color: #fff;
}
h1 {
    font-family: "Road Rage", sans-serif;
    font-size: 48px;
    text-transform: uppercase;
    color: #fff;
    font-weight: normal;
}
h3 {
    font-family: "Rubik", sans-serif;
    color: #fff;
    font-weight: normal;
}
.container {
    width: 75%;
    margin: 0 auto;
}
table, tr, td {
    text-align: center;
}
.misfits-members {
    width: 100%;
  border-collapse: separate;
  border-spacing: 20px;
  table-layout: fixed;
}

.misfits-members td {
  width: 33%;
  vertical-align: top;
}

.member-card {
  background: #111111;
  border: 2px solid #7b3cff;
  border-radius: 18px;
  padding: 25px 20px;
  text-align: center;
  box-shadow: 0 5px 20px rgba(123, 60, 255, 0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Remove link background ONLY when the link wraps an image */
.member-card a:has(img),
.member-card a:has(img):hover,
.member-card a:has(img):focus,
.member-card a:has(img):active {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

/* Keep linked images clean */
.member-card a img {
    display: block;
}

.member-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(123, 60, 255, 0.35);
}

.member-card img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #7c2ac2;
  margin-bottom: 12px;
}

.member-card h3 {
  color: #ffffff;
  margin: 5px 0;
  font-size: 20px;
}

.member-card p {
  color: #bdbdbd;
  font-size: 14px;
  margin: 10px 0 18px;
}

.member-card .admin {
  display: inline-block;
  background: #7c2ac2;
  color: white;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 20px;
}

.member-card .member {
  display: inline-block;
  background: #838483;
  color: white;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 20px;
}

.member-card a {
  display: inline-block;
  background: #7c2ac2;
  color: white;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 10px;
  transition: 0.2s ease;
}

.member-card a:hover {
  background: #9365ff;
  transform: scale(1.04);
}
a {
    color: #7c2ac2;
    text-decoration: none;
}