@media screen and (min-width:600px){

  .heading {
    font-size: 1em;
  }
  .modal {
    overflow: hidden;
    height: auto;
  }
  /* Modal Content */
  .level-modal-content .intro {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
  }
  .level.easy {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  .level.medium {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  .level.hard {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 4;
  }
  .level.expert {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;
  }
  .level.super-expert {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 4;
    grid-row-end: 5;
  }
  /* theme selections styling */
  .selectPack {
    display: inline-block;
  }
  .Easy .theme-selection-area .intro {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
  }
  .Easy .selectPack.one {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  .Easy .selectPack.two {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  .Easy .selectPack.three {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  .theme-selection-area .intro {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
  }
  .selectPack.one {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  .selectPack.two {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  .selectPack.three {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  .Expert .theme-selection-area .intro {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
  }
  .Expert .selectPack.one {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  .Expert .selectPack.two {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  /*
   * Styles for the deck of cards
   */
  /* styling for all decks */
  /* styling for easy decks */
  .deck.easy {
    height: 90%;
    width: 90%;
    max-width: 580px;
  }
  .deck.easy .card {
      height: 7em;
      width: 7em;
  }
  /* medium decks styling */
  .deck.medium {
    max-width: 540px;
  }
  .deck.medium .card {
      height: 7em;
      width: 7em;
  }
  /* styling for hard decks */
  .deck.hard {
    max-width: 520px;
  }
  .deck.hard .card {
    height: 6.5em;
    width: 6.5em;
  }
  /* styling for expert decks */
  .deck.expert {
    max-width: 560px;
  }
  .deck.expert .card {
    height: 7em;
    width: 7em;
  }
  /* winning modal styling */
  .congrats {
    font-size: 0;
  }
  .congrats.live {
    font-size: 2.5em;
  }
  .winModal {
    /*top: 0;*/
    /*left: 0;*/
    width: 50%;
    margin: auto;
    font-size: 1.2em;
    overflow: hidden;
  }
  /* end of screen min-width 600px */
}
@media screen and (min-width:800px){
  .modal {
      /*left: 20%;*/
      /*top: 10%;*/
      /*width: 60%;*/
      height: auto;
      max-height: 100%;
      overflow: hidden;
  }
  .level-modal-content .intro {
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 2;
  }
  .level.easy {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  .level.medium {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  .level.hard {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  .level.expert {
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  .level.super-expert {
    grid-column-start: 5;
    grid-column-end: 6;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  .Easy .selectPack.one {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  .Easy .selectPack.two {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  .theme-selection-area .intro {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
  }
  .selectPack.one {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  .selectPack.two {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  .selectPack.three {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  .Expert .theme-selection-area .intro {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
  }
  .Expert .selectPack.one {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  .Expert .selectPack.two {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  /* Styles for the deck of cards */
  /* styling for easy decks */
  .deck.easy {
    width: 42%;
    height: 95%;
    max-width: 740px;
  }
  .deck.easy .card {
    height: 9em;
    width: 9em;
  }
  /* medium decks styling */
  .deck.medium {
    width: 60%;
    height: 90%;
    max-width: 680px;
  }
  .deck.medium .card {
    height: 9em;
    width: 9em;
  }
  /* styling for hard decks */
  .deck.hard {
    width: 90%;
    height: 90%;
    max-width: 740px;
  }
  .deck.hard .card {
    height: 9em;
    width: 9em;
  }
  /* styling for expert decks */
  .deck.expert {
    width: 80%;
    height: 95%;
    max-width: 720px;
  }
  .deck.expert .card {
    height: 8em;
    width: 8em;
  }  /* styling for super expert decks */
  .deck.super-expert {
    width: 70%;
    height: 95%;
    max-width: 720px;
  }
  .deck.super-expert .card {
    height: 7em;
    width: 7em;
  }
  /* congratulations animation styling */
  .congrats {
    font-size: 0;
  }
  .congrats.live {
    font-size: 3em;
    left: 35%;
  }
  /* winning modal styling */
  .winModal {
    /*top: -30%;*/
    /*left: 0%;*/
    margin: auto;
    font-size: 1.2em;
  }

  /*.expert-composers .winModal,*/
  /*.expert-instruments .winModal,*/
  /*.expert-notes .winModal {*/
    /*top: -64%;*/
  /*}*/

  /*.super-expert-composers .winModal,*/
  /*.super-expert-instruments .winModal,*/
  /*.super-expert-notes .winModal {*/
    /*top: -60%;*/
  /*}*/
}

@media (max-width: 980px) {
  #game-area{
    max-width: 736px;
    margin-left: auto;
    margin-right: auto;
  }
  #game-area img.level-select{
    height: 3em!important;
    margin-right: 0 !important;
  }
  #game-area .card img{
    margin-right: 0 !important;
    width: 100%!important;
  }
}