/**Font van Google*/
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&display=swap');

body {
  padding: 0;/*ruimte van de tekst tot de rand van het HTML element*/
  margin: 0; /*ruimte van het HTML element en de omgeving*/
  background-color: #17141d;
  color: white;/*Witte tekst*/
  font-family: 'DM Mono', monospace; /*font dat hiervoor ingeladen was*/
}

.kaart-lijst {
  display: flex; /*Zet de elementen op een rij*/
  padding: 3rem;
  overflow-x: scroll;
}

/*Customize de scrollbar met gradient, afronding en schaduw*/
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  width: 0px;
  background: transparent;
}

::-webkit-scrollbar-track {
  background: linear-gradient(90deg,#201c29,#201c29 1px,#17141d 0,#17141d);
}

.kaart {
  display: flex;
  position: relative;/*Ten opzichte van de andere elementen in de rij*/
  flex-direction: column;/*Dit zorgt ervoor dat alle content in de kaart verticaal weergeven wordt*/
  height: 75vh;
  width: 400px;
  min-width: 345px; /*zodat de kaart nooit minder dan 250px zichtbaar is */
  padding: 1.5rem;

  border-radius: 16px; /*Afronding van de hoeken*/
  background: #17141d;
  box-shadow: -1rem 0 3rem #000; /*geef de kaarten een schaduw*/

  transition: .2s;/*animeersnelheid*/
}

/*Wanneer de muis boven de kaart hangt*/
.kaart:hover {
  transform: translateY(-1rem);/*laat de kaart 1 fontsize pixels omhoog gaan*/

}

/*Alle kaarten na de geselecteerde kaart --> laat deze opzij springen*/
.kaart:hover~.kaart {
  transform: translateX(130px);
}

/*Laat de kaarten over de kaarten aan de linkerkant hangen*/
.kaart:not(:first-child) {
  margin-left: -130px;
}

/*Wanneer de muis boven de kaart hangt*/
.kaart:active {
  transform: translateY(-1rem);/*laat de kaart 1 fontsize pixels omhoog gaan*/

}

/*Alle kaarten na de geselecteerde kaart --> laat deze opzij springen*/
.kaart:active~.kaart {
  transform: translateX(130px);
}

/*Laat de kaarten over de kaarten aan de linkerkant hangen*/
.kaart:not(:first-child) {
  margin-left: -130px;
}

/*Opmaak header*/
.titel-kaart {
  margin-bottom: auto;
}

/*opmaak p tekst*/
.titel-kaart p {
  font-size: 20px;
  margin: 0 0 1rem;
  color: #7a7a8c;
}

/*opmaak header 2 */
.titel-kaart h2 {
  font-size: 25px;
  margin: .25rem 0 auto;
  text-decoration: none;
  color: inherit;
  border: 0;
  display: inline-block;
  cursor: pointer;
}

/*Geef de tekst een gradient*/
.titel-kaart h2:hover {
  background: linear-gradient(90deg,#ff8a00,#e52e71);
  text-shadow: none;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

/*fotos schalen*/
.kaart-algoritme {
  margin: 3rem 0 0;
  display: grid;
  grid-template-columns: 75px 1fr;/*breedte en hoogte foto*/
  align-items: center;
  position: relative;
}

.foto-algoritme {
  grid-area: auto;
  align-self: start;
  position: relative;
  box-sizing: border-box;
}

.foto-algoritme img{
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 16px 10px;
}

.halve-cirkel {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 48px;
  fill: none;
  stroke: #c60000;
  stroke-width: 8;
  stroke-linecap: round;
  pointer-events: none;
}

.naam-algoritme {
  font-size: 25px;
}

.naam-algoritme-prefix {
  font-size: 25px;
  font-style: normal;
  font-weight: 700;
  color: #7a7a8c;
}

/*laat de hyperlink niet blauw zien*/
a {
  color: inherit;
}