body {
    font-family: 'Inter', sans-serif;
}

h1, h2, h3 {
    @apply font-bold text-red-300;
}

a {
    @apply text-red-200 hover:text-red-400 transition duration-300;
}

header {
    background-color: rgba(10, 10, 10, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

footer {
    background-color: rgba(10, 10, 10, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.footer {
    @apply text-center p-4 bg-red-800;
}

.button {
    @apply bg-red-600 text-white py-2 px-4 rounded hover:bg-red-500 transition duration-300;
}

.card {
    @apply bg-red-700 p-6 rounded-lg shadow-lg;
}

.card-title {
    @apply text-xl font-semibold mb-2;
}

.card-content {
    @apply text-gray-200;
}

.hero-title {
    text-shadow: 0 0 20px rgba(220, 38, 38, 0.5);
}

.hero-bg {
    background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSk9la8_MBI1CKPw6lwhXPpP2-GK4h-q1Sr5w&s');
    filter: blur(4px);
    transform: scale(1.05); /* Prevents blurred edges from showing */
}

.join-info-bg {
    background-image: url('https://i.ytimg.com/vi/hcaQug00LB0/maxresdefault.jpg');
    filter: blur(8px);
    transform: scale(1.05);
}

.feature-card, .team-card {
    /* Default red glow */
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
    transition: box-shadow 0.3s ease-in-out;
}

.feature-card:hover, .team-card:hover {
    /* Intensified glow on hover */
    box-shadow: 0 0 35px rgba(239, 68, 68, 0.35);
}

#page-content {
    transition: filter 0.3s ease-in-out;
}

#page-content.blurred {
    filter: blur(5px);
    pointer-events: none;
}