/* GENERAL */
* {
	box-sizing: border-box;
	scroll-behavior: smooth;
}

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}



/* MAIN CONTAINER */
#viz {
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-rows: 0.05fr auto;
	background: #f7f7f7;
}



/* BUTTONS */
#filterControls {
	text-align: center;
	width: 100%;
	padding: 15px;
	margin: auto;
}

span.filterTitle {
	font-weight: bold;
}

.filterToggle {
	margin: 5px;
	padding: 10px 25px;
	font-weight: bold;
	border: 2px solid black;
	background: #f7f7f7;
	cursor: pointer;
}

.filterToggle.active {
	color: #f7f7f7;
	background: black;
}

.filterToggle:hover:not(.active) {
	background: #d7d7d7
}



/* PUBLICATIONS */
#publicationsContainer {
	height: 100%;
	background: #f7f7f7;
	overflow: hidden;
}

.publicationElement {
	width: 20%;
	padding: 1vw;
	margin-bottom: 10px;
}

.publicationElement > * {
	display: inline-block;
	margin: 0 0 10px 0;
}

.publicationImg {
	width: 100%;
	object-fit: cover;
}


/* HIDDEN ELEMENTS */
.isHidden {
	display: none;
}



/* RESPONSIVE */
/* TABLE AND MOBILE */
@media only screen and (max-width: 1024px) {
	.publicationElement {
		width: 100%;
		padding: 5vw;
	}
}



/* FONTS */
@font-face {
	font-family: "Libre Franklin";
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "Libre Franklin";
	font-weight: 400;
	font-style: italic;
}

@font-face {
	font-family: "Libre Franklin";
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: "Libre Franklin";
	font-weight: 700;
	font-style: italic;
}



/* TEXT ELEMENTS"*/
h1, h2, h3, h4, button, a, p, span {
	font-family: "Libre Franklin";
}

a {
	outline: none;
}

a:link {
	transition: color .2s linear;
	color: #000;
	text-decoration: none;
}

a:visited {
	color: #000;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}