/* MOBILE */


      * {
        box-sizing: border-box;
      }

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

      body {
        padding: 0 0 1em;
      }

      /* CAN STAY SAME */
      header {
        background-color: #333;
        color: #fff;
        border: 5px solid #000;
      }

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

      header a {
        color: #FFF;
        text-decoration: none;
        display: inline;
        padding: 0.5em 1em;
       border-top: 1px solid #999;
      }

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

      main {
        padding: 0 1em;
      }

      .cards {
        list-style: none;
        margin: 0;
        padding: 0;
      }

      .cards li {
        border: 5px solid #000;
        margin-bottom: 1em;
      }

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

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

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

      p {margin-right: 10px;
      }

      /* tablet */

    @media screen and (min-width: 40em) {
    .cards {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr; 
        column-gap: 20px;
        row-gap: 20px;
    }

    nav ul {
        display: flex;
    }

    nav li {
        flex: 1;
    }

     header {
      /* 1 column 4 parts */
           grid-column: 1/span 4;
           display:flex;
           align-items: center;
           justify-content: flex-end;
    }

      header a{
            border-style:none;  
    }
      nav{
          margin-left:auto;
    }
}
    
    /* desktop
    display: grid creates grid row/column
    grid-template-columns creates 1 - X columns, fr is how much space is taken up
    column-gap is the space in between the columns; */

/*the 1st fr of this grid-template-columns controls SIDEBAR
5 FR GIVES PROPER SPACING TO ALL CARDS EXCEPT FOR SIDEBAR */
    @media screen and (min-width: 70em) {
    main {
        display: grid;
        grid-template-columns: 3fr 1fr; 
        column-gap: 20px;
    }

    /* margin-bottom of 0 is added to the cards, so sidebar aligns*/
    .cards {
        margin-bottom: 0;
        padding-bottom: 10px;
    }

    .sidebar {
        border-top: 1px solid #ccc;
        margin-top: 2em;
    }