/*SCSS variables*/
/*Wrapper and Child*/
.wrapper {
  display: grid;
  grid-gap: 1rem;
  font-family: Arial, sans-serif;
}
header, article, aside, footer {
  padding: 1em;
  border-radius: 1em;
  box-shadow: 0 0 8px 8px white inset;
}
/*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;
}

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

h5 {
  font-family: "Delius", Helvetica, sans-serif;
  text-align: left;
  font-size: 14px;
  color: #FF6E01;
  font-size: calc(16px * 1.125);
}

h4 {
  font-family: "Delius", Helvetica, sans-serif;
  text-align: left;
  font-size: 14px;
  color: #FF6E01;
  text-align: justify;
  font-size: calc(calc(16px * 1.125) * 1.125);
  color: #003f58;
}

h3 {
  font-family: "Delius", Helvetica, sans-serif;
  text-align: left;
  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;
  -webkit-transform: rotate(-3deg);
          transform: rotate(-3deg);
}

h1 {
  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;
  -webkit-transform: rotate(-3deg);
          transform: rotate(-3deg);
  font-size: calc(((((16px * 1.125) * 1.125) * 1.125) * 1.125) * 1.125);
  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);
}

/*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: 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 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;*/
  }
  /*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-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;
  }
  h6 {
    font-family: "Delius", Arial, Helvetica, sans-serif;
    font-size: calc(var(--updated-p-size) * 1.125);
    text-align: justify;
    text-align: right;
    color: #FF6E01;
  }
  h5 {
    font-family: "Delius", Arial, Helvetica, sans-serif;
    text-align: justify;
    font-size: calc((var(--updated-p-size) * 1.125) * 1.125);
    text-align: left;
    color: #FF6E01;
  }
  h4 {
    font-family: "Delius", Arial, Helvetica, sans-serif;
    text-align: justify;
    font-size: calc(((var(--updated-p-size) * 1.125) * 1.125) * 1.125);
    color: #003f58;
  }
  h3 {
    font-family: "Delius", Arial, Helvetica, sans-serif;
    text-align: justify;
    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;
  }
  h1 {
    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) * 1.125);
    color: #FF6E01;
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
  /*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-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;
  }
  h6 {
    font-family: "Delius", Arial, Helvetica, sans-serif;
    font-size: calc(var(--updated-p-size-1) * 1.125);
    text-align: justify;
    text-align: right;
    color: #FF6E01;
  }
  h5 {
    font-family: "Delius", Arial, Helvetica, sans-serif;
    text-align: justify;
    font-size: calc((var(--updated-p-size-1) * 1.125) * 1.125);
    text-align: left;
    color: #FF6E01;
  }
  h4 {
    font-family: "Delius", Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: calc(((var(--updated-p-size-1) * 1.125) * 1.125) * 1.125);
    color: #003f58;
  }
  h3 {
    font-family: "Delius", Arial, Helvetica, sans-serif;
    text-align: justify;
    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;
  }
  h1 {
    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) * 1.125);
    color: #FF6E01;
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
  /*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;
  }
}
/*# sourceMappingURL=playtime.css.map */