body {
            background-color: #000;
            color: #fff;
            font-family: 'Arial', sans-serif;
        }
        .hero {
            height: 100vh;
            background: url('../images/Psyfix_Ruins_Banner_3000x3000.png') no-repeat center center/cover;
            position: relative;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
        }
        .hero-content {
            z-index: 2;
        }
        .hero h1 {
            font-size: 4rem;
            font-weight: bold;
            margin-bottom: 1rem;
        }
        .hero p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
        }
        .btn-custom {
            background-color: #ff0000;
            color: #fff;
            padding: 0.8rem 1.5rem;
            font-size: 1.2rem;
            border: none;
            border-radius: 5px;
        }
        .btn-custom:hover {
            background-color: #cc0000;
        }
	.apple-logo {
        filter: invert(100%) brightness(200%);
	}

/* Globale stijl */
body {
    background-color: #1a1a1a;
    color: #eaeaea;
    font-family: 'Roboto', sans-serif;
}

/* Hero-sectie */
.hero h1 {
    color: #ff3333;
    font-size: 4rem;
    text-shadow: 2px 2px 8px rgba(255, 51, 51, 0.8);
}

.hero p {
    color: #ccc;
    font-size: 1.2rem;
}

.btn-custom {
    background: linear-gradient(45deg, #ff3333, #990000);
    color: #fff;
    transition: transform 0.2s, background 0.3s;
}

.btn-custom:hover {
    transform: scale(1.1);
    background: linear-gradient(45deg, #990000, #ff3333);
}

/* Sectie koppen */
h2 {
    font-size: 2.5rem;
    color: #ff3333;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

/* About-sectie */
#about p {
    font-size: 1.1rem;
    color: #ccc;
}

#about .img-fluid {
    border: 2px solid #ff3333;
    border-radius: 50%;
    transition: transform 0.3s;
}

#about .img-fluid:hover {
    transform: scale(1.1);
}

/* Music-sectie */
#music iframe {
    border: 3px solid #ff3333;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(255, 51, 51, 0.5);
}

/* Contact-formulier */
form input, form textarea {
    background-color: #2a2a2a;
    border: 1px solid #555;
    color: #eaeaea;
}

form input:focus, form textarea:focus {
    border-color: #ff3333;
    box-shadow: 0 0 5px rgba(255, 51, 51, 0.5);
}

/* Footer */
footer {
    background-color: #111;
    color: #777;
    padding: 1rem;
}

footer p {
    margin: 0;
}

/* Updatesectie */
#updates {
    background-color: #1a1a1a;
    color: #eaeaea;
}

#updates h2 {
    color: #ff3333;
    /*text-shadow: 2px 2px 8px rgba(255, 51, 51, 0.8);*/
}

#updates .card {
    background-color: #2a2a2a;
    border: 1px solid #ff3333;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s, box-shadow 0.3s;
}

#updates .col-md-4 {
    margin-bottom: 20px; /* Voegt ruimte toe tussen de kaarten */
}

#updates .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(255, 51, 51, 0.5);
}

#updates .card-title {
    color: #ff3333;
    font-weight: bold;
}

#updates .card-text {
    color: #ccc;
}


#updates .card-footer {
    background-color: transparent !important;
    color: #eaeaea !important; /* Zorg dat dit de bovenliggende kleur wordt */
    border-top: 1px solid #ff3333;
    font-size: 1rem;
    font-weight: bold;
    text-align: right;
}

#updates .card:hover .card-footer {
    color: #ff3333 !important; /* Zorg dat de hover-kleur toegepast wordt */
}


/* Streaming-sectie */

.streaming-logo {
    max-width: 150px; /* Zorgt voor uniforme grootte */
    transition: transform 0.2s ease-in-out, box-shadow 0.3s;
}