@import url('resets.css');
@import url('fonts.css');



/********************************************************************************* Generals */

html {
	-webkit-user-select: none; /* webkit (safari, chrome) browsers */
	-moz-user-select: none; /* mozilla browsers */
	-khtml-user-select: none; /* webkit (konqueror) browsers */
	-ms-user-select: none; /* IE10+ */	
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	background:#FFF;
}

body, h1, h2, h3, h4, h4, h5, a {
	font-size: calc(20px + (60 - 20) * ((100vw - 300px) / (1600 - 300)));
	font-weight: 400;
	font-family: 'f-ml', 'Helvetica Neue', Helvetica, Arial, sans-serif	
}

body {
	color:#222;
	max-width: 40em;
	padding: 5% 10%;
}

h1, h2, h3, h4, h4, h5 {
	display: inline;
	margin: 0;
} 

p, .p {
	margin: 0;
	line-height: 1.35;
}

.p a,
p a {
	display: inline-block;
	color: currentColor;
	line-height: 1.1;
	text-decoration: none;
	border-bottom: 0.05em solid #0000FF;
}

/*
blockquote {
	font-size: 0.75em;
	line-height: 1.25em;
	padding: 1.25rem;
	border: 1px solid currentColor;
	border-radius: 1px;
}
*/

* + main,
* + footer,
* + p, 
* + blockquote {
	margin-top: 1.5rem;
}

i {
	font-style: normal;
	position: relative;
}
	i:before {
		position: absolute;
		display: block;
		content: ' ';
		width: 100%;
		top:1.35rem;		
		border-bottom: 2px solid black;
	}

footer {
	margin-top: 1em;	
}

footer a {
	display: inline-block;
	color: currentColor;
	margin-left: 2em;
	text-decoration: none;
	border-bottom: 0.05em solid;
}

.c-banner {
	position: sticky;
	bottom: 0;
	width: 100%;
	margin-top: 2rem;

	display: inline-block;
}

.c-banner__inner {
	position: relative;
	display: inline-block;
	left: 50%;
	transform: translateX(-50%);
	background: #107F62;
	font-size: 0.5em;
	padding: 1em;
		padding-bottom: 0.75em;
	color: #FFF;
}	
.c-banner a {
	font-size: 1em;
	color: currentColor;
}

/********************************************************************************* Misc */

.u-wink-wink {
	display: block;
	margin-bottom: 1em;
	text-decoration: none;
	transition: none;
}

.u-wink-wink span {
	vertical-align: 0.1em;
}

.mambo:hover {
	color: #fbed46;
	border-color: #fbed46;
}


.transistor:hover {
	color: #C96333;
	border-color: #C96333;
}

.imedia:hover {
	color: #22b350;
	border-color: #22b350;
}

.dribbble:hover {
	color: #ea4c89;
	border-color: #ea4c89 
}

.linkedin:hover {
	color: #0e76a8;
	border-color: #0e76a8 
}

.behance:hover {
	color: #1769ff;
	border-color: #1769ff 
}


@media (max-width: 30em) {
	body {
		padding: 5%;
	}
	body, body * {
		//font-size: 16px;
		line-height: 1.4em;
	}
	p a {
		border-width: 1px;
	}
}



/********************************************************************************* Utils */

a {
	-webkit-transition: all 300ms ease-in-out;
		 -moz-transition: all 300ms ease-in-out;
			-ms-transition: all 300ms ease-in-out;
			 -o-transition: all 300ms ease-in-out;
					transition: all 300ms ease-in-out;
}

::selection {background-color:rgba(0,0,0,0);color:#0000FF}
::-moz-selection {background-color:rgba(0,0,0,0);color:#0000FF}
::-webkit-selection {background-color:rgba(0,0,0,0);color:#0000FF}