/* VARIABLES {{{ */
:root {
	--bg: #dddddd;
	--color: #483d8b;
	--light: #bdb8e0;
	--font: MetaAccanthis;

	--project-bg: #dddddd;
	--project-color: #483d8b;
	--project-light: #bdb8e0;
	--project-font: MetaAccanthis;

	--highlight: #b7c273;
	--highlight-bg: linear-gradient(to top, var(--highlight) 50%, transparent 50%);
}
/* }}} */

/* FONTS {{{ */
@font-face {
	font-family: MetaAccanthis;
	src: url("fonts/MetaAccanthis_regular.ttf");
}
@font-face {
	font-family: PicNic;
	src: url("fonts/PicNic.woff2");
}
@font-face {
	font-family: PubliFluor;
	src: url("fonts/PubliFluorNormale.woff");
}
/* }}} */

/* *^*^*^* RESPONSIF *^*^*^* */
@media screen and (max-device-width: 600px) {
	body, h2, li, p, summary {
		font-size: 1rem !important;
	}
	#projects-list li {
		font-size: 1.2rem !important;
		width: 100vw !important;
	}
	#projects-list summary {
		font-size: 2rem !important;
	}
	body {
		margin: 5px !important;
	}
	summary, p, img, h2 {
		margin: 0 0 5px 0 !important;
		padding: 0 !important;
	}
	section img {
		max-width: 90vw !important;
	}
	#project-space {
		min-width: 100vw !important;
		padding: 10px 20px !important;
	}
	#projects-list, #project-space {
		margin-top: 1px !important;
	}
	p {
		max-width: 90% !important;
	}
	#filters-container {
		flex-direction: column !important;
		jusity-content: flex-start !important;
		gap: 0 !important;
	}
}

/* *^*^*^* SELECTION & SCROLLBAR *^*^*^* */
::selection {
	background: var(--highlight);
	color: var(--color);
}
::-webkit-scrollbar {
		background: transparent;
}
::-webkit-scrollbar-thumb {
		background: var(--light);
}
html {
	scrollbar-color: var(--light) transparent;
	scrollbar-width: thin;
}

body {
	background: var(--bg);
	color: var(--color);
	font-family: var(--font);
	margin: 20px;
	font-size: 2rem;
}

header, main, section, ul {
	display: flex;
}

#about summary {
	color: #e63d00;
}
summary p {
	display: inline;

}

section {
	border-top: solid 1px var(--color);
}
section img {
	margin: 0;
	max-width: 50vw;
	height: auto;
}
section p {
	padding: 10px 10px 10px 0;
	display: inline-block;
	font-size: 1.2rem;
}
p, h1, h2, h3, h4, h5, figcaption, blockquote, em, i, b {
	line-height: 1.8rem;
}
section h2 {
	font-size: 1.2rem;
	font-style: normal;
	margin: 0;
	padding: 0;
	max-width: 80vw;
}

header, nav, section, ul {
	flex-direction: column;
}

main {
	flex-direction: row;
}

#filters-container {
	display: flex;
	flex-direction: row;
	font-size: 1.2rem;
	margin: 0 0 20px 0;
	max-height: 23vh;
	overflow: hidden;
}
.filters ul {
	height: 100%;
	overflow-y: scroll;
}

#filters-topics, #filters-locations {
	text-transform: capitalize;
}

#infos li {
	margin-right: 9px;
}

li {
	list-style-type: none;
}

h1, details, ul, li,
.filters {
	margin: 0;
	padding: 0;
}

.filters summary {
	color: var(--light);
	width: 170px;
}
.filters {

}

input[type="checkbox"] {
	display: none;
}
input[type="checkbox"] + label::before {
	content: "";
	outline: solid 1px var(--light);
	position: relative;
	height: 12px;
	width: 12px;
	display: inline-block;
	margin: 0 10px 0 0;
}
input[type="checkbox"]:checked + label::before {
	background-color: var(--highlight);
	box-shadow: 0 2px var(--highlight);
	outline: solid 1px var(--bg);
	border: solid 1px var(--highlight);
	margin-left: -1px;
	height: 11px;
}
input[type="checkbox"]:checked + label {
	margin-left: -1px;
	background-image: var(--highlight-bg);
	text-decoration: underline var(--highlight);
	text-underline-position: under;
}

.selected {
	background-image: var(--highlight-bg);
	border: none;
}

a {
	text-decoration: underline;
	text-underline-position: under;
}

#project-data {
	flex-direction: row;
	gap: 5px;
	margin: 0;
	flex-wrap: wrap;
}
#project-data li {
	color: var(--color);
	background-image: var(--highlight-bg);
	text-decoration: underline var(--color);
	text-underline-position: under;
	z-index: 100;
	font-size: 1.2rem;
}
#project-data li:hover {
	text-decoration: underline var(--highlight);
}

#filters-container {
	gap: 20px;
}


summary {
	padding: 10px;
	cursor: pointer;
}
details summary a {
	text-decoration: none;
}
details[open] summary a {
	color: #ada6d8;
	text-decoration: none;
}
summary a {
	text-decoration-color: var(--light);
}
summary a:hover {
	cursor: pointer;
}
summary::marker {
	font-size: 1.2rem;
	content: "≻ ";
}
details[open] summary::marker {
	content: "⋎ ";
	border: solid 1px black;
	position: absolute;
}
details li {
	list-style-type: none;
	padding: 2px 0;
}
details ul {
	padding: 10px;
}

main {
	margin-top: 0;
	justify-content: flex-start;
}

footer {
    font-size: 1rem;
}

#project-space {
	min-width: 50vw;
	width: 100%;
	height: 100%;
	background: var(--project-bg);
	color: var(--project-color);
	gap: 20px;
	padding: 20px 45px;
	min-height: 100vh;
}
figure {
	margin: 20px 0;
}
#project-space h1 {
	display: none;
	border-bottom: solid 1px #2c2343;
	background: #dad4e9;
}
.open {
	background: var(--project-bg);
	color: var(--project-color);
	font-family: var(--project-font);
	font-size: 2rem !important;
}
.open summary::marker {
	font-size: 0;
}

#about, #about p {
	font-size: 1.2rem;
}
#about p {
	padding: 0;
	margin: 0;
}

#projects-list {
	font-size: 1.5rem;
	color: var(--color);
	width: 33vw;
}
#projects-list a {
	text-decoration: none;
	color: var(--color);
}
#projects-list li {
	border-top: solid 1px var(--color);
	list-style-type: none;
	padding: 5px 0;
}
li:not(:has(*)) {display:none}