body, html {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    overflow-x: hidden;
    background: #0f111a;
    color: #fff;
}

canvas#background {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
}

/* Topbar */
.topbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #4b2e2e;
    display: flex;
    align-items: center;
    padding: 0 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    z-index: 15;
}

.topbar .logo {
    height: 30px;
    width: auto;
    margin-right: 10px;
}

.topbar span {
    color: #fff;
    font-weight: bold;
    font-size: 1.1rem;
}

/* Container en content */
.container { position: relative; z-index: 1; text-align: center; padding: 100px 20px 50px; }

h1 { font-size: 3rem; background: linear-gradient(90deg, #a0c4ff, #cdb4db); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 10px; }

.profile-link { display: inline-block; margin-bottom: 50px; padding: 10px 25px; background: linear-gradient(90deg, #00f260, #0575e6); color: white; text-decoration: none; border-radius: 25px; font-weight: bold; }

/* Kaarten layout */
.cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }

.card {
    background: #1c1f2a;
    padding: 30px 20px;
    width: 260px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.6); }

.card h2 { margin: 15px 0; font-size: 1.5rem; }
.card p { font-size: 0.9rem; line-height: 1.4; margin-bottom: 20px; }

/* Knoppen */
.btn { padding: 10px 20px; border: none; border-radius: 25px; color: #fff; font-weight: bold; cursor: pointer; transition: transform 0.2s, opacity 0.2s; }
.btn:hover { transform: scale(1.05); opacity: 0.9; }

.youtube { background: #ff0000; }
.discord { background: #5865F2; }
.instagram { background: #E1306C; }
.facebook { background: #1877F2; }
.tiktok { background: #000000; }
.twitter { background: #1DA1F2; }
.linkedin { background: #0077B5; }
.twitch { background: #9146FF; }

/* Footer */
footer { margin-top: 50px; font-size: 0.8rem; color: #aaa; }

/* Responsive */
@media (max-width: 900px) { .cards { flex-direction: column; align-items: center; } }