@media only screen and (min-width: 480px) and (max-width: 912px) {
  h1{
    font-size: 27px;
  }
  p{
    font-size: 16px;
  }
  h3{
    font-size: 5em;
  }
  h2{
    font-size: 16px;
  }

}



@media screen and (max-width: 480px) {
  h1{
    font-size: 16px;
  }
  p{
    font-size: 14px;
  }
  footer{
    font-size: 6px;
  }
  h3{
    font-size: 3em;
  }
  h2{
    font-size: 14px;
  }

  .container{
    display: grid;
    grid-template-areas:
      'wordsRight'
      'picLeft'
      'wordsLeft'
      'picRight';
    grid-template-columns: 1fr ;
    grid-template-rows: 1fr ;
    place-items: center;
  }
  .picLeft{
    grid-area: picLeft;
    margin: 1em;

    padding: 2px;
    /*align-items: float;*/

  }
  .wordsRight{
    grid-area: wordsRight;
    margin: 0.7em;
  }
  .picRight{
    grid-area: picRight;
    margin: 1em;

    padding: 2px;
    align-items: float;
  }
  .wordsLeft{
    grid-area: wordsLeft;
    margin: 0.7em;
  }

  /*ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 60px;
  }

  li a {
    display: block;
  }*/

  .attcon{
    display: contents;
  }
  .rarcon{
    display: contents;
  }



}