footer { 
  text-align:right; 
}

*{
  box-sizing: border-box;
}

[class*="col-"] {
  float: left;
  padding: 10px;
  width: 100%;
}

 .topnav {
  position: fixed;
}

.mobielknop {
  top: 5;
  border-style: solid;
  background-color: white; 
  padding: 0px 5px;
  text-decoration: none;
  color: black;
}

.mobielknop:hover, .mobielknop:active {
  background-color: black;
  color: white; 
  border-color: black;
}

@media (prefers-color-scheme: dark) {
  body {
	background-color: black;
	color: gray;
  }
  .mobielknop {
    background-color: gray;
	border-color: black;
	color: black;
  }
  .mobielknop:hover, .mobielknop:active {
    background-color: black;
	border-color: gray;
	color: gray;
  }
}
 
@media only screen and (min-width: 2001px) {
  .col-1 {width: 5%;}
  .col-2 {width: 16.66%;}
  .col-8 {width: 56.66%;}
  .col-8 img {
    width: 40%;
    height: auto;
  }
  .mobielknop {display: none;}
}

@media only screen and (min-width: 960px) and ( max-width: 2000px) {
  .col-1 {display: none;}
  .col-2 {width: 16.66%;}
  .col-8 {width: 66.66%;}
  .col-8 img {
    width: 45%;
    min-width: 450px;
    height: auto;
  }
  .mobielknop {display: none;}
}

@media only screen and (max-width: 959px) {
  .col-1 {display: none;}
  .col-2 {display: none;}
  .col-8 img {
    width: 100%;
    height: auto;
    margin-bottom: 50px;
  }
}