/* FILTERS */
.filters {
	list-style:none;
	margin:0 auto;
	padding:0;

	display:inline-flex;
	justify-content:center;
	align-items:center;
	align-content:center;
	gap:8px;
	flex-wrap:wrap;

	font-size:16px;
	text-align:center;
	white-space: pre;
}

.filters li {
	display:flex;
	padding:4px 16px;
	justify-content:center;
	align-items:center;
	gap:4px;

	color:light-dark(var(--light-main-text), var(--dark-main-text));
	background:light-dark(var(--light-main-bg), var(--dark-main-bg));
	box-shadow:0 0 0 light-dark(var(--light-main-text), var(--dark-main-text));

	transition-property:transform, box-shadow;
	transition-duration: 300ms;
	transition-timing-function: var(--timing-bounce);

	cursor:url('/img/cursor-pointer.png') 18 0, auto 
}

.filters li:hover:not(.pressed) {
	box-shadow:8px 8px 0 light-dark(var(--light-main-text), var(--dark-main-text));
	transform:translate(-4px, -4px);
}

.filters li.active {
	color:light-dark(var(--light-main-bg), var(--dark-main-bg));
	font-weight:600;
	background:light-dark(var(--light-main-text), var(--dark-main-text));
	box-shadow:0 0 0 light-dark(var(--light-main-bg), var(--dark-main-bg));
}
.filters li.active:hover:not(.pressed) {
	box-shadow:8px 8px 0 light-dark(var(--light-main-bg), var(--dark-main-bg));
	transform:translate(-4px, -4px);
}


/* PROJECTS */
.project-grid {
	max-width:1280px;
	margin:0 auto;
}

.project-container {
	display:flex;
	max-width:1280px;
	flex-direction:row;
	margin:64px auto;
	padding:0 24px;
	align-items: start;
}

.project-container .project-block {
	text-align:left;
	width:336px;
	margin-right:-4px;

	border:8px solid light-dark(var(--light-main-text), var(--dark-main-text));
	background:light-dark(var(--light-main-bg), var(--dark-main-bg));
	z-index:1;
}
.project-block .company {
	position:relative;

	color:light-dark(var(--light-main-bg), var(--dark-main-bg));
	font-size:12px;
	text-transform:uppercase;

	padding:0 24px 8px 24px;
	background:light-dark(var(--light-main-text), var(--dark-main-text));
}
.project-block .company img {
	position:absolute;
	top:1px;
	left:2px;
	display:inline-block;
}
html.dark .project-block .company img {
	filter:invert();
}
.project-block .content {
	padding:16px 24px;
}
.project-block .content h3 {
	font-family:"Boldonse", monospace;
	font-size:16px;
	letter-spacing:1px;
	margin:0;
}

.project-block a.case-study-link,
.project-block a.preview-link {
	display:block;

	color:light-dark(var(--light-main-text), var(--dark-main-text));
	font-size:16px;
	text-align:right;

	background:url("/img/button-link.svg") right no-repeat;
	background-position-x:calc(100% - 8px);
	padding-right:56px;

	transition:background-position-x 240ms ease-out;
}
.project-block a.case-study-link:hover,
.project-block a.preview-link:hover {
	background-position-x:100%;
}

.project-block a.case-study-link {
	background-image:url("/img/button-link.svg");
}
html.dark .project-block a.case-study-link {
	background-image:url("/img/button-link-dark.svg");
}
.project-block a.preview-link {
	background-image:url("/img/button-preview.svg");
}
html.dark .project-block a.preview-link {
	background-image:url("/img/button-preview-dark.svg");
}

/* Preview button/content */
.project-block .preview {
	text-align:right;
}
.project-block .preview button.preview-button {
	color:light-dark(var(--light-main-text), var(--dark-main-text));
	font-weight:normal;
	text-decoration:underline;
	
	background:url("/img/button-preview.svg") right no-repeat;
	background-position-x:calc(100% - 8px);
	padding-right:56px;

	transform:none;
	transition:background-position-x 240ms ease-out;
}
html.dark .project-block .preview button.preview-button {
	background-image:url("/img/button-preview-dark.svg");
}
.project-block .preview button.preview-button:hover {
	transform:none;
	background-position-x:100%;
	box-shadow:none;
}

.project-block .preview .preview-button img {
	display:none;
	vertical-align:middle;
}
.project-block .preview .preview-content {
	display:none;
}

.project-container .screenshot-container {
	flex:1;
	margin-left:-4px;
	transform:translate(0, 24px);
}
.project-container .screenshot-container img {
	width:100%;
	height:100%;
	object-fit:cover;
}

@media (max-width: 960px) {
	.project-container {
		flex-direction:column-reverse;
	}
	.project-container .project-block {
		margin:0 0 0 8px;
		width:calc(100% - 32px);
	}
	.project-container .screenshot-container {
		margin:0;
		width:calc(100% - 16px)
	}
}