/* Algemene stijl */
* {
  box-sizing: border-box;
}
h1 {
  font-size: 60px;
  text-align: center;
}
h2 {
  font-size: 15px;
}
p {
	font-size: 40px;
}
body {
  margin: 0;
  background: #7ea08e;
}
td {
  text-align: left;
  padding-left: 50px;
  padding-right: 50px;
  vertical-align: top;
}
.code {
  padding-right: 0px;
  border: solid 1px rgb(68, 71, 70);
  border-radius: 10px;
  background-color: rgb(40, 42, 44);
  color: white;
  font-family: 'comfortaa';
  font-size: 20px;
  text-align: left;
  padding-left: 100px;
  padding-right: 100px;
}
td.afbeelding {
  width: 35%;
  text-align: center;
}
td.text {
  width: 65%;
  padding-right: 0px;
}
.afbeelding.code img {
  border-radius: 20px;
  transition: transform 0.2s ease;
  max-width: 100%;
  display: block;
  padding-right: 0px;
  border: solid 1px rgb(68, 71, 70);
  border-radius: 10px;
  background-color: rgb(40, 42, 44);
  color: white;
  font-family: 'comfortaa';
  font-size: 20px;
  text-align: left;
  padding-left: 100px;
  padding-right: 100px;
}
.afbeelding img {
  border-radius: 20px;
  transition: transform 0.2s ease;
  max-width: 100%;
  display: block;
}
.afbeelding img:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
table {
  width: 100%;
  border: none;
  table-layout: fixed;
}
.table {
  width: 100%;
  border: none;
  table-layout: fixed;
  background-color: rgb(40, 42, 44);
}

.text {
  font-family: 'comfortaa';
  font-size: 20px;
  text-align: left;
  padding-left: 100px;
  padding-right: 100px;

}
.text1 {
  font-family: 'comfortaa';
  font-size: 20px;
  text-align: center;
  padding-left: 20%;
  padding-right: 20%;
}
/* Algemene stijl eindigd */

/* Navigatiebalk code van W3Schools*/
.topnav {
  display: flex;
  justify-content: center;
  background-color: #7ea08e;
}

.topnav a {
  display: inline-block;
  color: #f2f2f2;
  padding: 10px 15px;
  text-decoration: none;
  background-color: #f1f1f1;
  font-family: 'roboto';
}

.topnav a {
  color: black;
  padding: 17px;
  padding-left: 41.4px;
  padding-right: 41.4px;
  text-decoration: none;
  margin-bottom: 60px;
  margin-top: 130px;
  font-family: 'roboto';
}
/* Navigatiebalk code eindigd */

/* zorgt voor afronding */
.topnav a:first-child{ /* Links */
	border-top-left-radius: 60px;
	border-bottom-left-radius: 60px;}
.topnav a:last-child {  /* Rechts */
	border-bottom-right-radius: 60px;
	border-top-right-radius: 60px
}

/* Veranderd kleur wanneer navbar hover*/
.topnav a:hover {
  background-color: #5280bdc2;
  color: #f2f2f2;
}

/* Zorgt voor 'blop' wit in het midden */
.column {
  float: left;
  padding: 15px;
  padding-bottom: 100px;
  background: #FFFFFF;
  font-family: 'Comfortaa';
  border-radius: 50px;
  text-align: center;
}

/* Links en rechts van de 'blop' */
.column.side {
  width: 4%;
  background: #7ea08e;
}

/* Hoe wijdt de blop is */
.column.middle {
  width: 92%;
}

/* Geen idee meer wat dit is maar het zag er belangrijk uit, het doet ver niks */
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}