/*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%;

/*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 $base-color1 inset;
}
/*Type Scale*/
/*:root {
	--p-size: $p-size1;
}*/
/*mixin*/

@mixin std-text1 {
    font-family: $font2;
    text-align: left;
    font-size: $p-size1;
    color: $primary-color;
}
p {
    @include std-text1();
	color: $accent-color2;
}
h6 {
    @include std-text1();
	font-size: $font-calc1;
	text-align: right;
}
h5 {
    @include std-text1();
	font-size: calc(16px * 1.125);
}
h4 {
    @include std-text1();
	text-align: justify;
	font-size: calc(calc(16px * 1.125) * 1.125);
	color: $accent-color1;
}
h3 {
    @include std-text1();
	font-size: calc(((16px * 1.125) * 1.125) * 1.125);
	color: $accent-color1;
}

/*mixin*/

@mixin std-text2 {
    font-family: $font1;
	font-size: calc((((16px * 1.125) * 1.125) * 1.125) * 1.125);
	color: $secondary-color;
	text-decoration: underline;
	transform: rotate(-3deg);
}
h2 {
    @include std-text2();
}
h1 {
    @include std-text2();
	font-size: calc(((((16px * 1.125) * 1.125) * 1.125) * 1.125) * 1.125);
	color: $primary-color;
}
/*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: $button-size1;
	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: $img-width;
	max-width: 300px;
}
/*Article*/
article ul {
	color: #003f58;
}
/*Sidebar*/
.app img {
	width: $img-width3;
	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: grid;
	grid-gap: 1em;
	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%;
}*/
/*# sourceMappingURL=playtime.css.map */

[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) { 
	/*Grid system*/
    /*Size of nav button*/
	/*:root {
		--button-size: 1.5rem;
	}*/
    
	navbar {
		grid-column: span 3; /*1 / 3;*/
		grid-row: span 1; /*1 / 2;*/
	}
	header {
		grid-column: 1 / span 1; /*1 / 2;*/
		grid-row: 2 / span 1; /*2 / 3;*/
	}
	article {
		grid-column: 1 / span 1; /*1 / 2;*/
		grid-row: 3 / span 1; /*3 / 4;*/
	}
	.sidebar {
		grid-column: 3 / span 1; /*2 / 3;*/
		grid-row: 2 / span 2; /*2 / 4;*/
	}
	footer {
		grid-column: span 3; /* 1 / 3;*/	
		grid-row: 4 / span 1; /*4 / 5;*/
	}
	/*Navigation 2 rows*/
	nav a {
		text-transform: none;
        font-size: $button-size2;
	}
	nav ul {
		display: flex;
		flex-flow: row wrap;
		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;
	}
	/*Type Scale 2*/
	@mixin std-text1 {
        font-family: $font2;
        text-align: left;
        font-size: $p-size2;
        color: $primary-color;
    }
    p {
        @include std-text1();
        color: $accent-color2;
    }
    h6 {
        @include std-text1();
        font-size: $font-calc1;
        text-align: right;
    }
    h5 {
        @include std-text1();
        font-size: calc(18px * 1.125);
    }
    h4 {
        @include std-text1();
        text-align: justify;
        font-size: calc(calc(18px * 1.125) * 1.125);
        color: $accent-color1;
    }
    h3 {
        @include std-text1();
        font-size: calc(((18px * 1.125) * 1.125) * 1.125);
        color: $accent-color1;
    }
    
    /*mixin*/
    
    @mixin std-text2 {
        font-family: $font1;
        font-size: calc((((18px * 1.125) * 1.125) * 1.125) * 1.125);
        color: $secondary-color;
        text-decoration: underline;
        transform: rotate(-3deg);
    }
    h2 {
        @include std-text2();
    }
    h1 {
        @include std-text2();
        font-size: calc(((((18px * 1.125) * 1.125) * 1.125) * 1.125) * 1.125);
        color: $primary-color;
    }
   
	/*Header*/
	/*:root{
		--mobile-img-width: 80%;
	}*/
	.mobile img {
		width: $img-width2;
		max-width: 350px;
	}
	/*Aside*/
	.app img {
		width: $img-width3;
		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 {
		grid-column: 1 / span 2; /*1 / 2;*/
		grid-row: 2 span 1; /*2 / 3;*/
	}
	article {
		grid-column: 1 / span 2; /*1 / 2;*/
		grid-row: 3 span 1; /*3 / 4;*/
	}
	.sidebar {
		grid-column: 3 / span 1; /*2 / 3;*/
		grid-row: 2 / span 2; /*2 / 4;*/
	}
	footer {
		grid-column: span 3; /*1 / 3;*/	
		grid-row: 4 / span 1; /*4 / 5;*/
	}
	/*Type Scale 3*/
    @mixin std-text1 {
        font-family: $font3;
        text-align: left;
        font-size: $p-size2;
        color: $primary-color;
    }
    p {
        @include std-text1();
        color: $accent-color2;
    }
    h6 {
        @include std-text1();
        font-size: $font-calc1;
        text-align: right;
    }
    h5 {
        @include std-text1();
        font-size: calc(20px * 1.125);
    }
    h4 {
        @include std-text1();
        text-align: justify;
        font-size: calc(calc(20px * 1.125) * 1.125);
        color: $accent-color1;
    }
    h3 {
        @include std-text1();
        font-size: calc(((20px * 1.125) * 1.125) * 1.125);
        color: $accent-color1;
    }
    
    /*mixin*/
    
    @mixin std-text2 {
        font-family: $font1;
        font-size: calc((((20px * 1.125) * 1.125) * 1.125) * 1.125);
        color: $secondary-color;
        text-decoration: underline;
        transform: rotate(-3deg);
    }
    h2 {
        @include std-text2();
    }
    h1 {
        @include std-text2();
        font-size: calc(((((20px * 1.125) * 1.125) * 1.125) * 1.125) * 1.125);
        color: $primary-color;
    }
	/*Navigation*/
	navbar {
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		justify-items: center;
	}
	/*Canceling 2 rows make to be 1 row*/
	/*Nav button*/
	/*:root {
		--button-size3: 2rem;
	} */
    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;
	}
	/*Header*/
	/*:root{
		--mobile-img-width: 80%;
	}*/
	.mobile img {
		width: $img-width2;
		max-width: 500px;
	}
	/*Article*/
	.nested1 {
		grid-template-columns: repeat(3, 1fr);
	}
	.nested1 img {
		width: $img-width3;
		max-width: 400px;
	}
}