/*SCSS variables*/
$font1: "Delius Swash Caps", Arial, Helvetica, sans-serif;
$font2: "Delius", Helvetica, sans-serif;
$primary-color: #FF6E01;
$secondary-color: #01A1DE;
$base-color1: white;
$base-color2: black; 
$accent-color1: #003f58;
$accent-color2: #385300;

$p-size1: 14px;
$p-size2: 16px;
$p-size3: 18px;

$button-size1: 1.25rem;
$button-size2: 1.5rem;
$button-size3: 2rem;

$img-width: 80%;
$img-width2: 90%;
$img-width3: 100%;

  /*MQ for Tabloid*/
  @media (min-width: 650px) {
    /*Grid system*/
    navbar {
      grid-column: span 3;
      grid-row: span 1;
    }
    footer {
      grid-column: span 3;
      grid-row: 3 / span 1;
    }
    /*Navigation 2 rows*/
    /*Size of nav button*/

    nav a {
      text-transform: none;
      font-size: $button-size2;
    }
    nav ul {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-flow: row wrap;
              flex-flow: row wrap;
      -webkit-box-pack: space-evenly;
          -ms-flex-pack: space-evenly;
              justify-content: space-evenly;
    }
    nav li:nth-child(even) {
      width: 40%;
      float: right;
      padding: 0.4em;
    }
    nav li:nth-child(odd) {
      width: 40%;
      float: left;
      padding: 0.4em;
    }
    nav a:hover {
        transform: rotate(-5deg);
    }
    /*logo sized correctly*/
    navbar img {
      width: $img-width3;
      max-width: 300px;
    }
      /*Aside Layout with Calc flex system*/
    .aside {
        margin: 0 auto;
        display: flex;
        flex-flow: row wrap;
        --columns: 12;
    }
    h2, header {
        --width: 12;
        --initial-basis: calc(var(--width) / var(--columns) * 100%);
        --gap: calc((var(--columns) - var(--width)) * 0.05%);
        flex-basis: calc(var(--initial-basis) - var(--gap));
    }
    main, sidebar {
        --width: 6;
        --initial-basis: calc(var(--width) / var(--columns) * 100%);
        --gap: calc((var(--columns) - var(--width)) * 0.05%);
        flex-basis: calc(var(--initial-basis) - var(--gap));
    }
    /*Type Scale 2*/
    p {
      font-family: $font2;
      font-size: $p-size2;
      text-align: left;
      color: #7ab800;
    }
    h3 {
      font-family: $font2;
      text-align: center;
      font-size: calc((((var(--updated-p-size) * 1.125) * 1.125) * 1.125) * 1.125);
      color: $accent-color1;
    }
    h2 {
      font-family: $font1;
      font-size: calc(((((var(--updated-p-size) * 1.125) * 1.125) * 1.125) * 1.125) * 1.125);
      color: #01A1DE;
      text-decoration: underline;
      text-align: center;
    }
    /*Aside*/
    img {
      width: $img-width3;
      max-width: none;
      justify-content: center;
    }
    /*Footer*/
    .social {
          display: flex;
          flex-direction: row wrap;
          justify-content: space-evenly;
          column-gap: 2rem;
      }
      footer a {
          font-family: $font2;
          font-weight: bold;
          text-transform: none;
          letter-spacing: 0.25rem;
          color:  $secondary-color;
          background-color: $base-color1;
          border: dotted 2px $secondary-color;
          border-radius: 2rem 0 2rem 0;
          display: block;
          text-align: center;
          padding: 0.5rem 2rem;
          margin: 0.5rem;
          font-size: $button-size2;
          text-decoration: none;
      }
      footer a:hover {
          transform: rotate(-5deg);
      }
  }
  /*MQ for Computer Screen*/
  @media (min-width: 1000px) {
    /*Grid System*/
    navbar {
      grid-column: span 3;
      grid-row: span 1;
    }
    .aside {
        grid-column: span 3;
        grid-row: 2 / span 1;        
    }
    footer {
      grid-column: span 3;
      grid-row: 3 / span 1;
    }
  /*Type Scale 3*/
  p {
    font-family: "Delius", Arial, Helvetica, sans-serif;
    font-size: $p-size3;
    text-align: left;
    color: #7ab800;
  }
  h3 {
    font-family: "Delius", Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: calc((((var(--updated-p-size-1) * 1.125) * 1.125) * 1.125) * 1.125);
    color: $accent-color1;
  }
  h2 {
    font-family: "Delius Swash Caps", Arial, Helvetica, sans-serif;
    font-size: calc(((((var(--updated-p-size-1) * 1.125) * 1.125) * 1.125) * 1.125) * 1.125);
    color: $secondary-color;
    text-decoration: underline;
    text-align: center;
  }
  /*Navigation*/
  navbar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    justify-items: center;
  }
  /*Canceling 2 rows make to be 1 row*/
  nav li:nth-child(odd) {
    width: auto;
    float: none;
    padding: 0.25em 2em;
  }
  nav li:nth-child(even) {
    width: auto;
    float: none;
    padding: 0.25em 2em;
  }
  nav a {
    padding: 0.5rem 2rem;
    font-size: $button-size3;
  }
  /*logo sized correctly*/
  navbar img {
    width: $img-width3;
    max-width: 400px;
    margin-top: 1.5rem;
  }
}
/*# sourceMappingURL=playtime.css.map */