@import url('https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,400;0,600;1,400;1,600&display=swap');

:root {
	--white: white;
	--black: #1c1c1c;
	--grey: #a8a8a8;
	--color_orange: orange;
	--transition: .2s ease-in-out;
	--transition4: .4s ease-in-out;
	--transition6: .6s ease-in-out;
	--margin: 8px;
	--margin2: 16px;
	--margin4: 32px;
	--fontsizeXS: 12px;
	--fontsizeS: 14px;
}

* {
	font-family: Aleo;
	font-weight: 400;
	font-size: 16px;
	color: var(--white);
}

strong {font-weight: bold;}
.uppercase {text-transform: uppercase;}

body {background-color: var(--black)}
h3 {margin-block-start: 0;margin-block-end: 0;}
a {color: var(--color_orange);}
.mt-3 {margin-top: 3em;border-top: 2px solid var(--white);}
.displayNone {display: none!important;}
.opacityZero {opacity: 0!important;}

/*LOADING*/
#loading {
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: var(--black);
	opacity: 1;
}
#loading .loader_group {
	position: absolute;
	left: 50%;
	top: 50%;
	display: flex;
	flex-direction: column;
	transform: translate(-50%,-50%);
}
#loading .loader {
	margin-right: auto;
	margin-left: auto;
	color: var(--white);
	border-radius: 100vh;
	width: 20px;
	height: 20px;
	animation-name: rotating_loader;
	animation-duration: 4s;
	animation-iteration-count: infinite;
}
#loading .loader line {
	stroke: var(--white);
}
@keyframes rotating_loader {
	0%   {transform: rotate(0deg)}
	50%  {transform: rotate(-40deg)}
	100%  {transform: rotate(360deg)}
}

/*HEADER*/
header {
	width: var(100% - var(--margin2));
	justify-content: space-between;
	display: flex;
	margin-bottom: 1em;
	padding-left: var(--margin);
	padding-right: var(--margin);
}
header p {
	width: auto;
	margin: 0;
	cursor: pointer;
}
header p#logo, p#logo {
	font-size: 1.6rem;
	height: 2rem;
	width: 70%;
	padding-right: 0px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#loading p#logo {
	position: absolute;
	top: var(--margin);
	left: var(--margin2);
	margin: 0;
}
header nav {
	width: auto;
	gap: 30px;
	display: flex;
	align-items: end;
}
header a {
	text-decoration: none;
	color: var(--white);
}

/*ABOUT*/
#about {
	background-color: var(--black);
	position: absolute;
	z-index: 900;
	left: 0;
	top: 0;
	padding: var(--margin2);
	padding-top: 21px;
	width: calc(100% - var(--margin4));
	display: flex;
	flex-direction: row;
	gap: 60px;
	border-bottom: 1px solid white;
	height: 50vh;
	overflow: scroll;

	transition: var(--transition6);
	transform: translateY(-200%);
}
#about.inView{
	transform: translateY(0);
}
#about p.close {
	position: absolute;
	top: 21px;
	right: var(--margin2);
	margin-top: 0;
	cursor: pointer;
}
#about p.mainAbout {
	width: 60%;
	margin-top: 0;
	margin-bottom: 0;
	height: auto;
	overflow: scroll;
}
#about .colophon {
	width: auto;
	margin-top: 0;
	margin-bottom: 0;
	height: auto;
	overflow: scroll;
}

#about .mainAbout::-webkit-scrollbar,
#about .colophon::-webkit-scrollbar {
	display: none;
}
#about .mainAbout,
#about .colophon {
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}


#about .colophon > p:first-child {
	margin-top: .2em;
}
#about .colophon * {
	font-size: var(--fontsizeXS);
}
.lowOpacity {
	opacity: .2!important;
}

/*REPORT A BUG*/
#bugReport {
	position: fixed;
	bottom: var(--margin);
	left: var(--margin2);
	font-size: var(--fontsizeS);
	color: var(--grey);
	transition: var(--transition4);
	cursor: pointer;
	z-index: 100;
}
#bugReport:hover {
	color: var(--white);
}
#bugReport.invisible {
	opacity: 0;
	pointer-events: none;
}
#bugReportModal {
	width: 300px;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: auto;
	background-color: var(--black);
	border: 1px solid white;
	padding: 20px;
	z-index: 100;
	display: none;
}
#bugReportModal.visible {
	display: block;
}

/*SEARCH BAR*/
input#search {
	font-size: 1.6rem;
	height: 1.6rem;
	background-color: var(--black);
	top: var(--margin);
	position: absolute;
	left: var(--margin);
	padding-left: 6px;
	width: 70%;

	transition: var(--transition6);
	opacity: 0;
	pointer-events: none;
}
input#search.visible{
    opacity: 1;
	pointer-events: auto;
}
input#search:focus, input#search:focus{
    outline: none;
}




/*CANVAS*/
#figures_container {
	background-color: var(--black);
	width: 100%;
	height: 300px;
	line-height: 0;
	overflow: hidden;
	margin-bottom: 2em;
	transition: var(--transition6);
}
#figures_container svg {
	padding: 5px;
}
#figures_container svg rect {
	line-height: 0;
}

#figures_container .svgElementBox {
	display: inline-flex;
	transition: var(--transition4);
	cursor: pointer;
}
#figures_container .svgElementBox:hover {
	transform: scale(1.8)!important;
}

/*CANVAS ANIMATION*/
@keyframes rotating_1 {
	0%   {transform: rotate(0deg);}
	25%  {transform: rotate(40deg);}
	50%  {transform: rotate(-20deg);}
	75%  {transform: rotate(30deg);}
	100% {transform: rotate(0deg);}
}
@keyframes rotating_2 {
	0%   {transform: rotate(0deg);}
	25%  {transform: rotate(20deg);}
	50%  {transform: rotate(-10deg);}
	75%  {transform: rotate(50deg);}
	100% {transform: rotate(0deg);}
}
@keyframes rotating_3 {
	0%   {transform: rotate(0deg);}
	25%  {transform: rotate(10deg);}
	50%  {transform: rotate(-60deg);}
	75%  {transform: rotate(20deg);}
	100% {transform: rotate(0deg);}
}
@keyframes rotating_4 {
	0%   {transform: rotate(0deg);}
	25%  {transform: rotate(30deg);}
	50%  {transform: rotate(-20deg);}
	75%  {transform: rotate(10deg);}
	100% {transform: rotate(0deg);}
}
@keyframes rotating_5 {
	0%   {transform: rotate(0deg);}
	25%  {transform: rotate(50deg);}
	50%  {transform: rotate(-30deg);}
	75%  {transform: rotate(40deg);}
	100% {transform: rotate(0deg);}
}



/*LIST FILTERS*/
#list {
	display: flex;
	transition: var(--transition6);
}
#list #filters {
	width: 25%;
}
#list #filters ul,
#list #filters ul > span {
	text-transform: uppercase;
	font-size: var(--fontsizeS);
	margin: 0;
}
#list #filters ul.inactive > span {
	color: var(--grey);
}
#list #filters > ul > span {
	cursor: pointer;
	width: calc(100% - 1.4em);
	position: relative;
	display: inline-block;
}
#list #filters > ul:hover > span {
	color: var(--white);
}
#list #filters > ul > span.cancelFilter {
	cursor: pointer;
	width: 1em;
	position: relative;
	display: inline-block;
	opacity: 0;
}
#list #filters > ul.setOption:hover > span.cancelFilter {
	opacity: 1;
}


#list #filters > ul.dropdown + ul.checkbox {
	margin-top: var(--margin);
}
#list #filters > ul.checkbox {
	margin-bottom: var(--margin);
	padding-left: .4em;
}
#list #filters > ul.checkbox:before {
	content: '';
	width: 1em;
	height: 1em;
	border: 1.6px solid var(--white);
	display: inline-block;
	margin-right: var(--margin);
	vertical-align: bottom;
}
#list #filters > ul.checkbox.active:before {
	background-color: white;
}
.dropdown, .reset {
	position: relative;
	padding: 2px;
	padding-left: 6px;
	width: 90%;
}
.dropdown:hover {
	border: 2px solid white;
	padding: 0;
	padding-left: 4px;
	box-sizing: content-box;
}
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	padding: .2em;
	z-index: 1;
	margin-left: -6px;
	width: calc(100% - .2em);
	max-height: 14.8em;
	overflow: scroll;
}
.dropdown-content p {
	color: var(--black);
	margin: .2em;
	font-size: var(--fontsizeS);
	cursor: pointer;
}
.dropdown-content p:hover {
	color: var(--grey);
}
/*.dropdown:hover .dropdown-content {
	display: block;
}*/
.dropdown.visible .dropdown-content {
	display: block;
}
.reset {
	color: var(--grey);
	cursor: pointer;
	width: fit-content;
	opacity: 0;
	pointer-events: none;
}
.reset.visible {
	opacity: 1;
	pointer-events: auto;
}
.reset:hover {
	color: var(--white);
}



/*ARCHIVES*/
#list #archives {
	width: 75%;
}
.archive_elem {
	margin-bottom: 4em;
}
.archive_elem p.title {
	font-size: 1.6em;
	margin: 0;
}
.archive_elem a.title {
	font-size: 1.6em;
	line-height: 1.2em;
	margin: 0;
	margin-bottom: .2em;
	text-decoration: none;
	color: var(--black);
	padding-left: .2em;
	padding-right: .2em;
	display: inline-block;
	
	transition: .2s;
}

.archive_elem p.type_country {
	font-size: var(--fontsizeXS);
	margin: 0;
	text-transform: uppercase;
}
.archive_elem div.description,
.archive_elem div.translation {
	margin-block-start: 1em;
	margin-block-end: 1em;
}

.archive_elem div.description.hidden,
.archive_elem div.translation.hidden {
	display: none;
}
.archive_elem p.changeLang {
	text-transform: uppercase;
	font-size: var(--fontsizeXS);
	border: 1px solid var(--white);
	width: auto;
	display: inline-block;
	padding: 4px;
	margin-top: 0;
	margin-bottom: 1.4em;
	transition: var(--transition);
	cursor: pointer;
}
.archive_elem p.changeLang:hover {
	color: var(--black);
	background-color: var(--white);
}

.archive_elem .additional_info * {
	margin: 0;
	font-size: var(--fontsizeXS);
}
.archive_elem .additional_info_resource:before {
	content: 'resource';
	width: 20%;
	text-transform: uppercase;
	display: inline-block;
}
.archive_elem .additional_info_artefact:before {
	content: 'artefact';
	width: 20%;
	text-transform: uppercase;
	display: inline-block;
}
.archive_elem .additional_info_topic:before {
	content: 'topic';
	width: 20%;
	text-transform: uppercase;
	display: inline-block;
}
.archive_elem .additional_info_resource span:not(:last-child):after,
.archive_elem .additional_info_artefact span:not(:last-child):after,
.archive_elem .additional_info_topic span:not(:last-child):after {
	content: ', '
}

/*FILTERS CLASSES*/
.hidden_institution,
.hidden_resource,
.hidden_artefact,
.hidden_topic,
.hidden_country,
.hidden_account,
.hidden_licence,
.hidden_search {
	display: none!important;
}

.scrollTopButton {
	position: fixed;
	padding: 10px 14px;
	text-decoration: none;
	display: block;
	transition: var(--transition4);
	bottom: var(--margin);
	left: var(--margin);
	background-color: var(--white);
	z-index: 10;
	cursor: pointer;
	color: black;
	opacity: 0;
	pointer-events: none;
}
.scrollTopButton.visible {
	opacity: 1;
	pointer-events: auto;
}




/*SANITY*/
/*
#sanity {
	display: flex;
	flex-direction: row-reverse;
	gap: 2%;
}
#sanity > div {
	width: 32%;
	text-align: left;
}
#sanity .image {
	height: 100px;
	width: 100%;
}
#sanity .inside_text {
	height: 400px;
	margin-top: 20px;
	overflow: scroll;
}
#sanity .inside_text .strong {
	font-weight: bold;
}
#sanity .inside_text .em {
	font-style: italic;
}
#sanity .name {
	text-transform: uppercase;
	text-align: center;
}
*/


/*MEDIA QUERY MOBILE*/
@media only screen and (max-width: 768px) {
	header {
		flex-direction: column;
		gap: 10px;
	}
	header p#logo, p#logo {
		width: 100%;
		font-size: 22px;
	}
	#about {
		display: block;
		overflow: scroll;
		height: calc(100vh - var(--margin4));
	}
	#about p.mainAbout,
	#about .colophon {
		width: 82%;
		height: auto;
	}
	#about .colophon {
		margin-top: 40px;
		margin-bottom: 80px;
	}
	input#search {
		width: 90vw;
		font-size: 22px;
		height: 22px;
	}

	/*FIGURES*/
	#figures_container {
		height: auto;
		max-height: 300px;
		overflow: scroll;

		-ms-overflow-style: none;  /* IE and Edge */
		scrollbar-width: none;  /* Firefox */
	}

	#figures_container::-webkit-scrollbar {
		display: none;
	}

	/*LIST*/
	#list {
		flex-direction: column;
		overflow-x: hidden;
	}
	#list #filters,
	#list #archives {
		width: 100%;
	}
	#list #archives {
		margin-top: 20px;
	}
	.archive_elem a.title {
		font-size: 22px;
	}
	.dropdown, .reset {
		width: calc(100% - var(--margin));
	}
	.scrollTopButton {
		left: unset;
		right: var(--margin);
	}
	#bugReport {
		display: none;
	}
}