/*------------------ basisopmaak --------------------*/
body {
	background-color: MintCream;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0;
}

/*------------------ vlakken --------------------*/
* {
  box-sizing: border-box;
}

 #wrapper { 
	max-width: 1000px;
  width: 100%;
	margin: auto;
	/*background-color: Yellow;*/
}
/*----------------header------------*/
header {
	height: 120px;
  background-color:#e0876a;
	color: white;
	text-align: center;
	padding: 5px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

header img {
 float: left;
  height: auto;
  width: 100px;
}
/*------------nav-------------*/
nav {
	height: 60px;
	background-color: #ffd9b3;
	padding: 5px;
}

/*---------menu----------*/
.menu {   
  float: left;
  width: 20%;
  text-align: left;
  flex: 1;
}

/*----------------- Right column-------------- */
.rightcolumn {
  float: left;
  width: 80%;
  background-color:#f2b5a7;

}

/* Clear floats after the columns */
.row::after {
  content: "";
  display: table;
  clear: both;
}
.plaatje{
  float: right;
  margin: 10px;
  padding:  20px;
  border: 4px dashed #e27889;
  border-radius: 10%;
}
.plaatjelinks{
  margin: 10px;
  padding: 15px;
 border: 4px dashed #e27889;
}

/*-------------------article---------------*/
article {
	/*background-color: Orange;*/
	padding: 10px;
  
}

article img{
  width: 200px;
  height: auto;
  border-radius: 10%;
 }

.img{
  width: 200;
  height: 150;
 }
/*----------------card slider--------------*/
.carousel{
  width: 100%;
  overflow-x: auto;
  margin: 3em auto;
  display: flex;
  gap: 1em;
  scroll-behavior: smooth; /*-------het scrollen tussen plaatjes gaat smoother-------*/
  scroll-snap-type: x mandatory;
}

.carousel::-webkit-scrollbar{
  display: none;
}

.carousel::scroll-button(right), .carousel::scroll-button(left){
  content: '→';
  border: none;
  background-color: var(--brand-color);
  font-family: Consolas;
  font-size: 3rem;
  color: white;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  padding-bottom: .1em;
  cursor: pointer; /*----pijltje------*/
}  

.carousel::scroll-button(right):disabled, .carousel::scroll-button(left):disabled{ /*-----het pijltje word grijs en kan niet verder scrollen---*/
  opacity: 0.5;
  cursor: auto;
}

.carousel::scroll-button(left){
  content: '←';
  position-area: left center;
}

.card{
  scroll-snap-align: start; /*--- het plaatje start aan het begin---*/
  flex: 0 0 20em;
  height: 12em;
  background-color: var(--primary-color);
  padding: 1em;
  border-radius: .5em;
  text-align: center;
  align-content: center;
}
/*----------------table------------------*/
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
  background-color: #fffdfc; 
}

th, td {
  border: 1px solid #f2b5a7; 
  padding: 8px;
  text-align: left;
}

th {
  background-color: #ffe5d9; 
  color: #7a3e2e;
}

tr:nth-child(even) {
  background-color: #fff0eb; 
}
/*----------------footer----------------*/
footer {
	height: 50px;
	background-color: #ffbf80;
	color: white;
	text-align: center;
	padding: 5px;
}

/*--------------mobiel------------------*/
@media screen and (max-width:768px) {
  .row, .menu, .rightcolumn{
    width: 100%;
  }
  .row{
    flex-direction: column;
  }

  header{
    flex-direction: column;
  }

  article img{
    float: none;
    display: block;
    margin: 0 auto 10px auto;
    max-width: 100%;
    margin-bottom: 10px;
  }

  .menu a{
    text-align: center;
    font-size: 15px;
  }
  
  table {
    font-size: 12px;
  }

  th, td {
    padding: 5px;
  }

  .card{
    flex: 0 0 100%;
  }
}


/*------------------ menu --------------------*/
.menu a {
  display: block; /* Links komen onder elkaar */
  width: 90%;
  padding: 12px; /* Add some padding */
  text-decoration: none; /* Haalt underline van links weg*/
  background-color:#e27889; 
  color: black; /* Zwarte tekstkleur */
}

.menu a:hover {
  background-color: #d15063; 
}

.menu a.active {
  background-color: #c83349; 
  color: white;
}