* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  padding: 10px;
  background: rgba(255, 255, 255, 0.7);
}

/* Header/Blog Title */
.header {
  padding: 0px;
  text-align: center;
  background: rgba(255, 255, 255, 0.7);
}

.header h1 {
  font-size: 50px;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #707070;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* geeft aan dat pagina actief is*/
.topnav .focus {
  background-color: #a3a3a3;
  color: black;
}

/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {   
  float: left;
  width: 75%;
}

/* Right column */
.rightcolumn {
  float: left;
  width: 25%;
  background-color: #ffffff;
  padding-left: 20px;
}

/* Add a card effect for articles */
.card {
  background-color: rgb(211, 211, 211);
  padding: 20px;
  margin-top: 20px;
  border-radius: 25px;
}

/* Clear floats after the columns */
.row::after {
  content: "";
  display: table;
  clear: both;
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
  border-radius: 25px;
}

/*Dit zorgt ervoor dat sommige tekst mooi in het midden staat*/
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 10%;
}

/*Dit zorgt ervoor dat ik in de pagina van de winkelmand, een extra box kan hebben waar de naam van het kledingstuk + de hoeveelheid in staat*/
.card2 {
  background-color: #a3a3a3;
  padding: 10px;
  border-radius: 25px;
}

/*Dit zorgt ervoor dat de kledingstukken in alle paginas waar een bepaald kledingstuk centraal staat, mooi in het midden staat*/
.center2 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

/*Dit zorgt ervoor dat de tabel er goed uit ziet, de tekst in het midden staat en dat de achtergrondkleur goed is*/
table {
  background-color: #70707080;
  text-align: center;
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

/*Dit zorgt ervoor dat de border de goede kleur heeft en dat de tekst in het midden staat*/
td, th {
  border: 1px solid #dddddd;
  text-align: center;
  padding: 8px;
}

/*Dit zorgt ervoor dat je 2 verschillende kleuren ziet in de tabel, en dat het de hele tijd wisselt per row*/
tr:nth-child(even) {
  background-color: #dddddd;
}

/*Dit zorgt ervoor dat de lijsten bij de winkelwagen mooi zijn met een square*/
ul.c {list-style-type: square;}