/*SCSS variables*/
/*Wrapper and Child*/
.wrapper {
    display: grid;
    grid-gap: 1rem;
    font-family: Arial, sans-serif;
  }
  .aside, footer {
    padding: 1em;
    border-radius: 1em;
  }
  /*Type Scale*/
  /*:root {
      --p-size: $p-size1;
  }*/
  /*mixin*/
  p {
    font-family: "Delius", Helvetica, sans-serif;
    text-align: left;
    font-size: 14px;
    color: #FF6E01;
    color: #385300;
  }
  h3 {
    font-family: "Delius", Helvetica, sans-serif;
    text-align: center;
    font-size: 14px;
    color: #FF6E01;
    font-size: calc(((16px * 1.125) * 1.125) * 1.125);
    color: #003f58;
  }
  /*mixin*/
  h2 {
    font-family: "Delius Swash Caps", Arial, Helvetica, sans-serif;
    font-size: calc((((16px * 1.125) * 1.125) * 1.125) * 1.125);
    color: #01A1DE;
    text-decoration: underline;
    text-align: center;
  }
  
  /*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);
  }
  
  img {
    border: 2px dotted #FF6E01;
    border-radius: 0.5rem;
    padding: 0.5rem;
    margin: 0.25rem;
  }
  
  footer {
    padding: 1rem;
  }
  /*Sidebar*/
  img {
    width: 100%;
    max-width: 500px;
  }
  
  /*Article & Sidebar nested grid*/
  .sidebar aside {
    padding: 1em;
    border-radius: 0.5em;
    box-shadow: 0 0 8px 8px rgba(255, 255, 255, 0) inset;
  }
  
  /*Footer*/
  .social a {
      color:#01A1DE;
      font-family: "Delius", Arial, Helvetica, sans-serif;
      font-size: calc(((14px * 1.125) * 1.125) * 1.125);
  }
  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 25%;
      list-style-type: none;
  }
  footer a:hover {
      color: #FF6E01;
      background: #01A1DE;
      background: linear-gradient(-45deg,#f8ffe9, #dcf4ff,#ffe9d8);
  }
  
  [href*='facebook'] {
    background: white;
  }
  
  [href*='twitter'] {
    background: white;
  }
  
  [href*='google'] {
    background: white;
  }
  
  footer p {
    text-align: end;
  }
  
  /*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*/
    :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 {
        transform: rotate(-5deg);
    }
    /*logo sized correctly*/
    navbar img {
      width: 100%;
      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*/
    :root {
      --updated-p-size: calc(14px * 1.125);
    }
    p {
      font-family: "Delius", Arial, Helvetica, sans-serif;
      font-size: var(--updated-p-size);
      text-align: left;
      color: #7ab800;
    }
    h3 {
      font-family: "Delius", Arial, Helvetica, sans-serif;
      text-align: center;
      font-size: calc((((var(--updated-p-size) * 1.125) * 1.125) * 1.125) * 1.125);
      color: #003f58;
    }
    h2 {
      font-family: "Delius Swash Caps", Arial, Helvetica, sans-serif;
      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: 100%;
      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: "Delius", Arial, Helvetica, sans-serif;
          font-weight: bold;
          text-transform: none;
          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;
      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*/
  :root {
    --updated-p-size-1: calc((14px * 1.125) * 1.125);
  }
  p {
    font-family: "Delius", Arial, Helvetica, sans-serif;
    font-size: var(--updated-p-size-1);
    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: #003f58;
  }
  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: #01A1DE;
    text-decoration: underline;
    text-align: center;
  }
  /*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;
  }
}
/*# sourceMappingURL=playtime.css.map */