/* Base styles */
body {
  font-family: "Arial", sans-serif;
  background-color: #f5f5f5;
}

.card-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap; /* This will allow the cards to wrap onto the next line when there's not enough space */
}

/* Card container */
.MuiBox-root.css-1o7r9kk {
  border-color: rgb(63, 63, 70);
  border-width: 2px;
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(63 63 70 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(63 63 70/ 0.2) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  box-shadow: 0 0 100px rgba(63, 63, 70, 1);
  border-radius: 8px;
  padding: 20px;
  width: 300px;
  margin: 20px 20px;
  position: relative;
  transition: transform 0.3s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.MuiBox-root.css-1o7r9kk:hover {
  transform: scale(1.05);
  /* Zoom-in by 5% on hover */
}

/* Image styling */
.MuiBox-root.css-1t0wa4v img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
}

/* Name styling */
.name {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  margin-top: 15px;
}

/* Code container styling */
.code-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 15px 0;
}

/* Separating the "Code" and "DDK" */
.MuiTypography-root.MuiTypography-body1.css-8a8e2m-MuiTypography-root {
  margin-right: 10px;
  /* Adding some space */
}

/* Making "DDK" stand out */
.MuiTypography-root.MuiTypography-body1.code {
  font-weight: bold;
  /* Making it bold */
  color: #fff;
  /* Giving it a strong color */
  font-size: 20px;
  /* Making it bigger */
}

.MuiSvgIcon-root {
  fill: #fff;
  /* Green color */
  width: 20px;
  height: 20px;
  vertical-align: middle;
  /* To center it vertically with the text */
  position: relative;
  /* To allow using top property */
  top: -7px;
  /* Move up by 5px */
}

.MuiBox-root.css-18dqm7l {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Distributes the items evenly */
}

.description {
  display: flex;
  align-items: center;
  /* This will vertically center the items in the flex container */
  margin-bottom: 15px;
}

.description svg {
  margin-right: 10px;
}

.discord-link {
  color: #1f51ff;
  /* Discord color */
  text-decoration: none;
}

/* Sign-up button styling */
.signup-button {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px 0;
  background-color: #FFF;
  /* Discord color */
  color: #000;
  text-decoration: none;
  /* Removes the default underline for links */
  border-radius: 4px;
  transition: background-color 0.3s;
  font-weight: bold;
}

.signup-button:hover {
  background-color: #000;
  color: #FFF;
  /* Keeps the text color white on hover */
  text-decoration: none;
  /* Ensures the underline doesn't appear on hover */
}

/* Gradient styling */
.gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  pointer-events: none;
  /* So it doesn't interfere with other clickable elements */
}

.card-link {
  display: block;
  text-decoration: none;
  /* To remove the default underline of links */
  color: inherit;
  /* To inherit the color from its parent */
}

.card-link:hover {
  color: inherit;
  /* Keep the original color on hover */
  text-decoration: none;
  /* Remove any underline on hover */
}

.card-link:focus {
  outline: none;
  /* Remove blue outline on focus, if present */
}

.social-media-cards {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 20px;
}

.card {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  transition: background-color 0.3s;
  border-color: rgb(63, 63, 70);
  background: linear-gradient(to top, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(63 63 70/ 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(63 63 70/ 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.card:hover {
  background-color: #f5f5f5;
  color: #000;
}

.card a {
  text-decoration: none;
  /* Remove underline */
  color: inherit;
  /* Ensure the text color remains the same */
}

.card a:hover {
  text-decoration: none;
  /* Remove underline */
  color: inherit;
  /* Ensure the text color remains the same */
}

@media (max-width: 900px) {
  .card-container {
    flex-direction: column;
    /* Stack the cards vertically */
    align-items: center;
    /* Center the cards horizontally */
  }

  .card span {
    display: none;
  }
}

.icon {
  font-size: 24px;
  /* Adjust the size of the Font Awesome icons */
  /* margin-right: 15px; */
  /* Slight increase in spacing due to larger icon size */
}

.kick-icon {
  width: 24px;
  /* Set the width */
  height: auto;
  /* Spacing */
  vertical-align: middle;
  /* Vertically align with adjacent text */
}

/* Override default hyperlink styling */
.social-media-cards .card {
  text-decoration: none;
  /* Remove underline */
  color: inherit;
  width: 250px;
  /* Ensure the text color remains consistent */
}

.social-media-cards .card:hover {
  text-decoration: none;
  /* Ensure no underline on hover */
  filter: invert(1);
  /* Invert the colors */
  background-color: rgba(0, 0, 0);
  /* Optional: add a slight background color to emphasize the effect */
}

/* Ensure icon color remains consistent */
.social-media-cards .card i,
.social-media-cards .card img {
  color: inherit;
  /* For Font Awesome icons */
  fill: currentColor;
  /* For SVG icons */
}