/* Main Site Styles */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

body {
    font-family: 'Poppins', sans-serif;
    background-color: #0f0e17;
    color: #fffffe;
}

.gradient-text {
    background: linear-gradient(90deg, #ff8906, #e53170);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.stream-card {
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.stream-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}

.glow-on-hover {
    transition: all 0.3s ease;
}

.glow-on-hover:hover {
    box-shadow: 0 0 15px rgba(229, 49, 112, 0.7);
}

.twitch-purple {
    background-color: #9147ff;
}

.twitch-purple:hover {
    background-color: #772ce8;
}

.social-icon {
    transition: all 0.3s ease;
}

.social-icon:hover {
    transform: scale(1.2);
}

.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background: linear-gradient(90deg, #ff8906, #e53170);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.stream-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(transparent 60%, rgba(0,0,0,0.7));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1rem;
}

.live-indicator {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
    }
}

/* Social media specific colors */
.x-black {
    background-color: #010101;
}
.x-black:hover {
    background-color: #000000;
}
.instagram-pink {
    background: linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D);
}
.instagram-pink:hover {
    background: linear-gradient(45deg, #344DDB, #4F48D0, #7A30A9, #B92A79, #D62561, #FC1212);
}
.tiktok-black {
    background-color: #010101;
}
.tiktok-black:hover {
    background-color: #000000;
}
.facebook-blue {
    background-color: #1877F2;
}
.facebook-blue:hover {
    background-color: #166FE5;
}
.youtube-red {
    background-color: #FF0000;
}
.youtube-red:hover {
    background-color: #E50000;
}

/* Markdown Content Styling */
.text-gray-300 h1, .text-gray-300 h2, .text-gray-300 h3, 
.text-gray-300 h4, .text-gray-300 h5, .text-gray-300 h6 {
    font-weight: 600;
    margin-top: 1em;
    margin-bottom: 0.5em;
}
.text-gray-300 h1 { font-size: 2em; }
.text-gray-300 h2 { font-size: 1.5em; }
.text-gray-300 h3 { font-size: 1.25em; }
.text-gray-300 p {
    margin-bottom: 1em;
}
.text-gray-300 ul, .text-gray-300 ol {
    margin-left: 1.5em;
    margin-bottom: 1em;
}
.text-gray-300 ul {
    list-style-type: disc;
}
.text-gray-300 ol {
    list-style-type: decimal;
}
.text-gray-300 li {
    margin-bottom: 0.5em;
}
.text-gray-300 strong {
    font-weight: 700;
}
.text-gray-300 em {
    font-style: italic;
}
.text-gray-300 a {
    color: #f59e0b;
    text-decoration: underline;
}
.text-gray-300 a:hover {
    color: #fbbf24;
}
.text-gray-300 code {
    background-color: #374151;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.9em;
}
.text-gray-300 pre {
    background-color: #374151;
    padding: 1em;
    border-radius: 5px;
    overflow-x: auto;
    margin-bottom: 1em;
}
.text-gray-300 pre code {
    background-color: transparent;
    padding: 0;
}
.text-gray-300 blockquote {
    border-left: 4px solid #f59e0b;
    padding-left: 1em;
    margin-left: 0;
    margin-bottom: 1em;
    font-style: italic;
    color: #9ca3af;
}