:root
{
--rgb-neutral-dark3: 32,32,32;
--rgb-neutral-dark2: 64,64,64;
--rgb-neutral-dark1: 95,95,95;
--rgb-neutral-main: 127,127,127;
--rgb-neutral-bright1: 207,207,207;
--rgb-neutral-bright2: 223,223,223;
--rgb-neutral-bright3: 239,239,239;

--rgb-orange-dark3: 48,24,0;
--rgb-orange-dark2: 95,48,0;
--rgb-orange-dark1: 143,71,0;
--rgb-orange-main: 190,95,0;
--rgb-orange-bright1: 231,195,159;
--rgb-orange-bright2: 239,215,191;
--rgb-orange-bright3: 247,235,223;

--rgb-blue-dark3: 0,31,62;
--rgb-blue-dark2: 0,62,125;
--rgb-blue-dark1: 0,93,187;
--rgb-blue-main: 0,124,249;
--rgb-blue-bright1: 159,206,253;
--rgb-blue-bright2: 191,222,254;
--rgb-blue-bright3: 223,239,254;

--transition-duration: 1s;

--fixmecolour: #FF00FF;

--featured-gradient: url('../_images/bg.png');
--featured-lan: url('../_images/pexels-photo-169573.jpeg');
--featured-abt: url('../_images/cg.jpg');
--featured-cv: url('../_images/pexels-black-and-white-contemporary-daylight-921025.jpg');
--featured-abt: url('../_images/pexels-photo-169573.jpeg');
--featured-con: url('../_images/beverage-black-coffee-brewed-coffee-1413652.jpg');
--featured-ref: url('../_images/design-development-electronics-326424.jpg');
}

/* BASIC ELEMENTS */
									
*
{
	font-size: calc(14px + 1vmin);
	font-weight: 400;
	line-height: 1.5em;
	color: var(--rgb-neutral-dark3);
	font-feature-settings: "liga" 1;
	box-sizing: border-box;
	font-family: 'Roboto Condensed', sans-serif;
}

br
{
	margin: 0;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
label,
input,
textarea,
button
{
	margin: 0.5em 0em;
}

h1,
h2,
h3,
h4
{
	font-family: 'El Messiri', sans-serif;
	font-weight: 700;
	color: rgba(var(--rgb-blue-dark3), 0.75);
}

h1,
h2
{
	text-shadow: -0.05em 0.05em rgba(var(--rgb-orange-bright3),0.75);
}

h5,
h6
{
}

h1
{
	font-size: 2.5em;
	text-align: right;
	text-transform: uppercase;
}

h2
{
	font-size: 2em;
}

h3
{
	font-size: 1.5em;
}

h4
{
	font-size: 1em;
}

h5
{
	font-size: 0.9em;
}

h6
{
	font-size: 0.8em;
}

input,
textarea,
button
{
	padding: 0.25em 0.5em;
	background: rgb(var(--rgb-neutral-bright3));
	border: 0.05em solid rgb(var(--rgb-neutral-dark3));
}

textarea
{
	height: 5em;
	resize: none;
}

img
{
	width: 100%;
	height: auto;
}

/* LAYOUT ELEMENTS */

html,
body
{
	padding: 0;
	margin: 0;
	background: rgb(var(--rgb-neutral-bright3));
}

body > .container
{
	min-height: 100vh;
}

.header
{
	position: absolute;
	width: 100%;
	height: 12em;
}

.header img
{
	filter: drop-shadow(-0.2em 0.2em 0em rgba(var(--rgb-orange-bright3),0.75));
	max-height: 10em;
	max-width: 10em;
}

.header.banner
{
	top: 12em;
	height: unset;
	background: rgba(var(--rgb-blue-dark3), 0.25);
}

.featured
{
	background-image: var(--featured-gradient), var(--featured-lan);
	background-repeat: repeat-y, no-repeat;
	background-size: 100% auto, cover;
	background-attachment: scroll, fixed;
	background-position: top right, top center;
}

#abt .featured
{	
	background-image: var(--featured-gradient), var(--featured-abt);
}

#cv .featured
{	
	background-image: var(--featured-gradient), var(--featured-cv);
}

#ref .featured
{	
	background-image: var(--featured-gradient), var(--featured-ref);
}

#con .featured
{	
	background-image: var(--featured-gradient), var(--featured-con);
}

.content
{
	padding-top: 18em;
}

.line > *:first-child
{
	border-right: 0.05em solid rgb(var(--rgb-neutral-dark3));
}

.line img
{
	border: 0.05em solid rgb(var(--rgb-neutral-dark3));
}

.connote
{
	color: rgba(var(--rgb-orange-main), 0.75);
}

#slidebar
{
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	margin: 0;
	min-height: 100vh;
	width: 0em;
	background: transparent;
	transition: width var(--transition-duration), background var(--transition-duration);
}

#slidebar *
{
	color: rgba(var(--rgb-blue-dark3), 0.75);
	transition: color var(--transition-duration);
}

#slidebar .icon
{
	height: 12em;
}

#slidebar .lang
{
	height: 5em;
	margin-bottom: 1.5em;
}

#slidebar .title
{
	max-width: 0;
	opacity: 0;
	white-space: nowrap;
	overflow: hidden;
	transition: max-width var(--transition-duration), opacity var(--transition-duration);
}

#chksld:checked + #slidebar,
#slidebar:hover
{
	width: 15em;
	background: rgba(var(--rgb-blue-dark3), 0.75);
}

#chksld:checked + #slidebar *,
#slidebar:hover *,
#footer *
{
	color: rgba(var(--rgb-orange-bright3), 0.75);
}

#chksld:checked + #slidebar .title,
#slidebar:hover .title
{
	max-width: 100%;
	opacity: 1;
}

#footer
{
	background: rgba(var(--rgb-blue-dark3), 0.75);
}

#footer h3
{
	text-transform: uppercase;
}

#copy 
{
	background: rgba(var(--rgb-orange-bright3), 0.75);
}