```css
/* ========================= */
/* BASE */
/* ========================= */

body {
    font-family: Arial, sans-serif;
    background-color: #0f172a;
    color: #e2e8f0;
    margin: 0;
    padding: 0;
}


/* ========================= */
/* INDEX PAGE BACKGROUND */
/* ========================= */

body.index-page {
    background: url("Arctic-Wolves.png") no-repeat center center fixed;
    background-size: cover;
}


/* ========================= */
/* MEMBER PAGE BACKGROUND */
/* ========================= */

body.member-page {
    background: url("Frostwoelfe.png") no-repeat center center fixed;
    background-size: cover;
}


/* Overlay member page */
body.member-page::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 0;
}


/* ========================= */
/* SNOW EFFECT */
/* ========================= */

body.member-page::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;

    background-image:
        radial-gradient(white 1px, transparent 1px),
        radial-gradient(white 1px, transparent 1px);

    background-size: 50px 50px, 80px 80px;

    animation: snowFall 20s linear infinite;

    opacity: 0.3;
}


@keyframes snowFall {
    from {
        background-position: 0 0, 0 0;
    }

    to {
        background-position: 0 500px, 0 1000px;
    }
}


/* ========================= */
/* MITGLIEDERVEREINBARUNG */
/* ========================= */

body.mitgliedervereinbarung-page {
    background: url("mv-hintergrund.png") no-repeat center center fixed;
    background-size: cover;

    color: #f8fafc;
}


/* ========================= */
/* OVERLAY MITGLIEDERVEREINBARUNG */
/* ========================= */

body.mitgliedervereinbarung-page::before {
    content: "";
    position: fixed;
    inset: 0;

    background: rgba(0, 0, 0, 0.32);

    z-index: 0;
    pointer-events: none;
}


/* ========================= */
/* SCHNEEFALL MV */
/* ========================= */

body.mitgliedervereinbarung-page::after {
    content: "";
    position: fixed;
    inset: 0;

    pointer-events: none;
    z-index: 1;

    background-image:
        radial-gradient(white 1px, transparent 1px),
        radial-gradient(white 1px, transparent 1px);

    background-size: 50px 50px, 80px 80px;

    background-position:
        0 0,
        20px 20px;

    animation: mvSnowFall 20s linear infinite;

    opacity: 0.22;
}


@keyframes mvSnowFall {
    from {
        background-position:
            0 0,
            20px 20px;
    }

    to {
        background-position:
            0 500px,
            20px 1000px;
    }
}


/* ========================= */
/* MV – ÜBERSCHRIFTEN */
/* ========================= */

body.mitgliedervereinbarung-page h2,
body.mitgliedervereinbarung-page h3 {

    color: #f8fafc;

    text-align: center;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, 1),
        0 0 8px rgba(0, 0, 0, 0.95),
        0 0 15px rgba(56, 189, 248, 0.55);

    letter-spacing: 0.5px;
}


/* ========================= */
/* MV – TEXT OHNE KÄSTCHEN */
/* ========================= */

body.mitgliedervereinbarung-page section p {

    color: #f8fafc;

    background: transparent;

    border: none;

    border-radius: 0;

    line-height: 1.7;

    max-width: 800px;

    margin: 10px auto;

    padding: 8px 15px;

    text-align: center;

    text-shadow:
        0 2px 3px rgba(0, 0, 0, 1),
        0 0 6px rgba(0, 0, 0, 0.95),
        0 0 12px rgba(0, 0, 0, 0.75);
}


/* ========================= */
/* MV – LISTEN OHNE KÄSTCHEN */
/* ========================= */

body.mitgliedervereinbarung-page section ul {

    max-width: 700px;

    margin: 10px auto;

    padding: 15px 40px;

    text-align: left;

    color: #f8fafc;

    background: transparent;

    border: none;

    border-radius: 0;

    text-shadow:
        0 2px 3px rgba(0, 0, 0, 1),
        0 0 6px rgba(0, 0, 0, 0.95),
        0 0 12px rgba(0, 0, 0, 0.75);
}


body.mitgliedervereinbarung-page section li {
    margin: 8px 0;
}


/* ========================= */
/* MV – HERVORGEHOBENER TEXT */
/* ========================= */

body.mitgliedervereinbarung-page strong {

    color: #ffffff;

    text-shadow:
        0 2px 3px rgba(0, 0, 0, 1),
        0 0 8px rgba(0, 0, 0, 0.9),
        0 0 12px rgba(56, 189, 248, 0.5);
}


/* ========================= */
/* HEADER */
/* ========================= */

header {

    background-color: rgba(15, 23, 42, 0.9);

    padding: 20px;

    position: relative;

    z-index: 2;
}


.header-container {

    display: flex;

    justify-content: space-between;

    align-items: center;
}


header h1 {

    margin: 0;

    color: #38bdf8;

    text-shadow:
        0 0 8px rgba(56, 189, 248, 0.5);
}


/* ========================= */
/* MEMBER BUTTON */
/* ========================= */

.member-btn {

    display: inline-block;

    padding: 12px 20px;

    border-radius: 10px;

    text-decoration: none;

    font-weight: bold;

    letter-spacing: 1px;

    color: #e2e8f0;

    background: rgba(15, 23, 42, 0.6);

    border: 1px solid rgba(56, 189, 248, 0.3);

    box-shadow:
        0 0 10px rgba(56, 189, 248, 0.2);

    transition: all 0.25s ease;
}


.member-btn:hover {

    transform: scale(1.05);

    box-shadow:
        0 0 15px rgba(56, 189, 248, 0.6);
}


/* ========================= */
/* SECTIONS */
/* ========================= */

section {

    padding: 20px;

    position: relative;

    z-index: 2;

    text-align: center;
}


/* ========================= */
/* H2 */
/* ========================= */

h2 {

    color: #7dd3fc;

    text-align: center;

    text-shadow:
        0 0 15px rgba(56, 189, 248, 0.6);
}


/* ========================= */
/* TEXT STYLE */
/* ========================= */

section p {

    color: #93eefa;

    line-height: 1.7;

    max-width: 800px;

    margin: 10px auto;

    background: rgba(15, 23, 42, 0.4);

    padding: 15px;

    border-radius: 10px;

    border: 1px solid rgba(56, 189, 248, 0.2);

    text-shadow:
        0 0 6px rgba(0, 0, 0, 0.8);

    text-align: center;
}


/* ========================= */
/* LINKS */
/* ========================= */

.links {

    display: flex;

    justify-content: center;

    gap: 20px;

    margin-top: 15px;
}


/* ========================= */
/* GAMING BUTTON STYLE */
/* ========================= */

.links a {

    display: inline-block;

    padding: 12px 20px;

    border-radius: 10px;

    text-decoration: none;

    font-weight: bold;

    letter-spacing: 1px;

    color: #e2e8f0;

    background: rgba(15, 23, 42, 0.6);

    border: 1px solid rgba(56, 189, 248, 0.3);

    box-shadow:
        0 0 10px rgba(56, 189, 248, 0.2);

    transition: all 0.25s ease;

    position: relative;

    overflow: hidden;
}


.links a:hover {

    transform: translateY(-3px) scale(1.05);

    border-color: #38bdf8;

    box-shadow:
        0 0 15px rgba(56, 189, 248, 0.6),
        0 0 30px rgba(56, 189, 248, 0.3);

    color: #90e9ff;
}


.links a::before {

    content: "";

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );

    transition: 0.5s;
}


.links a:hover::before {

    left: 100%;
}


/* ========================= */
/* DISCORD */
/* ========================= */

.links a[href*="discord"] {

    border-color: #5865F2;
}


.links a[href*="discord"]:hover {

    box-shadow:
        0 0 15px rgba(88, 101, 242, 0.6);

    color: #aab2ff;
}


/* ========================= */
/* TEAMSPEAK */
/* ========================= */

.links a[href*="ts"] {

    border-color: #3a8ee6;
}


.links a[href*="ts"]:hover {

    box-shadow:
        0 0 15px rgba(58, 142, 230, 0.6);

    color: #7fb8ff;
}


/* ========================= */
/* MEMBER AREA */
/* ========================= */

.member-container {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 20px;

    width: 100%;

    max-width: 1000px;

    margin: 0 auto;
}


/* ========================= */
/* SECTION TITLE */
/* ========================= */

.section-title {

    grid-column: 1 / -1;

    margin-top: 25px;

    color: #7dd3fc;

    text-align: center;

    text-shadow:
        0 0 10px rgba(56, 189, 248, 0.6);
}


/* ========================= */
/* MEMBER CARDS */
/* ========================= */

.member-card {

    width: 100%;

    box-sizing: border-box;

    background: transparent;

    border: none;

    text-align: center;

    animation: floatCard 4s ease-in-out infinite;
}


@keyframes floatCard {

    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-8px);
    }

    100% {
        transform: translateY(0px);
    }
}


.member-card h3 {

    margin: 10px 0 5px;

    font-size: 20px;

    font-weight: bold;

    color: #f8fafc;

    text-shadow:
        0 0 5px black,
        0 0 10px black,
        0 0 20px black;
}


.member-card p {

    margin: 0;

    font-size: 14px;

    color: #cbd5f5;
}


/* ========================= */
/* RANK SYSTEM */
/* ========================= */

.leader h3 {

    color: #ffdd55;

    text-shadow:
        0 0 5px black,
        0 0 10px #ffcc00,
        0 0 20px #ffaa00,
        0 0 30px #ffaa00;
}


.co h3,
.veteran h3 {

    color: #a5f3fc;

    text-shadow:
        0 0 5px black,
        0 0 10px #38bdf8,
        0 0 20px #0ea5e9;
}


.member h3 {

    color: #ffffff;

    text-shadow:
        0 0 5px black,
        0 0 10px rgba(255, 255, 255, 0.8);
}


/* ========================= */
/* ESL INFO BOX */
/* ========================= */

.esl-info {

    max-width: 600px;

    margin: 30px auto;

    text-align: center;

    color: #86fdfd;

    font-size: 15px;

    line-height: 1.6;

    text-shadow:
        0 0 5px black,
        0 0 10px black;

    background: rgba(15, 23, 42, 0.4);

    padding: 15px;

    border-radius: 10px;
}


/* ========================= */
/* FOOTER */
/* ========================= */

footer {

    text-align: center;

    padding: 15px;

    background-color: rgba(15, 23, 42, 0.9);

    margin-top: 20px;

    position: relative;

    z-index: 2;
}


/* ========================= */
/* MOBILE */
/* ========================= */

@media (max-width: 700px) {

    .member-container {

        grid-template-columns: 1fr;

        transform: none;
    }

    .section-title {

        grid-column: 1;
    }

    .header-container {
        flex-direction: column;
        gap: 15px;
    }

    .links {
        flex-direction: column;
        align-items: center;
    }

    .links a {
        width: 80%;
        text-align: center;
    }

    body.mitgliedervereinbarung-page section p {
        padding: 8px 5px;
    }

    body.mitgliedervereinbarung-page section ul {
        padding: 10px 25px;
    }
}