/*
	255,170,25 => 128,0,0
*/

@font-face {
	font-family: FalconsFont;
	src: url('../fonts/FalconsFont.ttf');
}
@font-face {
	font-family: KenyanCoffee;
	src: url('../fonts/KenyanCoffee.ttf');
}
@font-face {
	font-family: RussoOne;
	src: url('../fonts/RussoOne.ttf');
}

html {
	height: 100%;
	margin: 0;
	padding: 0;
}
body {
	background-color: rgb(47,0,1);
	background: url('../images/backgrounds/red.jpg') repeat;
	font-family: KenyanCoffee;
	margin: 0;
	padding: 0;
	padding-bottom: 6.5em;
	position: relative;
	min-height: 100%;
	width: 100%;
	box-sizing: border-box;
	text-align: justify;
}
header {
	background-color: rgb(7,0,0);
	font-family: KenyanCoffee;
	text-align: center;
	position: relative;
}
header div {
	color: rgb(189,81,12);
	font-size: 6vw;
	width: 50%;
	margin-left: 50%;
	transition-property: background-color;
    transition-duration: 0.25s;
}
header div:hover {
	background-color: rgb(31,31,31);
}
header div * {
	margin: 0;
	padding: 0.1em 0;
}
header img {
	position: absolute;
	width: 50%;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}

/*****
	The articles are the elements of the lists of tutorials/projects
*****/
article {
	border: 2px solid black;
	background-color: rgba(0,0,0,0.5);
	display: inline-block;
	width: 40%;
	margin: 1.5em;
	text-align: center;
	vertical-align: top;
}
article div {
	
}
article img {
	height: 25vw;
	width: 100%;
	object-fit: cover;
}
article h3 {
	font-family: RussoOne;
}
article p {
	color: rgb(160,160,160);
	font-size: 1.25em;
	text-align: justify;
	margin: 0.5em;
}

/*****
	The footer (yep. Really. I swear.)
*****/
footer {
	color: rgb(189,81,12);
	background-color: rgb(7,0,0);
	text-align: center;
	height: 6.5em;
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	font-size: 2vw;
}
footer p {
	margin: 1em;
	line-height: 1.5em;
}

/*****
	H1 and H2 are the big titles on the main page
*****/
h1 {
	color: rgb(199,126,29);
	font-family: FalconsFont;
	font-size: 11vw;
	font-weight: normal;
	text-shadow: 6px 9px 15px rgb(0,0,0);
}
h2 {
	color: rgb(189,81,12);
	font-size: 6vw;
	font-weight: normal;
	text-shadow: 4px 6px 10px rgb(0,0,0);
}

/*****
	H3 is the title of the sections tutorials/projects
*****/
h3 {
	font-family: FalconsFont;
	font-size: 4em;
	font-weight: normal;
	margin: 0;
	text-align: center;
	text-shadow: 4px 6px 10px rgba(0,0,0,0.6);
}

/*****
	H4 is the title of the articles-links of the tutorials/projects
*****/
h4 {
	color: rgb(223,223,223);
	font-family: RussoOne;
	font-size: 1.5em;
	font-weight: normal;
	margin: 0.25em 1em;
	text-align: center;
}

/*****
	H5 is the titles of the articles
*****/
h5 {
	color: rgb(222,126,19);
	margin: 0 0.25em;
	font-family: RussoOne;
	font-size: 1.6em;
	font-weight: normal;
	text-align: left;
	text-shadow: 3px 3px 12px black;
}

/*****
	H6 is the titles of the sections of the articles
*****/
h6 {
	color: rgba(255,255,255,0.9);
	font-size: 1.4em;
	margin: 1em 0 0.5em 0;
	font-weight: normal;
}

/*****
	'warning' is the poney section THAT'S A PRANK BRO, IT'S THE WARNING SECTION
*****/
.warning {
	box-shadow: 0 0 5vw black;
	margin: 5vw;
	padding: 2vw;
	text-align: justify;
	position: relative;
}
.warning img {
	position: absolute;
	top: 50%;
	left: 1vw;
	height: 15vw;
	width: 15vw;
	transform: translateY(-50%);
}
.warning h3 {
	color: rgb(223,127,0);
	margin: 0 0 0 16vw;
	font-family: RussoOne;
	font-size: 3vw;
	text-align: left;
}
.warning p {
	color: rgb(191,191,191);
	margin: 2vw 0 0 16vw;
}

/*****
	'news' is the section of the index which contain all the news
*****/
.news {
	display: inline-block;
	vertical-align: top;
}
.news article {
	background-color: rgba(0,0,0,0.25);
	border: 1px solid black;
	height: auto;
	width: auto;
	margin: 1em;
}
.news article h3 {
	color: rgb(223,128,19);
	margin: 0.5em 0.5em 0 0.5em;
	font-size: 1.4em;
	text-align: left;
	text-shadow: 2px 2px 4px black;
}
.news h3 {
	text-align: left;
	margin: 0.5em 0 0 1em;
	font-size: 7vw;
}
.news h4 {
	color: rgb(110,110,110);
	font-family: KenyanCoffee;
	font-size: 1em;
	text-align: left;
}
.news p {
	color: rgb(200,200,200);
}

/*****
	'me' is the section 'Who am I?'
*****/
.me {
	background-color: rgba(0,0,0,0.25);
	border: 1px solid black;
	margin: 1em;
	padding: 0.25em;
	height: auto;
	text-align: right;
}
.me article {
	border: none;
	background-color: transparent;
	display: block;
	margin: 0 0.25em 0 52%;
	padding: 0.25em 0.5em;
	height: auto;
	width: 44%;
	text-align: justify;
}
.me article img {
	border-radius: 6px;
	box-shadow: 4px 4px 6px rgba(0,0,0,0.6);
	display: inline-block;
	height: 7vw;
	width: 7vw;
}
.me article h4 {
	margin: 0;
	font-family: KenyanCoffee;
	font-size: 3vw;
	text-align: left;
	text-shadow: 2px 2px 4px black;
}
.me article p {
	color: rgb(110,110,110);
	margin: 0;
	padding: 0;
	width: auto;
	font-size: 2.5vw;
	text-indent: 0;
	text-shadow: 1px 1px 2px black;
}
.me div {
	display: inline-block;
	margin-left: 1.5vw;
	width: calc(100% - 62px);
	vertical-align: top;
}
.me h3 {
	color: rgb(223,128,19);
	margin: 0.25em 0 0 0.5em;
	position: absolute;
	font-family: RussoOne;
	font-size: 4vw;
	text-align: left;
	text-shadow: 2px 2px 4px black;
}
.me p {
	color: rgb(200,200,200);
	margin: 1.75em 0 0 0;
	padding: 0.5em;
	width: 45%;
	position: absolute;
	font-size: 3vw;
	text-align: justify;
}

/*****
	'mainContainer' is the main section of the main pages of the tutorials/projects/...
*****/
.mainContainer {
	margin-top: 2em;
	margin-bottom: 2em;
	text-align: center;
}

/*****
	'indexContainer' is the main section of the index page
*****/
.indexContainer {
	margin-bottom: 2em;
	text-align: center;
}

/*****
	'gallery' is the images for the galleries
*****/
.galleryBig {
	box-shadow: 2px 2px 10px black;
	width: 30%;
	vertical-align: top;
}

/*****
	Misc.
*****/
pre {
	color: white;
	border: 1px solid black;
	border-radius: 0.5em;
	width: calc( 90% - 1em );
	overflow-x: auto;
	tab-size: 4;
}
section p {
	text-indent: 1em;
}
a {
	text-decoration: none;
}
p a {
	color: rgb(255,170,25);
}
p a:hover {
	text-decoration: underline;
}

/*****
	Error page
*****/
.errorTitle {
	margin: 1.25em 0 0 0;
	font-size: 8vw;
}
.errorNumber {
	margin: 0;
	font-size: 14vw;
}
.errorMessage {
	font-size: 5vw;
}
.errorImage {
	width: 60vw;
	position: absolute;
	bottom: 5em;
	left: 0;
	z-index: -1;
}

/*****
	'resume' is the section of the main page with the huge titles
*****/
.resume {
	background-color: rgb(13,13,13);
	background-image: url('../images/backgrounds/sad.jpg');
	background-position: center;
	background-size: cover;
	text-align: center;
	height: 70vw;
	overflow: hidden;
}

/*****
	'summary' is the section which contain the articles-links for the tutorials/projects
*****/
.summary {

}

/*****
	'sectionTitle' is the section which contain the title/description of the section of the tutorials/projects
*****/
.sectionTitle {
	margin: 5vw;
}
.sectionTitle p {
	color: rgb(190,100,12);
	font-size: 1.6em;
	text-align: justify;
	text-shadow: 3px 5px 5px rgba(0,0,0,0.4);
}

/*****
	'article' is the articles themselves (not the html elements)
*****/
.article {
	background-color: rgba(0,0,0,0.25);
	border: 1px solid black;
	margin: 1.5em;
	padding: 1em;
	text-align: center;
}
.article p {
	color: rgba(255,255,255,0.75);
	font-size: 1em;
	margin: 0.25em 0.5em;
}
.article img {
	margin: 1em 0.5em;
}
.article * {
	text-align: justify;
}

/*****
	Musics stuff
*****/
section .listMusics {
	color: rgba(255,255,255,0.25);
	margin-top: 1.5em;
	text-indent: 0;
}
.titleMusicOutdated {
	color: rgb(255,85,13,0.5);
	cursor: pointer;
	transition-property: color;
    transition-duration: 0.25s;
	transition-property: padding-left;
    transition-duration: 0.25s;
}
.titleMusicOutdated:hover {
	color: rgb(255,85,13);
	padding-left: 0.5em;
}
.titleMusic {
	color: rgb(255,170,25,0.5);
	cursor: pointer;
	transition-property: color;
    transition-duration: 0.25s;
	transition-property: padding-left;
    transition-duration: 0.25s;
}
.titleMusic:hover {
	color: rgb(255,170,25);
	padding-left: 0.5em;
}

/*****
	'description' is the short paragraph in top of the articles
*****/
.article .description {
	color: rgba(239,191,137,0.9);
	font-size: 1.2em;
	margin: 1em 0 2em 0;
	text-shadow: 3px 3px 7px black;
}

/*****
	'back' is the return-to-previous-page link at the top
*****/
.article .back {
	margin: -0.25em 0 1em 0;
	text-indent: 0;
}

/*****
	Mainly on computers
*****/
@media ( min-width: 720px ){

	body {
		text-align: center;
	}
	header {
		height: 3em;
		text-align: right;
	}
	header div {
		display: inline-block;
		height: 100%;
		width: auto;
		margin: 0;
		font-size: 1.5em;
	}
	header div * {
		margin: 0.25em 0.75em;
	}
	header img {
		position: relative;
		float: left;
		height: 100%;
		width: auto;
	}
	
	/*****
		The articles are the elements of the lists of tutorials/projects
	*****/
	article {
		border: none;
		background-color: transparent;
		width: 100%;
		margin: 0;
		padding: 0.75em;
		height: 7.5em;
	}
	article div {
		width: calc( 100% - 11em );
		display: inline-block;
		margin-left: 0.5em;
		vertical-align: top;
	}
	article img {
		height: 100%;
		width: 10em;
		margin: 0;
	}
	article p {
		font-size: 1.1em;
		margin: 0 0.5em;
	}
	
	footer {
		font-size: 1em;
	}

	/*****
		H1 and H2 are the big titles on the main page
	*****/
	h1 {
		font-size: 4em;
		margin: 1em 1em 0.5em 1em;
	}
	h2 {
		font-size: 2em;
		margin: 0 1em;
	}
	
	/*****
		H3 is the title of the sections tutorials/projects
	*****/
	h3 {
		font-size: 3.5em;
		margin: 0 1em;
		text-align: left;
	}
	
	/*****
		H4 is the title of the articles-links of the tutorials/projects
	*****/
	h4 {
		font-size: 1.2em;
		text-align: left;
	}
	
	/*****
		H5 is the titles of the articles
	*****/
	h5 {
		margin: 0 0.5em;
		font-size: 1.8em;
		text-shadow: 4px 4px 8px black;
	}

	/*****
		H6 is the titles of the sections of the articles
	*****/
	h6 {
		font-size: 1.4em;
	}
	
	/*****
		'warning' is the poney section THAT'S A PRANK BRO, IT'S THE WARNING SECTION
	*****/
	.warning {
		min-height: 4em;
		margin: 2em;
		padding: 1em;
	}
	.warning img {
		height: 5em;
		width: 5em;
	}
	.warning h3 {
		margin: 0 0 0 4em;
		font-size: 1.2em;
	}
	.warning p {
		margin: 1em 0 0 4em;
	}
	
	/*****
		'news' is the section of the index which contain all the news
	*****/
	.news {
		width: calc(100% - 276px);
	}
	.news article {
		margin-bottom: 0;
	}
	.news article h3 {
		margin: 0;
		font-size: 1.2em;
	}
	.news h3 {
		font-size: 1.8em;
	}
	.news h4 {
		font-size: 0.8em;
	}

	/*****
		'me' is the section 'Who am I?'
	*****/
	.me {
		display: inline-block;
		margin: 1em 1em 0 0;
		width: 250px;
	}
	.me article {
		margin: 0;
		width: auto;
	}
	.me article img {
		height: 48px;
		width: 48px;
	}
	.me article h4 {
		font-size: 1.4em;
	}
	.me article p {
		font-size: 1em;
	}
	.me div {
		margin-left: 0.5em;
		width: calc(100% - 58px);
	}
	.me h3 {
		margin: 0.25em 0 0 0;
		position: relative;
		font-size: 1.8em;
		text-align: center;
	}
	.me p {
		width: auto;
		margin: 0;
		position: relative;
		font-size: 1.2em;
	}
	
	/*****
		'mainContainer' is the main section of the main pages of the tutorials/projects/...
	*****/
	.mainContainer {
		display: inline-block;
		max-width: 800px;
	}
	
	/*****
		'indexContainer' is the main section of the index page
	*****/
	.indexContainer {
		display: inline-block;
		max-width: 1200px;
	}
	
	/*****
		Error page
	*****/
	.errorTitle {
		font-size: 4em;
		text-align: center;
	}
	.errorNumber {
		font-size: 7em;
	}
	.errorMessage {
		font-size: 3em;
	}
	.errorImage {
		height: 60vh;
		width: auto;
	}
	
	/*****
		'resume' is the section of the main page with the huge titles
	*****/
	.resume {
		text-align: left;
		height: 400px;
	}
	
	/*****
		'summary' is the section which contain the articles-links for the tutorials/projects
	*****/
	.summary {
		border: 1px solid black;
		background-color: rgba(0,0,0,0.5);
		display: inline-block;
		margin: 0;
		padding: 0 0.75em;
		width: 80%;
		max-width: 800px;
		text-align: justify;
	}

	/*****
		'sectionTitle' is the section which contain the title/description of the section of the tutorials/projects
	*****/
	.sectionTitle {
		display: inline-block;
		margin: 2em 0;
		width: 80%;
		max-width: 800px;
		text-align: justify;
	}
	.sectionTitle p {
		font-size: 1.5em;
		margin: 0.5em;
	}

	/*****
		'article' is the articles themselves (not the html elements)
	*****/
	.article {
		display: inline-block;
		width: 80%;
	}
	.article p {
		font-size: 1.1em;
	}

	/*****
		'description' is the short paragraph in top of the articles
	*****/
	.article .description {
		font-size: 1.5em;
		margin-bottom: 1.5em;
	}
}

/*****
	To have a good display on huuuuuuge screens
*****/
@media ( min-width: 1024px ){
	
	article p {
		font-size: 1.25em;
	}
	
	/*****
		H5 is the titles of the articles
	*****/
	h5 {
		font-size: 2em;
		text-shadow: 5px 5px 12px black;
	}

	/*****
		H6 is the titles of the sections of the articles
	*****/
	h6 {
		font-size: 1.6em;
	}
	
	/*****
		'news' is the section of the index which contain all the news
	*****/
	.news h3 {
		font-size: 2em;
	}
	.news article h3 {
		font-size: 1.2em;
	}
	.news h4 {
		font-size: 0.9em;
	}
	
	/*****
		'mainContainer' is the main section of the main pages of the tutorials/projects/...
	*****/
	.mainContainer {
		width: 80%;
		max-width: 1200px;
	}
	
	/*****
		'indexContainer' is the main section of the index page
	*****/
	.indexContainer {
		width: 80%;
		max-width: 1600px;
	}
	
	/*****
		Error page
	*****/
	.errorTitle {
		font-size: 5em;
		text-align: center;
	}
	.errorNumber {
		font-size: 8.5em;
	}
	.errorMessage {
		font-size: 3.5em;
	}
	.errorImage {
		height: 75vh;
	}
	
	/*****
		'article' is the articles themselves (not the html elements)
	*****/
	.article p {
		font-size: 1.2em;
	}
	
	/*****
		'description' is the short paragraph in top of the articles
	*****/
	.article .description {
		font-size: 1.8em;
		margin-bottom: 1.8em;
		text-shadow: 5px 5px 9px black;
	}
}