:root {
    --background-gradient-colour: linear-gradient(135deg, #FF00E6 0%, #BF00FF 20%, #8A2BE2 40%, #5B5BFF 60%, #2C75FF 80%, #00A8FF 100%);
    --primary-colour: 	#000000;
    --secondary-colour: blue;

    --card-gradient-colour: linear-gradient(135deg, #FF00FF 0%, #9F2B68 100%);
    --card-text-colour: #FFFFFF;
    --card-border-colour: #4B0082;
;
}

body {
    background: var(--background-gradient-colour);
    color: var(--primary-colour);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
}

.site-footer {
    background: var(--background-gradient-colour);
    color: var(--card-text-colour);
    text-align: center;
    padding: 1em 0;
    position: relative;
    width: 100%;
    bottom: 0;
}

#title {
    text-align: center;
    padding: 2em 0;
}

#intro-card {
    background: var(--card-gradient-colour);
    color: var(--card-text-colour);
    margin: 2em auto;
    padding: 2em;
    border-radius: 10px;
    max-width: 600px;
    text-align: center;
    border: 5px solid var(--card-border-colour)
}

.features-card {
    background: var(--card-gradient-colour);
    color: var(--card-text-colour);
    margin: 1em auto;
    padding: 1em;
    border-radius: 10px;
    max-width: 400px;
    text-align: center;
    border: 5px solid var(--card-border-colour)
}

.features-card ul {
    list-style-position: inside;
    padding: 0;
    text-align: center;
}

.features-card li {
    margin: 0.5em 0;
    text-align: center;
}

.features-card ol {
    list-style-type: none;
    text-align: center;
}

/* 1. Remove the line from the link globally (usually looks better) */
.invite-link {
    text-decoration: underline; /* Removes the underline */
    color: var(--card-text-colour); /* Set your initial color */
    display: inline-block;
    transition: 0.3s; /* Makes the color change smooth, not instant */
}

/* 2. Change things on hover */
.invite-link:hover {
    text-decoration: none; /* Ensures the line stays gone on hover */
    color: var(--card-text-colour); /* Your custom hover color */
    cursor: pointer; /* Makes sure the "hand" icon appears */
}

.features-card h2 {
    text-decoration: underline;
}