/* *************************************************** */
/* Root variables */
/* *************************************************** */

:root{
	--heading-font: 'Poppins', sans-serif;
	--body-font: 'Roboto', sans-serif;
}


/* ********************* */
/* Common elements       */
/* ********************* */

::selection {
   background:black;
   color:white;
}

a{color: #0064dd;}
/*a:visited, a:active, a:focus{color: darkblue;}*/
a:hover{color: #004cff;}

strong{font-weight: 500;}

html{font-size: 16px;}
html, body{
   margin:0;
	padding: 0;
	font-family: var(--body-font);
	font-weight: 300;
	background-color: white;
	color: black;
	min-height:100%;
}
h1, h2, h3{
	font-family: var(--heading-font);
	font-weight: 500;
}
h1{
	font-weight: 600;
}
h1 strong{
	font-weight: 800;
}

/* Common navigation styles */ 
 
/* ********************* */
/* Basic page sizing     */
/* ********************* */

:root{
	--page-max-width: 1080px;
}

header, main, footer{
	margin: 0 auto;
	max-width: var(--page-max-width);
}
main.full_width, footer.full_width{
	margin:0;
	width: 100%;
	max-width: 100%;
}

/* ****************************** */
/* Common navigation              */
/* ****************************** */

nav > ul{
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
}
nav .social a{
	display: block;
	background-size: contain;
	background-position: 50% 50%;
	text-indent: -9384px;
	position: relative;
	background-repeat: no-repeat;
}
a.instagram{background-image: url("/images/social/instagram.svg");}
a.linkedin{background-image: url("/images/social/linkedin.svg");}
a.twitter{background-image: url("/images/social/twitter.svg");}
a.github{background-image: url("/images/social/github.svg");}

/* Base styling for main navigation at top of page */

.nav-main{
	position: absolute;
	right: 0;
	top: 0;
	display: flex;
}
.nav-main a {
	text-transform: lowercase;
	color: black;
	font-family: var(--heading-font);
	font-weight: 300;
	padding: 0.5em 0.75em;
	text-decoration: none;
	text-decoration-thickness: 1px;
	outline: none;
}
.nav-main a:hover{
	text-decoration-line: underline;
}
nav .social a {
	width: 1.5em;
	height: 1.5em;
	padding: 0;
	margin: 0 0 0 0.5em;
	border-bottom: 3px solid transparent;
}
nav .social a:hover{
	border-bottom-color: black;
}


/* ****************************** */
/* Header                         */
/* ****************************** */

header{
	margin: 0 auto;
	position: relative;
	font-size: 1.2em;
	max-width: 80ch;
	transform: translateY(-40px);
	z-index: 100;
	display: flex;
	flex-direction: column;
}

.header-logo{
	width: 80px;
	position: relative;
	z-index: 120;
	left: -140px;
	display: block;
	outline: none;
	flex-shrink: 0;
}
.header-logo IMG{
	width: 100%;
	display: block;
}

header h1{
	font-family: var(--heading-font);
	font-size: 1.9em;
	margin: 0;
	text-align: right;
	flex-direction: column;
	line-height: 1.1em;
	font-weight: 600;
	color: black;
	align-self: flex-start;
	display: flex;
	display: none;
}
header h1 span{
	display: block;
}

/* Hover helper, I think ? */
header::after {
	content: "";
	display: block;
	position: absolute;
	left: -120px;
	top: 0;
	right: 50%;
	height: 100%;
	padding-bottom: 20px;
	z-index: 10;
}

.nav-main{
	bottom: -0.5em; /* align to logo bottom and cancel button padding */
	top: auto;
	font-size: 0.9em;
	transition: opacity 0.15s ease-in-out;
	left: 0;
	right: 0;
	justify-content: space-between;
	z-index: 50;
}
header:hover .nav-main{opacity: 1;}

.nav-main li{line-height: 1.5em;}
.nav-main li a{white-space: nowrap;}
.nav-main li:first-of-type a{padding-left: 0em;}

/* https://developer.mozilla.org/en-us/docs/Web/CSS/@media/any-hover */
@media (any-hover: hover) {
	.nav-main {opacity: 0;}
 }
 
@media screen and (max-width: 1200px) { 
	.nav-main{position:relative; flex-grow:2; align-items: flex-end; bottom: unset;}
	.header-logo IMG{margin-bottom: 20px;}
}

@media screen and (max-width: 600px) {
	.nav-main{
		align-items: flex-start;
		opacity:1;
		justify-content: flex-start;
		flex-direction:column;
	}
	.nav-main .left_angle_bracket{display:none;}
	.nav-main ul{margin-left:0em;}
	.nav-main ul{margin-bottom: 0.5em;}
	.nav-main ul.social{display:none;}
	.nav-main ul.social li:first-of-type a{margin-left: 0px;}
}
@media screen and (max-width: 400px) { 
	.nav-main ul:not(.social){flex-direction: column;}
	.nav-main a{padding-left: 0;}
}

.header-image{
	width:100%;
	display: block;
	background-size: cover;
	background-position: 50% 50%;
	z-index: 50;
	position: relative;
	aspect-ratio: 2600 / 400;
	min-height: 65px;
}

/* TODO: fix this to not scroll away after a while */
.article_header_white_logo{
	position: sticky;
	max-width: 80ch;
	top: 220px;
	transform: translate(0px, -180px);
	z-index: 30;
}

/* ******************************************** */
/* Re-align for "plain_header" homepage variant */
/* ******************************************** */

.plain_header{
	max-width: 1080px;
	margin-top: 100px;
	transform:none;
}
.plain_header::after{display: none;}
.plain_header .header-logo{left: auto;}
.plain_header .header-logo IMG{margin-bottom: 20px;}

.plain_header .nav-main{
	opacity:1;
	justify-content: flex-end;
	bottom: auto;
	top: 0em;
}

/* Hide the white background logo for plain header variants */
.plain_header + .article_header_white_logo{display:none;}
.plain_header + .article_header_white_logo + .article{margin-top:0;}

/* Re-sizing */

@media screen and (max-width: 1200px) { 
	.plain_header, main, footer{margin-left: 45px; margin-right: 45px;}
	.plain_header{margin-top: 45px;}
	.plain_header .nav-main{align-items:initial; justify-content: space-between;}
}

@media screen and (max-width: 650px) {
	.plain_header, main, footer{margin-left:25px; margin-right:25px;}
	.plain_header{margin-top: 25px;}
}
@media screen and (max-width: 600px) {
	.plain_header .nav-main{justify-content: flex-end; align-items: flex-start;}
}


/* Little bonus one thanks to my mum, to move the page up on short screens (like her's) */
@media screen and (max-height: 600px){
	.plain_header{margin-top: 45px;}
}


/* ****************************** */
/* Footer                         */
/* ****************************** */

footer{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 1em auto 3em;
}
footer nav{
	display: flex;

}
footer .img_logo_footer{
	width: 40px;
	height: 40px;
	margin-right: 0.5em;
}
footer .img_logo_footer img{
	object-fit: contain;
	width: 100%;
}

footer ul.social{
   justify-content: center;
	align-self: center;
}
footer ul.social:hover a:hover{opacity:1;}
footer ul.social a {
	width: 2em;
	height: 2em;
	margin: 0.3em 0.3em 0 0.3em;
	border-bottom-width: 4px;
}

/* ******************************************** */
/* Inverted page view */
/* ******************************************** */
.inverted{
	background:rgb(51, 51, 51);
	color: rgb(221, 255, 152);
}
.inverted::before{
	position: absolute;
	inset:-500px 0 -300px 0;
	background:rgb(51, 51, 51);
	content: "";
}
.inverted .nav-main a{color: white;}
.inverted .social{filter:invert(100%);}

.inverted .header-logo{
	background-image:url('/images/logo_white_square_trans.png');
	background-size:contain;
	background-repeat: no-repeat;
}
.inverted .img-logo{opacity:0;}