/*SCSS variables*/
/*Wrapper and Child*/
@media screen {
  .wrapper {
    display: grid;
    grid-gap: 1rem;
    font-family: Arial, sans-serif;
  }
  header, article, aside, footer, main {
    padding: 1em;
    border-radius: 1em;
    box-shadow: 0 0 8px 8px white inset;
  }
  /*Type Scale*/
  :root {
    --base-size: 14px;
      --type-scale: 1.125;
      --h5: calc(var(--base-size) * var(--type-scale));
      --h4: calc(var(--h5) * var(--type-scale));
      --h3: calc(var(--h4) * var(--type-scale));
      --h2: calc(var(--h3) * var(--type-scale));
      --h1: calc(var(--h2) * var(--type-scale));
  }
  /*mixin*/
  p {
    font-family: "Delius", Helvetica, sans-serif;
    text-align: left;
    font-size: var(--base-size);
    color: #FF6E01;
    color: #385300;
  }

  h6 {
    font-family: "Delius", Helvetica, sans-serif;
    text-align: left;
    font-size: var(--base-size);
    color: #FF6E01;
    font-size: 16px;
    text-align: right;
  }

  h5 {
    font-family: "Delius", Helvetica, sans-serif;
    text-align: left;
    font-size: var(--h5);
    color: #FF6E01;
  }

  h4 {
    font-family: "Delius", Helvetica, sans-serif;
    font-size: var(--h4);
    text-align: justify;
    color: #003f58;
  }

  h3 {
    font-family: "Delius", Helvetica, sans-serif;
    font-size: var(--h3);
    text-align: justify;
    color: #003f58;
  }

  /*mixin*/
  h2 {
    font-family: "Delius Swash Caps", Arial, Helvetica, sans-serif;
    font-size: var(--h2);
    color: #01A1DE;
    text-decoration: underline;
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg);
  }

  h1 {
    font-family: "Delius Swash Caps", Arial, Helvetica, sans-serif;
    font-size: var(--h1);
    text-decoration: underline;
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg);
    color: #FF6E01;
  }
  /*Contact Page font styling*/
  .contact  h4 {
    font-family: "Delius", Helvetica, sans-serif;
    font-size: var(--h4);
    text-align: center;
    color: #003f58;
  }

  .contact  h3 {
    font-family: "Delius", Helvetica, sans-serif;
    font-size: var(--h3);
    text-align: center;
    color: #003f58;
  }

  /*mixin*/
  .contact  h2 {
    font-family: "Delius Swash Caps", Arial, Helvetica, sans-serif;
    font-size: var(--h2);
    color: #01A1DE;
    text-decoration: underline;
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg);
  }

  .contact h1 {
    font-family: "Delius Swash Caps", Arial, Helvetica, sans-serif;
    font-size: var(--h1);
    text-decoration: underline;
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg);
    color: #FF6E01;
  }
  .contact a, .contact a:hover{
    color: #003f58;
  }
  .contact a:hover{
    color: #FF6E01;
  }


  /*Navigation*/
  navbar {
    list-style-type: none;
    margin: 0;
    overflow: auto;
  }

  /*logo centered in the middle*/
  navbar img {
    display: block;
    margin: 0 auto;
    width: 50%;
  }

  nav li {
    list-style-type: none;
    display: block;
    text-align: center;
  }

  /*Size of Nav button*/
  :root {
    --button-size: 1.25rem;
  }

  nav a {
    font-family: "Delius", Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.25rem;
    color: #01A1DE;
    background-color: white;
    border: dotted 2px #01A1DE;
    border-radius: 2rem 0 2rem 0;
    display: block;
    text-align: center;
    padding: 0.5rem;
    margin: 0.5rem;
    font-size: var(--button-size);
    text-decoration: none;
  }

  nav a:hover {
    color: #FF6E01;
    background: #01A1DE;
    background: linear-gradient(-45deg, #f8ffe9, #dcf4ff, #ffe9d8);
  }

  /*Block box background color*/
  header {
    background: #01A1DE;
    background: linear-gradient(130deg, #019fde7a, #58da8e7e, #7bb8007e);
    text-align: center;
  }

  article {
    background: #7ab800;
    background: linear-gradient(130deg, #7bb80080, #58dada81, #4c5cc585);
    color: #01A1DE;
  }

  aside {
    background: #4c5cc5;
    background: linear-gradient(130deg, #4c5cc581, #d8f57191, #ff6f018a);
  }

  footer {
    background-color: #FF6E01;
    background: linear-gradient(130deg, #ff6f0185, #c6ff8688, #019fde86);
  }

  main {
    background: #01A1DE;
    background: linear-gradient(130deg, #019fde7a, #58da8e7e, #7bb8007e);
    text-align: center;
    justify-content: center;
  }

  /*Header*/
  :root {
    --mobile-img-width: 80%;
  }

  .mobile img {
    width: var(--mobile-img-width);
    max-width: 300px;
  }

  /*Article*/
  article ul {
    color: #003f58;
  }

  /*Sidebar*/
  .app img {
    width: 100%;
    max-width: 500px;
  }

  /*Article & Sidebar nested grid*/
  article aside,
  .sidebar aside {
    background: rgba(255, 255, 255, 0.582);
    padding: 1em;
    border-radius: 0.5em;
    box-shadow: 0 0 8px 8px rgba(255, 255, 255, 0) inset;
  }

  .nested1,
  .nested2 {
    display: -ms-grid;
    display: grid;
    grid-gap: 1em;
    -ms-grid-columns: auto;
        grid-template-columns: auto;
  }

  .nested1 img {
    width: 70%;
    display: block;
    margin: 0 auto;
    width: 50%;
  }

  /*Footer*/
  .social a {
    color:#01A1DE;
    font-family: "Delius", Arial, Helvetica, sans-serif;
    font-size: var(--h3);
  }
  footer ul {
    margin: 0 auto;
    max-width: 15rem;
    list-style-type: none;
  }
  footer a {
    background-color:white;
    border: dotted 2px #01A1DE;
    border-radius: 2rem 0 2rem 0;
    font-weight: bold;
    display: block;
    text-align: center;
    margin: 0.5rem auto;
    padding: 0.5rem 35%;
    list-style-type: none;
  }
  footer a:hover {
    color: #FF6E01;
    background: #01A1DE;
    background: linear-gradient(-45deg,#f8ffe9, #dcf4ff,#ffe9d8);
  }

  /*footer::before {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.8;
    width: 50%;
  }*/
  [href*='facebook'] {
    background: white;
  }

  /*[href*='facebook']::before {
    content: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/15542/facebook.png);
  }*/
  [href*='twitter'] {
    background: white;
  }

  /*[href*='twitter']::before {
    content: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/15542/twitter.png);
  }*/
  [href*='google'] {
    background: white;
  }

  /*[href*='google']::before {
    content: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/15542/google.png);
  }*/
  footer p {
    text-align: end;
  }

  /*MQ for Tabloid*/
  @media (min-width: 650px) {
  /*Flex system*/

    /*Grid system*/
    navbar {
      grid-column: span 3;
      /*1 / 3;*/
      grid-row: span 1;
      /*1 / 2;*/
    }
    header {
      -ms-grid-column: 1;
      -ms-grid-column-span: 1;
      grid-column: 1 / span 1;
      /*1 / 2;*/
      -ms-grid-row: 2;
      -ms-grid-row-span: 1;
      grid-row: 2 / span 1;
      /*2 / 3;*/
    }
    article {
      -ms-grid-column: 1;
      -ms-grid-column-span: 1;
      grid-column: 1 / span 1;
      /*1 / 2;*/
      -ms-grid-row: 3;
      -ms-grid-row-span: 1;
      grid-row: 3 / span 1;
      /*3 / 4;*/
    }
    .sidebar {
      -ms-grid-column: 3;
      -ms-grid-column-span: 1;
      grid-column: 3 / span 1;
      /*2 / 3;*/
      -ms-grid-row: 2;
      -ms-grid-row-span: 2;
      grid-row: 2 / span 2;
      /*2 / 4;*/
    }
    footer {
      grid-column: span 3;
      /* 1 / 3;*/
      -ms-grid-row: 4;
      -ms-grid-row-span: 1;
      grid-row: 4 / span 1;
      /*4 / 5;*/
    }
    /*contact page layout*/
    main {
      grid-column: span 3;
      /* 1 / 3;*/
      -ms-grid-row: 2;
      -ms-grid-row-span: 1;
      grid-row: 2 / span 1;
      /*2 / 3;*/
    }
    /*Navigation 2 rows*/
    /*Size of nav button*/
    :root {
      --button-size2: 1.5rem;
    }
    nav a {
      text-transform: none;
      font-size: var(--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 {
      -webkit-transform: rotate(-5deg);
              transform: rotate(-5deg);
    }
    /*logo sized correctly*/
    navbar img {
      width: 100%;
      max-width: 300px;
    }
    /*Type Scale 2*/
    :root {
      --updated-base-size: calc(14px * 1.125);
      --type-scale: 1.125;
      --updated-h6: calc(var(--updated-base-size) * var(--type-scale));
      --updated-h5: calc(var(--updated-h6) * var(--type-scale));
      --updated-h4: calc(var(--updated-h5) * var(--type-scale));
      --updated-h3: calc(var(--updated-h4) * var(--type-scale));
      --updated-h2: calc(var(--updated-h3) * var(--type-scale));
      --updated-h1: calc(var(--updated-h2) * var(--type-scale));
    }
    p {
      font-family: "Delius", Arial, Helvetica, sans-serif;
      font-size: var(--updated-base-size);
      text-align: left;
      color: #7ab800;
    }
    h6 {
      font-family: "Delius", Arial, Helvetica, sans-serif;
      font-size: var(--updated-h6);
      text-align: justify;
      text-align: right;
      color: #FF6E01;
    }
    h5 {
      font-family: "Delius", Arial, Helvetica, sans-serif;
      text-align: justify;
      font-size: var(--updated-h5);
      text-align: left;
      color: #FF6E01;
    }
    h4 {
      font-family: "Delius", Arial, Helvetica, sans-serif;
      text-align: justify;
      font-size: var(--updated-h4);
      color: #003f58;
    }
    h3 {
      font-family: "Delius", Arial, Helvetica, sans-serif;
      text-align: justify;
      font-size: var(--updated-h3);
      color: #003f58;
    }
    h2 {
      font-family: "Delius Swash Caps", Arial, Helvetica, sans-serif;
      font-size: var(--updated-h2);
      color: #01A1DE;
      text-decoration: underline;
    }
    h1 {
      font-family: "Delius Swash Caps", Arial, Helvetica, sans-serif;
      font-size: var(--updated-h1);
      color: #FF6E01;
      -webkit-transform: rotate(-2deg);
              transform: rotate(-2deg);
    }
      /*Contact Page font styling for tablet*/
    .contact  h4 {
      font-family: "Delius", Helvetica, sans-serif;
      font-size: var(--updated-h4);
      text-align: center;
      color: #003f58;
    }

    .contact  h3 {
      font-family: "Delius", Helvetica, sans-serif;
      font-size: var(--updated-h3);
      text-align: center;
      color: #003f58;
    }

    /*mixin*/
    .contact  h2 {
      font-family: "Delius Swash Caps", Arial, Helvetica, sans-serif;
      font-size: var(--updated-h2);
      color: #01A1DE;
      text-decoration: underline;
      -webkit-transform: rotate(-3deg);
              transform: rotate(-3deg);
    }

    .contact h1 {
      font-family: "Delius Swash Caps", Arial, Helvetica, sans-serif;
      font-size: var(--updated-h1);
      text-decoration: underline;
      -webkit-transform: rotate(-3deg);
              transform: rotate(-3deg);
      color: #FF6E01;
    }
    .contact a, .contact a:hover{
      color: #003f58;
    }
    .contact a:hover{
      color: #FF6E01;
    }
    /*Header*/
    :root {
      --mobile-img-width: 80%;
    }
    .mobile img {
      width: var(--mobile-img-width);
      max-width: 350px;
    }
    /*Aside*/
    .app img {
      width: 100%;
      max-width: none;
    }
    /*Footer*/
    .social {
      display: flex;
      flex-direction: row wrap;
      justify-content: space-evenly;
      column-gap: 2rem;
    }
    footer a {
      font-family: "Delius", Arial, Helvetica, sans-serif;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 0.25rem;
      color:  #01A1DE;
      background-color:white;
      border: dotted 2px #01A1DE;
      border-radius: 2rem 0 2rem 0;
      display: block;
      text-align: center;
      padding: 0.5rem 2rem;
      margin: 0.5rem;
      font-size: var (--button-size);
      text-decoration: none;
    }
    footer a:hover {
      transform: rotate(-5deg);
    }
  }
  /*MQ for Computer Screen*/
  @media (min-width: 1000px) {
    /*Grid System*/
    navbar {
      grid-column: span 3;
      /*1 / 3;*/
      grid-row: span 1;
      /*1 / 2;*/
    }
    header {
      -ms-grid-column: 1;
      -ms-grid-column-span: 2;
      grid-column: 1 / span 2;
      /*1 / 2;*/
      grid-row: 2 span 1;
      /*2 / 3;*/
    }
    article {
      -ms-grid-column: 1;
      -ms-grid-column-span: 2;
      grid-column: 1 / span 2;
      /*1 / 2;*/
      grid-row: 3 span 1;
      /*3 / 4;*/
    }
    .sidebar {
      -ms-grid-column: 3;
      -ms-grid-column-span: 1;
      grid-column: 3 / span 1;
      /*2 / 3;*/
      -ms-grid-row: 2;
      -ms-grid-row-span: 2;
      grid-row: 2 / span 2;
      /*2 / 4;*/
    }
    footer {
      grid-column: span 3;
      /*1 / 3;*/
      -ms-grid-row: 4;
      -ms-grid-row-span: 1;
      grid-row: 4 / span 1;
      /*4 / 5;*/
    }
    /*Type Scale 3*/
    :root {
      --updated-base-size-1: calc((14px * 1.125) * 1.125);
      --type-scale: 1.125;
      --updated-h6-1: calc(var(--updated-base-size) * var(--type-scale));
      --updated-h5-1: calc(var(--updated-h6) * var(--type-scale));
      --updated-h4-1: calc(var(--updated-h5) * var(--type-scale));
      --updated-h3-1: calc(var(--updated-h4) * var(--type-scale));
      --updated-h2-1: calc(var(--updated-h3) * var(--type-scale));
      --updated-h1-1: calc(var(--updated-h2) * var(--type-scale));
    }
    p {
      font-family: "Delius", Arial, Helvetica, sans-serif;
      font-size: var(--updated-base-size-1);
      text-align: left;
      color: #7ab800;
    }
    h6 {
      font-family: "Delius", Arial, Helvetica, sans-serif;
      font-size: var(--updated-h6-1);
      text-align: justify;
      text-align: right;
      color: #FF6E01;
    }
    h5 {
      font-family: "Delius", Arial, Helvetica, sans-serif;
      text-align: justify;
      font-size: var(--updated-h5-1);
      text-align: left;
      color: #FF6E01;
    }
    h4 {
      font-family: "Delius", Arial, Helvetica, sans-serif;
      text-align: center;
      font-size: var(--updated-h4-1);
      color: #003f58;
    }
    h3 {
      font-family: "Delius", Arial, Helvetica, sans-serif;
      text-align: justify;
      font-size: var(--updated-h3-1);
      color: #003f58;
    }
    h2 {
      font-family: "Delius Swash Caps", Arial, Helvetica, sans-serif;
      font-size: var(--updated-h2-1);
      color: #01A1DE;
      text-decoration: underline;
    }
    h1 {
      font-family: "Delius Swash Caps", Arial, Helvetica, sans-serif;
      font-size: var(--updated-h1-1);
      color: #FF6E01;
      -webkit-transform: rotate(-2deg);
              transform: rotate(-2deg);
    }
    /*Contact Page font styling for computer*/
    .contact  h4 {
      font-family: "Delius", Helvetica, sans-serif;
      font-size: var(--updated-h4-1);
      text-align: center;
      color: #003f58;
    }

    .contact  h3 {
      font-family: "Delius", Helvetica, sans-serif;
      font-size: var(--updated-h3-1);
      text-align: center;
      color: #003f58;
    }

    /*mixin*/
    .contact  h2 {
      font-family: "Delius Swash Caps", Arial, Helvetica, sans-serif;
      font-size: var(--updated-h2-1);
      color: #01A1DE;
      text-decoration: underline;
      -webkit-transform: rotate(-3deg);
              transform: rotate(-3deg);
    }

    .contact h1 {
      font-family: "Delius Swash Caps", Arial, Helvetica, sans-serif;
      font-size: var(--updated-h1-1);
      text-decoration: underline;
      -webkit-transform: rotate(-3deg);
              transform: rotate(-3deg);
      color: #FF6E01;
    }
    .contact a, .contact a:hover{
      color: #003f58;
    }
    .contact a:hover{
      color: #FF6E01;
    }
    /*Navigation*/
      /*Nav button*/
      :root {
        --button-size3: 2rem;
      }
    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: var(--button-size3);
    }
    /*logo sized correctly*/
    navbar img {
      width: 100%;
      max-width: 400px;
      margin-top: 1.5rem;
    }
    /*Header*/
    :root {
      --mobile-img-width: 80%;
    }
    .mobile img {
      width: var(--mobile-img-width);
      max-width: 500px;
    }
    /*Article*/
    .nested1 {
        grid-template-columns: repeat(3, 1fr);
    }
    .nested1 img {
      width: 100%;
      max-width: 400px;
    }

  /*Part 1 advanced media queries*/

  /*Or & And for Smartphone device*/
  @media screen and (max-width: 500px) and (orientation: portrait) {
      flex-basis:100%;
  }
  @media screen and (max-width: 500px) and (orientation: landscape) {
      flex-basis:100%;
  }
  /*Or & And for Tablet device*/
  @media screen and (min-width: 650px) and (orientation: portrait) {
      flex-basis:100%;
  }
  @media screen and (min-width: 650px) and (not(orientation: portrait)) {
      flex-basis: 48.5%;
  }
  /*Or & And for Computer device*/
  @media screen and (min-width: 1000px) and (orientation: landscape) {
      flex-basis: 100%;
  }

  /*MQ target Smartphone or touch screen device the one use finger and won't hover with the mouse*/
  @media (hover:none) and (pointer:coarse) {
    header:hover {
      background-color: #01A1DE;
    }
    article:hover {
      background-color: #7ab800;
    }
    aside:hover {
      background: #4c5cc5;
    }
    footer:hover {
      background-color: #FF6E01;
    }
  }
  /*MQ target traditional desktop device that uses mouse/stylus and will hover*/
  @media (hover:hover) and (pointer:fine) {
    header:hover {
      background: linear-gradient(130deg, #7bb80080, #58dada81, #4c5cc585);
      text-align: center;
    }
  
    article:hover {
      background: linear-gradient(130deg, #4c5cc581, #d8f57191, #ff6f018a);
      color: #01A1DE;
    }
  
    aside:hover {
      background: #4c5cc5;
      background: linear-gradient(130deg, #ff6f0185, #c6ff8688, #019fde86);
    }
    footer:hover {
      background-color: #FF6E01;
      background: linear-gradient(130deg, #019fde7a, #58da8e7e, #7bb8007e);
    }
  }
}