/* YOU ARE HAVING ISSUES WITH THE MEDIA FUNCTIONS AND GETTING THE LARGER ONE TO WORK PROPERLY

    


    /*
    font family calls:

    Serif: 
    font-family: 'Rosarivo', serif;

    Sans serif: 
    font-family: 'Yantramanav', sans-serif;


    Possible Colors:
    Green: #D6D98F
    Cream: #F2F0D5
    Medium Brown: #BF9B7A
    Dark Brown: #402E24
    un-sat. Brown: #735E51


    Old Colors:
    #332E20
    #EFE9D8
    */

/*    * {
      border: 1px solid black;
    }*/


    body {
      color: #402E24;
      font-family: 'Rosarivo', serif;
      background-color: #F2F0D5;
    }


    .info-card {
      width: 75%;
      margin: auto;
    }

    h2 {
      font-size: 3em;
      font-family: 'Yantramanav', sans-serif;
    }

    h3 {
      font-size: 2em;

    }

    h1, h3, form {
      text-align: center;
      font-family: 'Yantramanav', sans-serif;
    }



    p, ul ul li {
      color: #735E51;

    }

    #intro-p {
      font-size: 1.6em;
    }

    p {
      padding: 20px;
      font-size: 1.2em;
    }


    table {
      border: 1px solid black;
      background-color: #D6D98F; 
      color: #402E24;
      margin: auto;
      width: 100%;

    }

    td, tr, th {
      border: 1px solid black;
      margin: auto;
      padding: 10px;
    }


    th {
      background-color:  #735E51; 
      color: #D6D98F;
      font-size: 1.25em;
      font-family: 'Yantramanav', sans-serif;
    } 

    table caption {
      font-size:  2em;
      font-weight: bold;
      font-family: 'Yantramanav', sans-serif;
      padding: 10px;
    }

    footer {
      text-align: center;
      font-size: 0.55em;
    }

    a {
      color: #BF9B7A;
    }



/* tablet styles */
@media only screen and (min-width: 600px) and (max-width: 800px) {
  figure {
    display: none;
    
  }


  h1 {
    font-size: 5em;
  }

  h2, h3 {
    text-align: center;
  }


  ul li {
    text-align: center;
    list-style-type: none;
    padding: 5px;
    font-family: 'Yantramanav', sans-serif;
    font-size: 2em;
    padding: 10px;
  }


  ul ul li {
    text-align: left;
    list-style-type: disc;
    font-size: 0.6em;
    font-family: 'Rosarivo', serif;

  }

  table caption {
      font-size:  1.75em;

}


}


/* desktop styles */
@media only screen and (min-width: 801px) {

      body {
      background-color: #F2F0D5;

    }


    h1 {
      font-size: 6em;
    }



    figure {
      margin: auto;
      width: 60%;
    }

    img {
      width: 98%;
      border-radius: 50%;
      border: solid 5px #BF9B7A;
    }

    figcaption {
      font-style: italic;
      text-align: center;
      color: #735E51;
    }


    ul ul li {
      font-family: 'Rosarivo', serif;
      padding: 5px;
    }

    ul li {
      font-family: 'Yantramanav', sans-serif;
      padding: 10px;
    }

/* I had a wayy easier time getting things to grid out properly just using the ul references instead of a grid container, but for grading sake, 
there is still a grid container*/
    ul {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 30px;
      margin: auto;
      font-size: 2em;
    }

    ul ul {
      display: grid;
      grid-template-columns: 1fr;
      font-size: .6em;
    }



}