:root {
    --navy: #0B1338;
    --purple: #8B5CF6;
    --cyan: #00EAFF;
    --white: #ffffff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: var(--navy);
    color: var(--white);
    font-family: Arial,sans-serif;
}

header {
    padding: 20px;
    text-align: center;
}

    header a {
        color: var(--cyan);
    }

.hero {
    text-align: center;
    padding: 100px 20px;
}

    .hero img {
        width: 220px;
        margin-bottom: 30px;
    }

    .hero h1 {
        font-family: 'Press Start 2P',cursive;
        color: var(--cyan);
        margin-bottom: 20px;
    }

    .hero p {
        color: #cfd6ff;
    }

.about,
.episode {
    max-width: 1000px;
    margin: auto;
    text-align: center;
    padding: 80px 20px;
}

.topics {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    padding: 40px 20px;
}

.card {
    background: #101944;
    border: 2px solid var(--purple);
    border-radius: 12px;
    padding: 25px;
    width: 320px;
}

    .card h3 {
        margin-bottom: 15px;
        color: var(--cyan);
    }

footer {
    text-align: center;
    padding: 40px;
    border-top: 2px solid var(--purple);
    margin-top: 40px;
}