img {
  max-width: 100%;
  height: auto;
  display: block;
}

header {
  background-color: #666;
  padding: 20px;
  text-align: center;
  font-size: 35px;
  position: relative;
  color: white;
}

/* HAMBURGER */
.hamburger {
  display: none;
  position: absolute;
  right: 20px;
  top: 25px;
  font-size: 30px;
  cursor: pointer;
}

/* MOBIL */
@media (max-width: 600px) {
  .hamburger {
    display: block;
  }

  nav {
    display: none;
  }

  nav.active {
    display: block;
  }

  section {
    flex-direction: column;
  }
}




h1

{
  color: green;
}

h2

{
  color: red;
}

h3

{
  color: brown;
}



.responsive {
  width: 100%;
  height: auto;
}

table, th, td {
  border: 1px solid black;
}

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}






/* Container for flexboxes */
section {
  display: -webkit-flex;
  display: flex;
}

/* Style the navigation menu */
nav {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: #ccc;
  padding: 20px;
}

/* Style the list inside the menu */
nav ul {
  list-style-type: none;
  padding: 0;
}

/* Style the content */
article {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  background-color: #f1f1f1;
  padding: 10px;
}

/* Style the footer */
footer {

  padding: 10px;
  text-align: center;
  color:white;

}

a {
  text-decoration: none;
  color:gray;

}

a:hover {
  text-decoration: underline;

}



/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 600px) {
  section {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}