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

.card-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    /* Reduced space between cards */
}


/* Card container */
.MuiBox-root.css-1o7r9kk {
    background: linear-gradient(to top, var(--tw-gradient-stops));
    --tw-gradient-from: rgb(255 199 1 / 0.1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 199 1 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    /* Gradient starts more transparent at the top and becomes less transparent towards the bottom */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 20px;
    width: 300px;
    margin: 20px 20px;
    /* Adjusted horizontal margin */
    position: relative;
    transition: transform 0.3s ease;
    /* Smooth transition for the transform property */
}

.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 {
    height: 100px;
    /* Set a fixed height that accommodates the maximum number of items */
    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: #6528c9;
    /* Discord color */
    color: #FFF;
    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: #6528c9;
    /* 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;
    background: linear-gradient(to top, var(--tw-gradient-stops));
    --tw-gradient-from: rgb(255 199 1 / 0.1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 199 1 / 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;
    /* Maintain aspect ratio */
    margin-right: 15px;
    /* 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 */
}