/* BEGIN GEZAMENLIJK */

* {
    /* Zorgt ervoor dat de padding en border bij de breedte horen */
    box-sizing: border-box;
}

html {
    /*scrollen in html-element stopt 5em van de bovenkant en gaat smooth*/
    scroll-padding-top: 5em;

    @media (prefers-reduced-motion: no-preference) {
        scroll-behavior: smooth;
    }
}

body {
    color: white;
    background-color: #351fb7;
    margin: 0;

    /* Roboto font */
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

h1 {
    font-size: 3em;
    text-align: center;

    @media (min-width: 768px) {
        font-size: 3.5em;
    }

    @media (min-width: 992px) {
        font-size: 4em;
    }

    @media (min-width: 1200px) {
        font-size: 4.5em;
    }
}

/* EINDE GEZAMENLIJK */

/* BEGIN SIEUWKE */

/* Header met navigatie */
header {
    display: flex;
    justify-content: space-evenly;
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 1rem;
    font-size: small;
    background-color: #150d3d;
    color: #ffffff;
    max-width: 100vw;

    a {
        color: white;
        /*Lijn onder hyperlink weggehaald*/
        text-decoration: none;
    }

    a:visited {
        /*Kleur van link veranderd als je op de site bent geweest*/
        color: white;
    }

    a:focus,
    a:hover {
        /* Kleur van link veranderd als je er overheen hovert*/
        color: #f35279;
        cursor: pointer;
    }

    a:active {
        /* Kleur van link veranderd als je er op klikt */
        color: #ff92ad
    }

    @media (min-width: 768px) {
        font-size: 1em;
    }

    @media (min-width: 992px) {
        font-size: 1.2em;
    }

    @media (min-width: 1200px) {
        font-size: 1.5em;
    }
}

/* Carousel */
#squad-page-1j {
    /*Carousel sectie*/
    height: 15rem;
    margin: auto;
    position: relative;
    width: 100%;
    display: grid;
    overflow: hidden;
    background-color: #25167a;

    @media (min-width: 768px) {
        height: 18rem;
    }

    @media (min-width: 992px) {
        height: 20rem;
    }

    @media (min-width: 1200px) {
        height: 22rem;
    }
}

/*Animatie vak*/
.slide-track {
    display: flex;
    /* Breedte slide-track = individule slide (.profile width) x totale aantal slides (23 foto's x 2) */
    width: calc(17em * 46);
    animation: scroll 80s linear infinite;
}

.slide-track:hover {
    /* Animatie stopt als je over de slide-track hovert */
    animation-play-state: paused;
}

/*Animatie vak dat scrollt*/
@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        /* Beweegt de slide-track naar links (.profile -width) voor de helft van de breedte van de slide-track (46 foto's / 2 = 23) */
        transform: translateX(calc(-17em * 23));
    }
}

/* Foto's met namen */
.profile {
    width: 11em;
    margin: 1rem 0.5rem 0;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    perspective: 100px;

    @media (min-width: 768px) {
        margin: 1rem 1.5rem 0;
    }

    @media (min-width: 992px) {
        width: 15em;
    }

    @media (min-width: 1200px) {
        width: 17em;
    }
}

/* Foto met tekstvak */
.profile div {
    width: 11em;
    aspect-ratio: 1;
    grid-row-start: 1;

    @media (min-width: 768px) {
        width: 13rem;
    }

    @media (min-width: 992px) {
        width: 15rem;
    }

    @media (min-width: 1200px) {
        width: 17rem;
    }
}

.profile div:hover {
    transform: translateZ(10px);
    transition: transform 1s;
}

/* Foto */
.profile img {
    display: block;
    object-fit: cover;
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, .2);
    transition: .25s .15s;
}

/* Gradient Shadows zijkanten van de carousel */
#squad-page-1j::before,
#squad-page-1j::after {
    background: linear-gradient(to right, #25167a 0%, rgba(255, 255, 255, 0) 100%);
    content: '';
    height: 100%;
    position: absolute;
    width: 4%;
    z-index: 2;
}

#squad-page-1j::before {
    left: 0;
    top: 0;
}

#squad-page-1j::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
}

/* EINDE SIEUWKE */

/* BEGIN MAARTEN */

#visitekaartjes {
    /* opmaak box met titel */
    background-color: #25167a;

    /* spacing van de titel */
    margin: 2em;
    margin-bottom: 0em;
    padding: 1em;
    padding-left: 2em;

    /* geen border-radius links- en rechtsonder om aan de .kaartjes te plakken */
    border-radius: 25px 25px 0px 0px;
}

.kaartjes {
    /* opmaak box met kaartjes*/
    background-color: #25167a;

    /* spacing van de visitekaartjes */
    margin: 2em;
    margin-top: 0em;
    padding: 2em;
    padding-top: 0em;

    /* geen border-radius links- en rechtsboven om aan de #visitekaartjes te plakken */
    border-radius: 0px 0px 25px 25px;

    /* kaartjes gaan in één kolom bij een paginabreedte van minder dan 750px */
    columns: 1;
    column-gap: 1em;

    /* mediaqueries */
    @media (min-width: 750px) {
        /* kaartjes gaan in twee kolommen bij een paginabreedte tussen 750px en 959px */
        columns: 2;
    }

    @media (min-width: 960px) {
        /* kaartjes gaan in drie kolommen bij een paginabreedte vanaf 960px */
        columns: 3;
    }
}

.kaartje {
    /* opmaak kaartjes */
    width: 100%;
    border-radius: 25px;
    margin-bottom: 1em;
    box-shadow: 4px 8px 8px rgb(0 0 0 / 50%);

    /* animatie */
    transition: transform 0.25s ease-in-out;
}

.kaartje:hover {

    /* animatie alleen als de gebruiker animation effects aan heeft staan */
    @media (prefers-reduced-motion: no-preference) {
        transform: scale(1.025);
        box-shadow: 8px 16px 16px rgb(0 0 0 / 25%);
    }
}

/* EINDE MAARTEN */

/* BEGIN KEVIN */

/* donker vlak achter de imgs */
#amstelcampus {
    background-color: #25167a;
    margin: 2em;
    padding: 1em 1em 1em 2em;
    border-radius: 25px;
}

/* De grid van de imgs van de amstelcampus */
#amstelcampus ul {
    align-content: center;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
    padding: 20px;
    margin: 0;
    list-style-type: "";

    @media (width > 750px) {
        grid-template-columns: 1fr 1fr;
    }
}

#amstelcampus img {
    width: 100%;
}

/* (dit is de footer) */
footer {
    background-color: #150d3d;
    height: 100px;
    width: 100%;
    text-align: center;
    padding-top: 10px;
    margin-top: 2em;
}

.link-footer {
    text-decoration: none;
    color: white;
    margin: 10px;
}

/* EINDE KEVIN */