<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/* ProjectHolder.css
------------------------------------------------------------------------------*/


/* Grid / Isotope
------------------------------------------------------------------------------*/

div.grid {
	width: 1216px;
	margin: 24px auto;
	overflow: hidden;
}

/* responsive */
@media all and (max-width: 1310px) {
	div.grid {
		width: 1064px;
	}
}
@media all and (max-width: 1152px) {
	div.grid {
		width: 912px;
	}
}
@media all and (max-width: 992px) {
	div.grid {
		width: 760px;
	}
}
@media all and (max-width: 832px) {
	div.grid {
		width: 608px;
	}
}
@media all and (max-width: 672px) {
	div.grid {
		width: 456px;
	}
}
@media all and (max-width: 480px) {
	div.grid {
		width: 304px;
	}
}


/* Element
------------------------------------------------------------------------------*/

.element {
	width: 136px;
	height: 136px;
	overflow: visible;
	margin: 8px;
}

/* responsive */
/* @media all and (max-width: 1280px) {
	.element {
		width: 14.28571%;
	}
}
@media all and (max-width: 1120px) {
	.element {
		width: 16.66666%;
	}
}
@media all and (max-width: 960px) {
	.element {
		width: 20%;
	}
}
@media all and (max-width: 800px) {
	.element {
		width: 25%;
	}
}
@media all and (max-width: 640px) {
	.element {
		width: 33.33333%;
	}
}
@media all and (max-width: 480px) {
	.element {
		width: 50%;
	}
} */
	
	.element .front,
	.element .back {
		width: 136px;
		height: 136px;
		background-color: black;
		background-color: rgba(0, 0, 0, 0.75);
	}
	
	.element .title,
	.element .subtitle {
		position: absolute;
		left: 0;
		right: 0;
		color: white;
		/* font-family: "Geo", sans-serif; */
		font-size: 14px;
		letter-spacing: 0.02em;
		line-height: 1.1em;
		padding: 8px;
		margin: 0;
		text-align: center;
	}
	/* .element:hover .title,
	.element:hover .subtitle {
		color: #eec015;
	} */
	
	.element .title {
		top: 0;
	}
	.element .subtitle {
		bottom: 0;
	}
	
	/* .element img {
        image-rendering: -moz-crisp-edges;         Firefox
        image-rendering:   -o-crisp-edges;         Opera
        image-rendering: -webkit-optimize-contrast;Webkit (non-standard naming)
        image-rendering: crisp-edges;
        -ms-interpolation-mode: nearest-neighbor;  IE (non-standard property)
	} */
	.element img.vader {
		width: 88px;
		height: 88px;
		margin: 27px;
	}
	
	.element img.logo {
		display: block;
		width: 48px;
		height: 48px;
		margin: 46px;
	}
	
	.element a.overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border: 1px solid #6c7a7d;
		/* transition */
		-webkit-transition: border-color 1s;
		-moz-transition:    border-color 1s;
		-o-transition:      border-color 1s;
		transition:         border-color 1s;
	}
	.element a.overlay:hover {
		border-color: #eec015;
		/* transition */
		-webkit-transition: border-color 0s;
		-moz-transition:    border-color 0s;
		-o-transition:      border-color 0s;
		transition:         border-color 0s;
	}


/* Flips
------------------------------------------------------------------------------*/

/* entire container, keeps perspective */
.element {
	/* perspective */
	-webkit-perspective: 568px; /* 4x size */
	-moz-perspective: 568px; /* 4x size */
	-o-perspective: 568px; /* 4x size */
	perspective: 568px; /* 4x size */
	/* transform-style */
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

	/* flip speed goes here */
	.element .flips {
		position: relative;
		/* transition */
		-webkit-transition: 0.6s;
		-moz-transition: 0.6s;
		-o-transition: 0.6s;
		transition: 0.6s;
		/* trnasform-style */
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		-o-transform-style: preserve-3d;
		transform-style: preserve-3d;
	}
	
		/* hide back of pane during swap */
		.element .front,
		.element .back {
			position: absolute;
			top: 0;
			left: 0;
			/* backface-visibility */
			-webkit-backface-visibility: hidden;
			-moz-backface-visibility: hidden;
			-o-backface-visibility: hidden;
			backface-visibility: hidden;
			/* transition */
			-webkit-transition: 0.6s;
			-moz-transition: 0.6s;
			-o-transition: 0.6s;
			transition: 0.6s;
			/* transform-style */
			-webkit-transform-style: preserve-3d;
			-moz-transform-style: preserve-3d;
			-o-transform-style: preserve-3d;
			transform-style: preserve-3d;
		}

		/*  UPDATED! front pane, placed above back */
		.element .front {
			z-index: 2;
			/* transform */
			-webkit-transform: rotateY(0deg);
			-moz-transform: rotateY(0deg);
			-o-transform: rotateY(0deg);
			transform: rotateY(0deg);
		}
		
		/* back, initially hidden pane */
		.element .back {
			/* transform */
			-webkit-transform: rotateY(-180deg);
			-moz-transform: rotateY(-180deg);
			-o-transform: rotateY(-180deg);
			transform: rotateY(-180deg);
		}
		
		/*  UPDATED! flip the pane when hovered */
		.element.loaded .back {
			/* transform */
			-webkit-transform: rotateY(0deg);
			-moz-transform: rotateY(0deg);
			-o-transform: rotateY(0deg);
			transform: rotateY(0deg);
		}
		.element.loaded .front {
			/* transform */
			-webkit-transform: rotateY(180deg);
			-moz-transform: rotateY(180deg);
			-o-transform: rotateY(180deg);
			transform: rotateY(180deg);
		}


/* Flips
------------------------------------------------------------------------------*/

div.cloud {
	max-width: 640px;
	margin: 0 auto;
}
	div.cloud div.tags {
		font-size: 12px;
		text-align: center;
	}
		div.cloud div.tags a.tag {
			/* color: white; */
			font-family: "Geo", sans-serif;
			font-weight: normal;
			letter-spacing: 0;
			line-height: 1.5;
			white-space: pre;
			padding: 4px 8px;
			text-decoration: none;
			border: 1px solid #6c7a7d;
			margin: 2px;
			background-color: black;
			background-color: rgba(0, 0, 0, 0.75);
		}
		div.cloud div.tags a.tag.current,
		div.cloud div.tags a.tag:hover {
			color: #eec015;
		}
		div.cloud div.tags a.tag.zero {
			text-decoration: line-through;
		}
</pre></body></html>