@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,700,600|Plus+Jakarta+Sans:400");

:root {
  --color-background: #060606;
  --color-text-primary: #f7f6f9;
  --color-text-secondary: #999999;
  --color-accent-primary: #8e23e2;
  --color-accent-secondary: #21bdb8;

  /* Separated secondary accent colors for manual modification */
  --footer-link-color: #d31b67;
  --h2-link-color: #ff5959;
  --h2-icon-hover-color: #c721ae;
  --nav-link-hover-color: #dc4760;

  --font-primary: 'Poppins', sans-serif;
  --font-secondary: 'Plus Jakarta Sans', sans-serif;
  --gradient-primary: linear-gradient(157deg, #8e23e2 0%, #cf2576 100%);
}

body {
    font-family: var(--font-primary);
    margin: 0;
    padding: 0;
    background-color: var(--color-background);
    color: var(--color-text-primary);
    text-align: center;
    line-height: 1.6;
}
h1 img {
    width: 300px;
    height: auto;
    margin: 0 auto;
    display: block;
}
footer a {
    color: var(--footer-link-color);
    text-decoration: none;
    transition: color 0.3s ease;
}
footer a:hover {
    color: #f11d6b;
    text-decoration: underline;
}
h2 {
    color: var(--color-text-primary);
    font-family: var(--font-primary);
    font-weight: 700;
}
h2 a{
    color: var(--h2-link-color);
}
h2 i:hover{
    color: var(--h2-icon-hover-color);
}
header h1 a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
header h1 a:hover {
    opacity: 0.9;
}
nav {
    padding: 20px 0;
}
nav a {
    padding: 10px 20px;
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
    margin: 0 10px;
    border-radius: 4px;
}
nav a:hover {
    color: var(--nav-link-hover-color);
    background: rgba(255, 45, 85, 0.1);
}
section {
    position: relative;
    overflow: hidden;
}
button, .join-now-button {
    background: var(--gradient-primary);
    color: white;
    border: none;
    padding: 12px 32px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 100px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
    font-family: var(--font-primary);
}
button:hover, .join-now-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 45, 85, 0.4);
    filter: brightness(1.1);
}