@import url('fonts/opensans_regular/stylesheet.css');
@import url('fonts/opensans_semibold/stylesheet.css');
/* DEFINE COLOURS */
/*
	Cherry red:		ef191a
	Cherry black:	181818
	Dark Grey:	#313838
*/
:root {
	--body-bg: white;
	--text-color: black;
	/*--darkbg: #32404f;*/
	--darkbg: #425366;
	--lightfg: #eae3b7;
	--lightfg2: #f3e9a7;
	--activebg: #db67c04d;
	--activebghover: #b10b8a87;
	--checkedbghover: #5387a975;
	--titlebg: #5a84ac17;
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body {
	background: var(--body-bg);
	color: var(--text-color);
	font-size: 1.13em;
	font-family: 'open_sans', sans-serif;
	line-height: 1.5em;
}
a {
	text-decoration: none;
	color: #cc80ba;
}
/* Minimum paragraphe size */
p:before {
	content: "";
	width: 10em;
	display: block;
	overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	/*margin: 4em 0 2.4em;*/
}
h1 {
	/*background: var(--titlebg);*/
	padding: 1.4% 1%;
	/*border-bottom: 3px solid var(--activebg);*/
}
code {
	white-space: pre;
	background: var(--darkbg);
	color: var(--lightfg2);
	display: block;
	clear: both;
	padding: 1%;
	overflow: auto;
	margin: 1% 0;
}
img {
	vertical-align: bottom;
	max-width: 100%;
}
blockquote, cite {
	background: var(--darkbg);
	border-left: 2em solid #5387a9;
	padding: 2%;
	color: var(--lightfg);
	display: block;
	margin: 3%;
}
blockquote cite {
	text-align: right;
	display: block;
	padding-top: 1%;
	border-top: 1px dotted var(--lightfg);
	border-left: none;
}

/* CLASSES */
.hidden {
	display: none;
}
.fright {
	float: right;
}
.fleft {
	float: left;
}
.clear {
	clear: both;
}

/* LOGO */
#logo {

}
#logo img {
	/*height: 240px;*/
	/*margin: 4% auto 1%;*/
	margin: auto;
	display: block;
}
#logo span {
	color: var(--lightfg);
	text-shadow: 2px 2px 9px var(--checkedbghover);
	font-family: monospace;
	padding: 0% 4%;
	/*width: 100%;*/
	display: block;
	text-align: center;
	font-size: 0.8em;
	font-weight: bold;
	padding: 1%;
}
#logo:hover span {
	text-shadow: 2px 2px 9px #63b6e0;
}

#langs {
	position: absolute;
	top: 0;
	left: 10%;
	font-size: 0.8em;
}
#langs a {
	padding: 3px;
	background: #2a3542;
}

/* STRUCTURE */
#contain {
	display: flex;
	overflow-x: hidden;
}
#menus {

}
#stuff {
	padding: 2% 4%;
	max-width: 820px;
	flex-grow: 3;
	min-height: 100vh;
	overflow: auto;
	/*position: relative;*/
}
#footer {
	background: var(--darkbg);
	color: var(--lightfg);
	font-size: 0.8em;
	text-align: center;
	padding: 1%;
}
#footer a {
	/*color: var(--activebghover);*/
}

#gototop a {
	position: fixed;
	bottom: 1%;
	right: 1%;
	background: url(imgs/arrow_up.png) var(--darkbg) no-repeat center center;
	width: 32px;
	height: 32px;
	opacity: 0.4;
	transition: opacity 0.4s ease-in-out;
}
#gototop span {
	opacity: 0;
	position: absolute;
	/*display: block;*/
	font-size: 0.7em;
	top: -80%;
	transition: all 1s ease-in-out;
}
#gototop a:hover {
	opacity: 1;
}
#gototop a:hover span {
	opacity: 1;
	transform: translate(0,-42px);
}

#side {
	max-width: 25%;
	min-width: 15em;
	flex-grow: 1;
	/*height: 100vh;*/
	/*overflow: auto;*/
	background: var(--darkbg);
	padding: 2% 1%;
	position: relative;
}
/*#side::-webkit-scrollbar {*/
	/*width: 0;*/
	/*overflow: -moz-scrollbars-none;*/
/*}*/

/* MENU */
#mainmenu {
	background: url('imgs/spying_workstation.svg') no-repeat center 1%;
	background-size: contain;
	background-origin: content-box;
	padding: 0 1%;
	width: 90%;
	margin: 10% auto;
}
#mainmenu ul {
	box-shadow: 3px 3px 9px #212b35;
}
#mainmenu ul li, #mainmenu ul {
	list-style: none;
	border-bottom: 1px dotted var(--lightfg2);
}
#mainmenu ul li:last-child, #mainmenu ul:last-child {
	border: none;
}
#mainmenu ul li li {
	border: none;
}
#mainmenu ul li a, #mainmenu ul li span.trigger {
	background: #2a3542;
	display: block;
	color: var(--lightfg);
	font-weight: bold;
	padding: 2% 1%;
	transition: background-color 2.4s ease-out;
}
#mainmenu ul li a:hover, #mainmenu ul li span.trigger:hover {
	color: var(--lightfg2);
}
#mainmenu ul li a:hover, #mainmenu ul li span.trigger:hover, #mainmenu.accordion input:checked + label span.trigger {
	background: var(--checkedbghover);
	transition: background-color 0.4s ease-in;
}
#mainmenu ul li a.active, #mainmenu.accordion ul li span.active {
	background: var(--activebg) !important;
}
#mainmenu ul li a.active:hover, #mainmenu ul li span.active:hover {
	background: var(--activebghover);
}
#mainmenu ul li ul {
	display: none;
}
.accordion input:checked + label + ul.submenu {
	display: block !important;
	height: auto;
}
.accordion input + label span.up {
	display: none;
}
.accordion input:checked + label span.down {
	display: none !important;
}
.accordion input:checked + label span.up {
	display: block;
	height: auto;
}

.submenu {
}
#mainmenu ul li .submenu a {
	font-size: .9em;
	text-align: right;
}



/* CONTENT */
#content {
	/*max-width: 640px;*/
}
#content .date {
	text-align: right;
	font-size: 0.6em;
}
#content .date time {
	/*display: block;*/
}
#content .tags {
	text-align: right;
	font-size: 0.8em;
}
#content .tags ul {
	display: inline;
}
#content .tags li {
	list-style: none;
	float: right;
	margin-left: 1%;
}
#content .tags li a {
}
#content p {
	margin: 1em 0;
}
#content ul {
	list-style-position: inside;
	margin: 0 2%;
}

#content .article_content {
	margin: 5% 0;
}

#content h1 {
	background: var(--titlebg);
	font-size: 1.5em;
}
#content h1, #content h2, #content h3 {
	padding: 1.4% 1%;
	border-bottom: 3px solid var(--activebg);
	clear: both;
	color: var(--darkbg);
	text-shadow: 1px 1px 4px #27313c38;
}
#content h2, #content h3 {
	margin: 1.4em 0 1em;
}


/* IMAGES */
.imagebox {
	margin: 2% 0;
}
.imagebox h4 {
	margin: 0;
	padding: 1%;
}
#content .imagebox p {
	font-size: 0.8em;
	margin: 0;
	padding: 1%;
}
.img_left {
	float: left;
	margin: 1% 2% 2% 0;
}
.img_right {
	float: right;
	margin: 1% 0 2% 2%;
}
.img_block {
	float: none;
	margin: 0;
}
.img_block img {
	display: block;
	margin: auto;
}

/* IMAGE ACCORDION - 4 FUCKING PARAMETERS !! */
.accordion {
}
.accordion input:checked + label .triggered {
	display: block;
	/*height: auto;*/
	position: fixed;
	background: #425366eb;
	width: 100%;
	height: 100%;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
}
.accordion input:checked + label .triggered img {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.accordion input:checked + label .trigger {
	display: none;
}
.accordion label {
	cursor: pointer;
}
.accordion input + label img {
	max-width: 100%;
	/*object-fit: contain;*/
}

/* START */
#start_page section div {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#start_page article.resume {
	flex-grow: 1;
	max-width: 32%;
	font-size: 0.8em;
	overflow: hidden;
	min-width: 165px;
}

/* NEWS */
.newspaginate, #content h1.blog {
	background: var(--darkbg);
	color: var(--lightfg2);
}
.newspaginate {
	padding: 1%;
}
#content h1.blog {
	/*background: var(--darkbg);*/
}
.newspaginate div:first-of-type {
	display: flex;
	justify-content: space-between;
}
.newspaginate span a {
	border-bottom: 4px solid var(--titlebg);
	transition: border 1s ease-in-out;
}
.newspaginate span a:hover {
	border-bottom: 4px solid var(--lightfg2);
}

.resume {
	padding: 1%;
	margin: 4% 0;
	background: var(--titlebg);
	position: relative;
}
.resume footer.plink {
	border: none;
	padding: 0 1%;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background: none;
}
.resume img {
	float: left;
	margin: 1% 2% 1% 0;
}
#content .resume h2, #content .resume h3 {
	margin: 0;
}
#content .resume h2 a, #content .resume h3 a {
	display: block;
	color: var(--darkbg);
}
#content .resume .article_content {
	margin: 0;
}

/* GALLERY */
ul#gallery_photo_list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 5% 0;
}
ul#gallery_photo_list li {
	margin: 1% 0;
	position: relative;
}
ul#gallery_photo_list h3 {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	width: 100%;
	background: var(--activebg);
	color: var(--lightfg);
	padding: 1% 4%;
	opacity: 0;
	transition: opacity .5s ease-in-out;
}
ul#gallery_photo_list li:hover h3 {
	opacity: 1;
}
#gallery .main_image {
	background: black;
	padding: 4%;
}
#gallery .main_image img {
	display: block;
	margin: auto;
}

.slider::-webkit-scrollbar {
	width: 0;
	height: 0;
}
.slider {
	-webkit-overflow-scrolling: touch;
	display: flex;
	overflow-x: auto;
	overflow-x: hidden;
	scroll-snap-type: x mandatory;
}
input#fullscreen:checked + .slider {
	height: 100vh;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: black;
	z-index: 1000;
}
input#fullscreen:checked + .slider .home, input#fullscreen:checked + .slider footer {
	display: none;
}
input#fullscreen:checked + .slider img {
	width: 85%;
	min-width: 80%;
	max-height: 80vh;
}
input#fullscreen:checked + .slider h2 {
	color: var(--lightfg2);
	margin: 0;
	border: none;
}
input#fullscreen:checked + .slider .date {
	display: none;
}
#gallery .home {
	background: url('imgs/home.svg') no-repeat center center;
	background-size: contain;
	display: inline-block;
	margin-left: 50%;
	margin-bottom: 2%;
	transform: translate(-50%, 0);
	height: 32px;
	width: 32px;
}

.slider-links{
	display: none;
}
.slider img {
	display: block;
	margin: auto;
	max-width: 100%;
	object-fit: contain;
}
.slide {
	flex-shrink: 0;
	height: 100%;
	width: 100%;
	scroll-behavior: smooth;
	scroll-snap-align: start;
	position: relative;
	padding: 0 1px;
	overflow: hidden;
}
.slider div {
	position: relative;
}
.slide a.nav {
	cursor: pointer;
	transition: opacity .45s ease-in-out;
	opacity: 0.5;
	font-size: 2.4em;
	text-shadow: 3px 3px 4px var(--darkbg);
	position: absolute;
	height: 100%;
	padding: 20% 0;
	top: 0;
}
.slide a.next {
	right: 0;
	padding-left: 6%;
}
.slide a.prev {
	left: 0;
	padding-right: 6%;
}
.slide a:hover {
	opacity: 1;
}

footer.plink {
	font-size: 0.8em;
	border: 1px solid var(--activebg);
	padding: 1%;
	background: var(--titlebg);
	margin: 5% 0;
}
footer.plink label {
	width: 20%;
}
footer.plink input {
	width: 80%;
	border: none;
	padding: 3px;
	font-family: monospace;
}

/* SOCIAL */
.social div {
	margin-top: 2%;
}
.social a {
	display: inline-block;
	height: 40px;
	width: 60px;
	background-size: contain;
}
.twitter {
	background: url(imgs/twitter_bird.svg) no-repeat;
}
.reddit {
	background: url(imgs/reddit_logo.svg) no-repeat;
}
.mastodon {
	background: url(imgs/mastodon_elephant.svg) no-repeat;
}

/* FORMS */
.generatedform {
	clear: both;
}

.generatedform .variable {
	display: flex;
	margin: 1%;
}
.generatedform .variable .inputlabel {
	min-width: 25%;
}
.generatedform .variable .inputfield {
	width: 100%;
}
.generatedform .variable .inputfield input, .generatedform .variable .inputfield textarea {
	width: 100%;
	border: 1px solid #808080;
	background: #5a84ac17;
	padding: 1%;
}
.generatedform .variable .inputfield textarea {
	height: 300px;
}
.generatedform input.submit {
	background: var(--activebg);
	border: none;
	padding: 1%;
	cursor: pointer;
	width: 100%;
	text-align: center;
	display: block;
	margin: auto;
	transition: background .5s ease-in-out;
}
.generatedform input.submit:hover {
	background: var(--activebghover);
}
.generatedform .inputfield span {
	font-size: 0.8em;
}

/* RESPONSIVE */
.burger {
	display: none;
	background: url('imgs/burger.svg') no-repeat center center;
	background-size: contain;
	width: 32px;
	height: 32px;
	margin: 1%;
}
@media (max-width: 600px) {
	#contain {
		display: unset;
	}
	#logo {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background: var(--darkbg);
		z-index: 100;
		padding-top: 2%;
	}
	#logo span {
		display: inline-block;
	}
	#logo img {
		float: left;
		margin: 0 0 1% 2%;
	}
	#mainmenu, #side {
		max-width: 100%;
		width: 100%;
	}
	#mainmenu {
		background: url('imgs/burger.png');
	}
	#stuff {
		margin-top: 2em;
	}
	label.burger {
		position: absolute;
		top: 0;
		right: 0;
		display: block;
	}
	input.burger {
		position: absolute;
		top:0;
		left: 0;
		z-index: 2300;
	}
	input.burger + #mainmenu {
		display: none;
	}
	input.burger:checked + #mainmenu {
		display: block;
	}
	#langs {
		position: relative;
		left: 0;
	}
}