*{
    margin: 0;
}

body{
    background-color: rgb(255, 255, 255);
}

body{
    font-family: arial, sans-serif;
    background-color: white;
    color: black;
    transition: background-color 0.3s, color 0.3s;
}

.dark { 
    background-color: black;
    color:white;
}

button {
    padding: 20px 10px;
    cursor: pointer;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #2956b6;
}

ul li {
  float: left;
}

ul li a {
  display: block;
  color: rgb(255, 255, 255);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul li a:hover {
  background-color: #bb2e2e;
}

.container {
    display: grid;
    grid-template-columns: 10% 1fr 1fr 1fr 10%;
    grid-template-rows: 10% 1fr 1fr 1fr 1fr 1fr 10%;
    grid-gap: 15px;
}

.panel {
    background-color: rgba(73, 209, 209, 0.562);
    border-radius: 10px;
    padding: 10px;
}

.c1
{
    grid-column: 2/5;
    grid-row: 1/2;
}

.c2
{
    grid-column: 2/4;
    grid-row: 2/5;
}

.c3
{
    grid-column: 4/5;
    grid-row: 2/5;
}

.c4
{
    grid-column: 2/3;
    grid-row: 5/9;
}

.c5
{
    grid-column: 3/5;
    grid-row: 5/9;
}

.c6
{ 
    grid-column: 2/4;
    grid-row: 9/12;
}

.c7
{ 
    grid-column: 4/5;
    grid-row: 9/12;
}

.plaatje{
    border-radius: 15px;
    width: 475px;
}