* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #CEBEB8;
    font-family: "Tahoma", sans-serif;
}

body {
    background: linear-gradient(-45deg, #0d0d0d, #1a1a1a, #262626, #0a0a0a);
    background-size: 400% 400%;
    animation: gradient 180s linear infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.title {
    display: flex;
    justify-content: center;
    color: #FC3C44;
    margin-top: 10px;
    margin-bottom: 20px;
}

.album-cards {
    display: flex;
    justify-content: center;
}

.card {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    margin: 0 0;
    width: 100%;
    max-width: 100%;
    max-height: 536px;
    background-color: #141414;
}

.card h2 {
    z-index: 300;

}




.album-img {
    max-width: 400px;
    z-index: 1;
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: -1;

}

.album-overlay {
    background-color: rgba(0, 0, 0, 0.7);
    color: #FC3C44;
    padding: 10px;
    text-align: center;
    grid-row-start: 1;
    grid-row-end: 1;
    grid-column-start: 1;
    grid-column-end: -1;
    z-index: 100;
    align-self: end;
}

.card-info {
    margin: 500 auto 0 auto;
    border-top: #F5F4F1 solid 1px;
    grid-column-start: 1;
    grid-row-start: 2;
    grid-row-end: -1;
    grid-column-end: -1;
    z-index: 100;
    display: grid;
    grid-template-columns: 1fr min-content 1fr;
    grid-template-rows: 1fr;
    width: 100%;
}

.avatar {
    width: 100px;
    height: 100px;
    border: #FC3C44 solid 2px;
    border-radius: 10em;
    margin: auto 0 auto 0;
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 1;
    grid-row-end: 2;
    justify-self: start;
    align-self: center;
    margin-left: 10px;
    object-fit: cover;
}

.card-info h2 {
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 1;
    justify-self: start;
    align-self: center;
}

.card-link {
    padding: 10px;
    text-decoration: none;
    background-color: #FC3C44;
    color: #F5F4F1;
    border-radius: 10px;
    grid-column-start: 3;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 1;
    justify-self: end;
    align-self: center;
    margin-right: 10px;
    transition: 0.2s;

}

.card-link:hover {
    background-color: #971e22;
    transition: 0.2s;
    cursor: pointer;
}


/* locatie kaart specefiek */
.location-card .card-info {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: min-content 1fr min-content min-content;
}

.location-card h2 {
    grid-row-start: 1;
    grid-row-end: 1;
    grid-column-start: 1;
    grid-column-end: -1;
    text-align: center;
    text-wrap: nowrap;
    width: 100%;
}

.location-card .card-info h2 {
    margin: 10px auto 0 auto;
}

.location-card p {
    grid-row-start: 2;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: -1;
    margin: 0 auto 0 auto;
    max-width: 250px;
}

.location-card .card-link {
    grid-row-start: 3;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 2;
    margin: 0;
    justify-self: start;
    text-wrap: nowrap;

}


.card p {
    grid-row-start: 2;
    grid-column-start: 1;
    grid-column-end: -1;
}


.swiper {
    width: 400px;
    height: 540px;
    background-color: none;
}

.swiper-slide {
    border: #F5F4F1 solid 5px;
    border-radius: 20px;
    box-shadow: #000 0px 0px 17px;
}

.swiper-button {
    color: #FC3C44 !important;
    margin: -200px;
}

@media only screen and (max-width: 600px) {

    .swiper-button-next,
    .swiper-button-prev,
    .swiper-button {
        display: none !important;
    }

    .swiper-slide {
        width: 275px !important;
    }

    .swiper {
        width: 300px !important;
        height: 470px;
    }

    .album-overlay {
        max-width: 275px;
    }

    .album-img {
        max-width: 300px;
    }

    .card-info {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: min-content max-content;
        gap: 1em;
        width: 275px;
    }

    .avatar {
        width: 75px;
        height: 75px;
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
        margin: 10px;
    }

    .card-info h2 {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
        justify-self: start;
        align-self: center;


    }

    .card-link {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 2;
        justify-self: center;
        margin-right: 20px;
    }
}



.buttons {
    display: flex;
    width: fit-content;
    margin: 25px auto 0 auto;
    gap: 2em;
}

#show-squad,
#show-locations {
    background-color: #686868;
    color: #FFF;
    border-radius: 5px;
    cursor: pointer;
    padding: 10px;
    border-radius: 10px;
}

#show-squad:active,
#show-locations:active {
    background-color: #FC3C44;
}