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

body { 
    font-family: Montserrat, sans-serif; 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh;
    background: #76e399;
    background: linear-gradient(0deg,rgba(118, 227, 153, 1) 0%, rgba(15, 14, 64, 1) 100%);
    color: #ffffff;
}

header { 
    background: #4D606E;
    background: linear-gradient(90deg, rgba(77, 96, 110, 1) 0%, rgba(40, 49, 79, 1) 20%, rgba(36, 36, 36, 1) 80%);
    padding: 1rem 1.5rem; 
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.profile-container {
    display: flex;
    #profile-pic {
        width: 240px;
        height: 240px;
        object-fit: cover;
        margin-bottom: 1rem;
    }
    #title {
        font-size: 2.5rem;
        -webkit-text-stroke: 2px black;
    }
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 2rem 1rem;
}

.header-logo { 
    display: flex; 
    align-items: center; 
    gap: 0.75rem; 
    text-decoration: none; 
}
.header-logo img { 
    width: 220px; 
    height: auto; 
    max-height: 64px; 
    display: block; 
}

nav { 
    flex: 1; 
    display: flex; 
    justify-content: center; 
}
nav ul { 
    list-style: none; 
    display: flex; 
    gap: 1.5rem; 
    align-items: center; 
}
nav a { 
    color: #fff; 
    text-decoration: none; 
    font-weight: 700; 
    padding: 0.5rem; 
    border-radius: 4px; 
    transition: all 0.3s;
    position: relative;
}
nav a img { 
    width: 145px; 
    height: auto; 
    transition: transform 0.3s;
}
nav a:hover img { 
    transform: scale(1.05);
}
nav a.active-nav::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 3px;
    background: #ff4444;
    border-radius: 2px;
}

.lang-switcher { 
    display: flex; 
    gap: 0.5rem; 
}
.lang-switcher button { 
    background: #2a2a2a; 
    border: 2px solid #444; 
    color: #fff; 
    padding: 0.5rem 1rem; 
    border-radius: 4px; 
    cursor: pointer; 
    font-weight: bold;
    transition: all 0.3s;
}
.lang-switcher button:hover { 
    background: #333; 
    border-color: #555;
}
.lang-switcher button.active { 
    background: #ff4444; 
    border-color: #ff4444; 
}

main { 
    flex: 1; 
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

footer { 
    background: #1a1a1a; 
    color: #fff; 
    padding: 2rem; 
    text-align: center;
    margin-top: auto;
}

.embeds { 
    display: flex; 
    gap: 2rem; 
    flex-wrap: wrap; 
    align-items: flex-start; 
    margin-top: 2rem; 
    justify-content: center;
}

.bluesky-card, .youtube-card { 
    background: #222; 
    border: 1px solid #333; 
    border-radius: 8px; 
    padding: 1rem; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.2); 
}
.bluesky-card { 
    display: flex; 
    gap: 0.75rem; 
    align-items: center; 
    min-width: 260px; 
    max-width: 420px; 
}
.bluesky-avatar { 
    width: 64px; 
    height: 64px; 
    border-radius: 50%; 
    background: #2a2a2a; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: 700; 
}
.bluesky-info { 
    display: flex; 
    flex-direction: column; 
}
.bluesky-name { 
    font-weight: 700; 
    color: #fff;
}
.bluesky-handle { 
    color: #aaa; 
    font-size: 0.95rem; 
}

.youtube-card { 
    width: 300px; 
    display: flex; 
    gap: 0.75rem; 
    align-items: center; 
}
.youtube-avatar { 
    width: 100px; 
    height: 64px; 
    border-radius: 50%; 
    background: #c4302b; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: 700;
}

.social-links { 
    display: flex; 
    gap: 1rem; 
    justify-content: center; 
    margin-top: 1.5rem; 
    flex-wrap: wrap;
}

.social-links a { 
    width: 56px; 
    height: 56px; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 50%; 
    color: #fff; 
    text-decoration: none; 
    font-size: 1.4rem; 
    transition: all 0.3s; 
}
.social-links a.youtube { background: #c4302b; }
.social-links a.bluesky { 
    background: linear-gradient(45deg, 
        #1DA1F2, 
        #0d8ddb, 
        #1DA1F2, 
        #0d8ddb, 
        #1DA1F2
    ); 
}
.social-links a.bluesky img {
    width: 28px; 
    height: auto; 
    filter: brightness(0) invert(1);
}
.social-links a.github { background: #24292f; }
.social-links a.linkedin { background: #0077B5; }
.social-links a.instagram { 
    background: linear-gradient(45deg, 
        #FEDA77, 
        #F58529, 
        #DD2A7B, 
        #8134AF, 
        #515BD4
    );
}
.social-links a.tiktok { 
    background: linear-gradient(135deg, 
        #25F4EE 0%, 
        #000000 30%, 
        #FE2C55 70%, 
        #000000 100%
    );
    color: #ffffff;
    position: relative;
    overflow: hidden;
}
.social-links a.discord { background: #5865F2; }
.social-links a.discord:hover {
    animation: discordHoverSpin 0.7s ease;
}

@keyframes discordHoverSpin {
    0% { transform: rotate(0deg) scale(1); }
    30% { transform: rotate(-10deg) scale(1.05); }
    40% { transform: rotate(-10deg) scale(1.05); }
    45% { transform: rotate(-5deg) scale(1.07); }
    100% { transform: rotate(360deg) scale(1.1); }
}
.social-links a.twitch { background: #9146FF; }

.social-links a.steam { background: linear-gradient(#171E41, #07719F); }
.social-links a.tumblr { background: #001935; }
.social-links a.newgrounds { 
    background-image: url('../img/svg/NgBG.svg');
}
.social-links a.newgrounds img {
    width: 38px; 
    height: auto; 
}
.social-links a.reddit { background: #FF5700; }
.social-links a.telegram { background: #0088cc; }
.social-links a.gamejolt { 
    background: linear-gradient(#2F7F6F, #CCFF00); 
}
.social-links a.gamejolt img { 
    width: 28px; 
    height: auto; 
    filter: brightness(0) invert(1);
}
.social-links a:hover { 
    transform: translateY(-3px) scale(1.1); 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

@media (max-width: 900px) { 
    .header-logo img { 
        width: 160px; 
    } 
    .youtube-card { 
        width: 100%; 
    } 
    .embeds {
        flex-direction: column;
        align-items: center;
    }
    
    header {
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    nav {
        order: 3;
        width: 100%;
        margin-top: 1rem;
    }
    
    nav ul {
        justify-content: center;
    }
}

@media (max-width: 600px) {
    main {
        padding: 1rem;
    }
    
    .social-links a {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
    
    nav a img {
        width: 120px;
    }
}

bsky-widget {
  min-height: 495px;
  width: 350px;
}