/* Font */
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English&display=swap');


html,
body {
    position: relative;
    height: 100%;
}

body {
    background: #eee;
    font-size: 14px;
    color: #000;
    margin: 0;
    padding: 0;
}

body {
    background: #000;
    font-size: 14px;
    color: #000;
    margin: 0;
    padding: 0;
}

html,
body {
    position: relative;
    height: 100%;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper {
    width: 240px;
    height: 320px;
}

.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    font-size: 22px;
    font-weight: bold;
    color: #fff;
    box-shadow: 0 0 140px rgba(5, 9, 132, 0.5);
    animation: glow 2s infinite alternate;
}

/* Voeg een glinsterend effect toe */
@keyframes glow {
    0% {
        box-shadow: 0 0 10px rgba(5, 9, 132, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(5, 9, 132, 0.5);
    }
    100% {
        box-shadow: 0 0 10px rgba(5, 9, 132, 0.5);
    }
}

.swiper-slide-img {
    width: 115%;
    margin-right: 14%;
    margin-bottom: 10%;
    height: 100%;
    object-fit: contain;
}

.character-name {
    position: absolute;
    bottom: 287px;
    left: 70px;
    font-family: 'Im Fell English', serif;
    font-size: 18px;
    color: white;
}


.swiper-slide:nth-child(1n) {
    background-color: rgb(64, 0, 0); /* Donkerrood */
    box-shadow: 0 0 140px rgba(5, 9, 132, 0.5);
    animation: glow 2s infinite alternate;
}

.swiper-slide:nth-child(2n) {
    background-color: rgb(0, 38, 76); /* Donkerblauw */
}

.swiper-slide:nth-child(3n) {
    background-color: rgb(0, 51, 25); /* Donkergroen */
}

.swiper-slide:nth-child(4n) {
    background-color: rgb(102, 51, 0); /* Donkeroranje */
}

.swiper-slide:nth-child(5n) {
    background-color: rgb(51, 51, 0); /* Donkergeel */
}

.swiper-slide:nth-child(6n) {
    background-color: rgb(64, 0, 32); /* Donkerpaars */
}

.swiper-slide:nth-child(7n) {
    background-color: rgb(0, 25, 0); /* Donkergroen */
}

.swiper-slide:nth-child(8n) {
    background-color: rgb(0, 25, 51); /* Donkerturquoise */
}

.swiper-slide:nth-child(9n) {
    background-color: rgb(51, 0, 51); /* Donkerpaars */
}

.swiper-slide:nth-child(10n) {
    background-color: rgb(0, 25, 13); /* Donkergroen */
}