*, *::after, *::before {
      box-sizing: border-box;
  }

  :root {
    font:1.2em/1.4 Arial, Helvetica, sans-serif;
  }

  .container{
    max-width: 72rem;
    margin-inline: auto;
    padding-inline: 1rem;
  }

  body {
    padding: 0;
    margin: 0;
  }

  header {
    background-color: #333;
    color: #fff;
    border: 5px solid #000;
  }

  header ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  header a {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 0.5em 1em;
  }

  header .title {
    font-size: 150%;
    font-style: italic;
    font-weight: bold;
    padding-block: 1em;
  }

  main {
    padding: 0 1em;
  }

  .cards {
    list-style: none;
    margin: 0;
    padding: 0;
  
    li {
      border: 5px solid #000;
      margin-block-end: 1em;
    }

    h2 {
      background-color: #333;
      color: #fff;
      margin: 0;
      padding: 0.5em 1em;
    }

    .inner {
      padding: 0.5em 1em;
    }
  }

  .sidebar {
    background-color: #333;
    border: 5px solid #000;
    padding: 0.5em 1em;
    color: #fff;
  }

  header{
    display: flex;
  }

  /*navigatie*/
  nav{
    max-width: 72rem;
    margin-inline: auto;
    display: flex;
    flex-direction: row;
    justify-content: end;

    ul{
      list-style: none;
      display: flex;
      flex-direction: row;
      align-items: center;

      li{
        padding: 0;
        flex-direction: columns;
      }
    }
  }

  .title{
    display: flex;
    flex-direction: row;
    justify-content: start;
    margin-inline-end: auto;
    padding: 0;
    
  }


  @media (min-width: 40em){
  /* cards*/
    .cards{
      display: flex;
      flex-direction: row;
      gap: 1rem;

      flex-wrap: wrap;
      li{
        flex: 0 1 15rem
      }
    }
    .sidebar{
      display: flex;
      flex-direction: column;
      justify-content: end;
    }

    main{
      display: flex;
    }

   }
  @media (min-width: 80em){}