.hover-card {
	transition: 0.3s;
}
		
.hover-card:hover {
	box-shadow: 3px 3px 3px grey;
	border: 1px solid rgba(0, 0, 0, 0.5);
	transform:scale(1.03);
	z-index: 10;
}

.separator {
	height: 5px;
	background-color: #e9ecef;
	margin: 20px 0;
}

.fit-img {
	object-fit: cover;
}

.half-width {
	width: 50%;
}

.height-200 {
	height: 200px;
}
.height-150 {
	height: 150px;
}

.height-125 {
	height: 125px;
}

.height-100 {
	height: 100px;
}

.link-to-default {
  	text-decoration: none;
  	color: inherit;
}

.link-to-default:hover,
.link-to-default:visited,
.link-to-default:link,
.link-to-default:active {
  	text-decoration: none;
}

.outline-black {
	/* color: inherit; */
	-webkit-text-stroke-width: 0.5px;
	-webkit-text-stroke-color: black;

	text-stroke-width: 0.5px;
	text-stroke-color: black;
}

/* BG for caption so you can see it against light backgrounds */
.carousel-bg {
	background: linear-gradient(#AAA0, #000D)
}

/* Used when you click on an image */
/* https://stackoverflow.com/questions/67815853/how-do-i-make-an-image-full-screen-on-click */
#fullpage {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-size: contain;
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  background-color: black;
}

.click-to-zoom {
	cursor: zoom-in;
}

.img-border {
	border: 2px solid #888;
}

.center-figure {
	align-content: center;
	text-align: center;
	font-size: 1em;
	font-style: italic;
	color: #666;
}

/* Handle image grids for project pages */
.img-box {
	width: 100%;
	overflow: hidden;
}

.img-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.img-box video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* TODO: Refine these based on vibes */
/* Small (Phone) */
.img-big {
	height: 220px;
}

.img-small {
	height: 200px;
}

/* XL is 1200 */

/* Large */
@media (min-width: 992px) {
	.img-big {
		height: 500px;
  	}

	.img-small {
		height: 250px;
	}
}

/* Medium */
@media (min-width: 768px) and (max-width: 991px) {
	.img-big {
		height: 350px;
	}

	.img-small {
		height: 300px;
	}
}

/* Overlaid on top of images on project page */
.img-label {
	position: absolute;
	right: 5%;
	bottom: 10px;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	padding: 5px 10px;
	font-size: 1rem;
	border-radius: 4px;

	/* Less visible unless hovering */
	opacity: 0.5;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.img-box:hover .img-label {
	opacity: 1;
}

/* Always show on mobile (instead of fading on hover) */
@media (max-width: 768px) {
	.img-label {
		opacity: 1;
	}
}

/* Same as the blog images */
.gallery > figure > img {
	border: 3px solid #888;
}

.gallery > figure {
	align-content: center;
	text-align: center;
	font-size: 1em;
	font-style: italic;
	color: #666;
}

.height-300-scale-mobile {
	height: 300px;
}

.height-400-scale-mobile {
	height: 400px;
}

.height-500-scale-mobile {
	height: 500px;
}

@media (max-width: 768px) {
	.height-300-scale-mobile {
		height: 250px;
	}
	.height-400-scale-mobile {
		height: 300px;
	}
	.height-500-scale-mobile {
		height: 325px;
	}
}

@media (max-width: 576px) {
	.height-300-scale-mobile {
		height: 200px;
	}
	.height-400-scale-mobile {
		height: 225px;
	}
	.height-500-scale-mobile {
		height: 250px;
	}
}