/*****************
	MAIN STYLES
******************/

body
{
	font-size: 1em;
	box-sizing: border-box;
	background-color: #5f6166;
}

a
{
	text-decoration: none;
}

header
{
	padding: 0;
	margin: 60px 8% 0;
	height: 90px;
	background-color: #303133;
	cursor: default;
	border-radius: 5px;
	box-shadow: 4px 4px 4px rgba(0,0,0,.6);
}

header p
{
	display: table-cell;
	width: 90px;
	height: 90px;
	text-align: center;
	vertical-align: middle;
	font-family: "Roboto Mono", "Lucida Console", monospace;
	font-weight: 700;
	font-size: 1.4em;
	color: lightgrey;
}

.header-html-thumb
{
	float: left;
	width: 90px;
	height: 90px;
	background-color: #db8823;
	text-shadow: 0 0 6px rgba(0,0,0,1);
}

.header-css-thumb
{
	float: left;
	width: 90px;
	height: 90px;
	background-color: #1d82e0;
	text-shadow: 0 0 6px rgba(0,0,0,1);
}

.header-js-thumb
{
	float: left;
	width: 90px;
	height: 90px;
	background-color: #68b21e;
	text-shadow: 0 0 6px rgba(0,0,0,1);
}

.header-bulb-thumb
{
	float: left;
	width: 90px;
	height: 90px;
	background-color: goldenrod;
	text-shadow: 0 0 6px rgba(0,0,0,1);
}

.header-thumb-border-radius
{
	border-radius: 5px 0 0 5px;
}

.header-title p
{
	display: table-cell;
	width: 100%;
	height: 90px;
	padding: 0 90px 0 25px;
	font-size: 1.4em;
	font-weight: normal;
	vertical-align: middle;
	text-shadow: 0 0 6px rgba(0,0,0,1);
}

.intro
{
	margin: 60px 10% 0;
	text-align: center;
	font-family: "Roboto Mono", "Lucida Console", monospace;
	font-size: 1.2em;
	font-weight: normal;
	line-height: 1.5;
	color: #303133;
}

.wrapper
{
	margin: 60px 0;
}

.to-top-link
{
	margin: 20px auto 0;
	width: 50px;
	height: 50px;
	background-color: transparent;
	border-radius: 50%;
	transition: transform .2s ease-in-out,
				background-color .2s ease-out;
}

.to-top-link a
{
	display: table-cell;
	width: 50px;
	height: 50px;
	vertical-align: middle;
	text-align: center;
}

.to-top-link i
{
	font-size: 2.25em;
	color: #303133;
	transition: color .2s ease-in-out;
}

.to-top-link:hover
{
	transform: scale(1.15);
	background-color: #303133;
}

.to-top-link:hover i
{
	color: lightgrey;
}



/**********************
	INDEX GRID STYLES 	
***********************/

.index-grid
{
	padding: 0 10%;
	text-align: center;
}

.index-card
{
	display: inline-block;
	margin: 15px;
	width: 300px;
	height: 85px;
	border-radius: 5px;
	box-shadow: 4px 4px 4px rgba(0,0,0,.6);
	transition: transform .2s ease-in-out,
				box-shadow .2s ease-in-out;
}

.index-card-thumb
{
	float: left;
	width: 85px;
	height: 85px;
	background-color: #303133;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

.index-card-thumb p
{
	display: table-cell;
	height: 85px;
	width: 85px;
	font-family: "Roboto Mono";
	font-size: 1.2em;
	font-weight: 700;
	vertical-align: middle;
}

.lightbulb
{
	font-size: 1.75em;
	color: goldenrod;
}

.index-card-title
{
	float: right;
	width: 215px;
	height: 85px;
	background-color: lightgrey;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	transition: background-color .2s ease-out;
}

.index-card-title p
{
	display: table-cell;
	padding: 0 5px;
	width: 215px;
	height: 85px;
	font-family: "Roboto Mono", "Lucida Console", monospace;
	font-size: 1em;
	font-weight: normal;
	color: #303133;
	vertical-align: middle;
}

.index-card:hover
{
	transform: scale(1.1,1.1);
	box-shadow: 10px 10px 20px rgba(0,0,0,.6);
}

.index-card a:hover p, 
.index-card a:hover span
{
	text-shadow: 0 0 5px rgba(0,0,0,1);
}

.index-card a:hover .html-thumb
{
	background-color: #db8823;
}

.index-card a:hover .css-thumb
{
	background-color: #1d82e0;
}

.index-card a:hover .js-thumb
{
	background-color: #68b21e;
}

.index-card a:hover .html-css-thumb
{
	background: linear-gradient(to bottom right, #db8823 50%, #1d82e0 50%);
}

.index-card a:hover .html-css-js-thumb
{
	background: linear-gradient(to bottom right, #db8823 0, #db8823 33.3%, #1d82e0 33.3%, #1d82e0 66.6%, #68b21e 66.6%);
}

.index-card a:hover .css-js-thumb
{
	background: linear-gradient(to bottom right, #1d82e0 50%, #68b21e 50%);
}

.index-card a:hover .html-js-thumb
{
	background: linear-gradient(to bottom right, #db8823 50%, #68b21e 50%);
}

.index-card a:hover .lightbulb-thumb
{
	background-color: goldenrod;
}

.index-card a:hover .index-card-title
{
	background-color: #303133;
}

.index-card a:hover .index-card-title p
{
	color: lightgrey;
}



/*****************
	CONTENT PAGE
******************/

.home-bttn
{
	position: absolute;
	right: 8%;
	top: 83px;
	margin-right: 25px; 
	font-size: 40px;
	transition: color .2s ease-in-out,
				transform .2s ease-in-out,
				background-color .2s ease-out;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	text-align: center;
	line-height: 46px;
}

.home-bttn:hover
{
	color: white;
	transform: scale(1.15);
	text-shadow: 1px 1px 3px rgba(0,0,0,.65);
}

.home-bttn.t-color-html:hover
{
	background-color: #db8823;
}

.home-bttn.t-color-css:hover
{
	background-color: #1d82e0;
}

.home-bttn.t-color-js:hover
{
	background-color: #68b21e;
}

.home-bttn.t-color-bulb:hover
{
	background-color: goldenrod;
}

.home-bttn.bg-img-html-css:hover
{
	background-image: linear-gradient(to bottom right, #db8823 50%, #1d82e0 50%);
}

.home-bttn.bg-img-html-css-js:hover
{
	background-image: linear-gradient(to bottom right, #db8823 0, #db8823 38%, #1d82e0 38%, #1d82e0 65%, #68b21e 65%);
}

.home-bttn.bg-img-css-js:hover
{
	background-image: linear-gradient(to bottom right, #1d82e0 50%, #68b21e 50%);
}

.home-bttn.bg-img-html-js:hover
{
	background-image: linear-gradient(to bottom right, #db8823 50%, #68b21e 50%);
}



/***********************************
	CONTENT PAGE - RESULT/IDEA BOX
************************************/

.result-box
{
	margin: 0 9% 25px;
	padding: 5px 0;
	background-color: #303133;
	border-radius: 5px;
}

.wrapper-idea
{
	padding: 0 9%;
	text-align: center;
}

.idea-box
{
	display: inline-block;
	margin: 10px;
	padding: 44px 75px;
	background-image: repeating-linear-gradient(
		lightgrey 0, lightgrey 20px, 
		darkgrey 20px, 
		lightgrey 21px, lightgrey 41px, 
		cornflowerblue 41px, 
		lightgrey 42px);
	border-radius: 5px;
	vertical-align: top;
}

.idea-box img
{
	max-width: 100%;
}

.idea-box p
{
	font-family: "Roboto Mono", "Lucida Console", monospace;
	font-size: 1.34em;
	line-height: 1;
}

.result-placeholder
{
	height: 800px;
}

.code-link
{
	display: table-cell;
	padding: 0 2px;
	width: 36px;
	height: 36px;
	font-size: 2.5em;
	text-align: center;
	vertical-align: middle;
	border-top-left-radius: 5px;
	border-bottom-right-radius: 5px;
	transition: color .1s ease-in-out,
				background-color .1s ease-out;}

.code-link:hover
{
	color: white;
}



/*******************************
	CONTENT PAGE - CODE BOX
********************************/

pre
{
	margin-left: -250px;
}

.prettyprint span
{
	font-family: "Roboto Mono", "Lucida Console", monospace;
	font-weight: normal;
	line-height: 1.5;
}

.code-box
{
	margin: 60px 12.5%;
	background-color: #303133;
	border-radius: 5px;
	box-shadow: 4px 4px 4px rgba(0,0,0,.6);
	overflow-x: auto;
}

.border-left-html
{
	border-left: 20px solid #db8823;
}

.border-left-css
{
	border-left: 20px solid #1d82e0;
}

.border-left-js
{
	border-left: 20px solid #68b21e;
}



/**************
	REUSABLES
***************/

.t-color-blue
{
	color: #648ce5;
}

.t-color-grey
{
	color: lightgrey;
}

.t-color-darkgrey
{
	color: darkgrey;
}

.t-color-html
{
	color: #db8823;
}

.bg-color-html
{
	background-color: #db8823;
}

.t-color-css
{
	color: #1d82e0;
}

.bg-color-css
{
	background-color: #1d82e0;
}

.t-color-js
{
	color: #68b21e;
}

.t-color-bulb
{
	color: goldenrod;
}

.bg-color-js
{
	background-color: #68b21e;
}

.group:after {
  content: "";
  display: table;
  clear: both;
}



/******************
	MEDIA QUERIES
*******************/

@media screen and (max-width: 650px)
{
	.header-title p
	{
		font-size: 1.25em;
	}

	.intro
	{
		font-size: 1em;
	}

	.home-bttn
	{
		width: 35px;
		height: 35px;
		font-size: 25px;
		line-height: 31px;
		top: 90px;
	}
}

@media screen and (max-width: 720px)
{
	.header-html-thumb
	{
		width: 20px;
	}

	.header-html-thumb p
	{
		display: none;
	}

	.header-css-thumb
	{
		width: 20px;
	}

	.header-css-thumb p
	{
		display: none;
	}

	.header-js-thumb
	{
		width: 20px;
	}

	.header-js-thumb p
	{
		display: none;
	}

	.header-bulb-thumb
	{
		width: 20px;
	}

	.header-bulb-thumb p
	{
		display: none;
	}
}