/* CSS for screen size ranges <= 392px AND >= 450px */


/* Shrinking for very narrow screen widths, from 393px - 449px starting range */


@media screen and (max-width: 392px) {

  /* Nav */

  #flex-link-list {
    justify-content: center;
    width: 92%;
    margin: 1em .5em 0 0;
    padding-left: .7em;
  }

  #flex-social-list {
    justify-content: center;
    width: 8%;
    margin: 1.5em 0 0;
  }

  #flex-social-list li {
    margin: 0 .5em;
  }


  /* Main Styles */

  body {
    height: 340vh;
  }

  #container {
    grid-template-rows: 12% 70% 15% 3%; 
  }

  #laptop {
    width: 80%;
  }

  #screen {
    width: 87.5%;
    height: 59%;
    margin: .5em 0 0 4.42em;
  }

  #outerkb {
    width: 87%;
    height: 32%;
    margin: .15em 0 0 .9em;
  }

  #edge {
    width: 81%;
    margin: .1em 0 0 -1.6em;
  }

  #copy {
    margin: 1.5em auto;
  }

}


/* Increasing for wider screen widths, from 393px - 449px starting range. Mobile First approach. */


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

  /* Nav */

  #flex-link-list {
    justify-content: center;
    width: 92%;
    margin: 1em .75em 0 0;
    padding-left: .7em;
  }

  #flex-link-list li {
    padding: 1em .5em .75em;
  }

  #flex-social-list {
    justify-content: center;
    width: 8%;
    margin: .75em .25em 0 0;
  }

  #flex-social-list li {
    margin: 0 .5em;
  }


  /* Main Styles */

  body {
    height: 232vh;
  }

  #container {
    grid-template-rows: 15% 60% 21% 4%; 
  }

  #screen {
    width: 57%;
    height: 57%;
    margin: 1em 0 0 10.55em;
  }

  #interface {
    font-size: 1rem;
  }

  #outerkb {
    width: 57%;
    margin: .15em 0 0 7.3em;
  }

  #edge {
    width: 53.5%;
    margin: .1em 0 0 5.25em;
  }

}


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

  /* Nav */

  #flex-link-list {
    justify-content: space-around;
    width: 78%;
    margin: 1em 0 0;
    padding-left: .5em;
  }

  #flex-link-list li {
    height: 5em;
    padding: 1em .5em .5em;
  }

  #flex-social-list {
    flex-direction: row;
    justify-content: space-evenly;
    align-items: flex-start;
    width: 22%;
    margin: 1.5em 2.5em 0 0;
  }

  #flex-social-list li {
    margin: 0 .3em;
    padding: .5em 0 1em;
  }

  .social-icons {
    margin: 0 .1em;
  }


  /* Main Styles */

  body {
    height: 225vh;
  }

  #container {
    grid-template-rows: 16% 53% 27% 4%; 
  }

  #flex-summary {
    padding: 0 2em;
  }

  #screen {
    height: 59%;
    margin: 1.2em 0 0 13.05em;
  }

  #interface {
    font-size: 1.1rem;
  }

  #outerkb {
    margin: .15em 0 0 9em;
  }

  #edge {
    width: 54.2%;
    margin: .1em 0 0 6.1em;
  }

}


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

  /* Nav */

  #flex-link-list {
    justify-content: center;
    width: 73%;
    padding-left: 1.5em;
  }

  #flex-link-list li {
    height: 4em;
    padding: .8em .5em .2em;
  }

  #flex-social-list {
    justify-content: center;
    width: 27%;
    margin: 1.5em 1.5em 0 0;
  }

  #flex-social-list li {
    margin: 0 .3em;
  }


  /* Main Styles */

  body {
    height: 185vh;
  }

  #container {
    grid-template-rows: 13% 53% 28% 6%; 
  }

  #flex-summary {
    padding: 0 3em;
  }

  #screen {
    width: 42%;
    height: 62%; 
    margin: .5em 0 0 20.05em;
  }

  #interface {
    font-size: 1.12rem;
  }

  #outerkb {
    width: 42%;
    margin: .15em 0 0 16.6em;
  }

  #edge {
    width: 39.7%;
    margin: .1em 0 0 14.3em;
  }

  #copy {
    margin: 1.5em auto;
  }

}


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

  /* Nav */

  #flex-link-list {
    justify-content: space-between;
  }

  #flex-link-list li {
    padding: 1em .5em .1em;
  }


  /* Main Styles */

  body {
    height: 170vh;
  }

  #container {
    grid-template-rows: 15% 45% 34% 6%; 
  }

  #screen {
    width: 37.5%;
    margin: .6em 0 0 22em;
  }

  #outerkb {
    width: 37.5%;
    margin: .15em 0 0 18.2em;
  }

  #edge {
    width: 35.9%;
    margin: .1em 0 0 15.5em;
  }

}


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

  /* Nav */

  #flex-link-list li {
    height: 3.5em;
    padding: 1.1em .5em 0;
  }


  /* Main Styles */

  body {
    height: 160vh;
  }

  #container {
    grid-template-rows: 15% 48% 31% 6%; 
  }

  #screen {
    width: 33%;
    height: 66%; 
    margin: .1em 0 0 26em;
  }

  #interface {
    font-size: 1.15rem;
  }

  #outerkb {
    width: 33%;
    margin: .15em 0 0 22.7em; 
  }

  #edge {
    width: 31.5%;
    margin: .1em 0 0 20.53em;
  }

}


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

  /* Nav */

  #flex-link-list {
    justify-content: space-around;
  }

  #flex-social-list li {
    margin: 0 .5em;
  }


  /* Main Styles */

  #screen {
    width: 30%;
    margin: .1em 0 0 30em; 
  }

  #outerkb {
    width: 30%;
    margin: .15em 0 0 26.7em; 
  }

  #edge {
    width: 28.5%;
    margin: .1em 0 0 24.54em;
  }

}


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

  /* Main Styles */

  body {
    height: 165vh;
  }

  #container {
    grid-template-rows: 16% 46% 32% 6%; 
  }

  #screen {
    width: 24%;
    margin: 0 0 0 38.26em;
  }

  #outerkb {
    width: 24%;
    margin: .15em 0 0 34.7em;
  }

  #edge {
    width: 22.9%;
    margin: .1em 0 0 32.3em;
  }

}


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

  /* Nav */

  #flex-social-list li {
    margin: 0 .7em;
  }


  /* Main Styles */

  body {
    height: 160vh;
  }

  #container {
    grid-template-rows: 17% 36% 41% 6%; 
  }

  #screen {
    width: 23%;
    margin: 0 0 0 49.37em;
  }

  #outerkb {
    width: 23%;
    margin: .15em 0 0 45em;
  }

  #edge {
    width: 22.1%;
    margin: .1em 0 0 41.8em;
  }

}