@import 'reset.css';
@import 'global.css';
.projectHolder{
	width: 100%;
	height: 20vmax;
	max-height: 300px;
	background-color: var(--navy);
	border: 10px solid var(--blue);
	border-radius: 30px;
	margin-top: 10px;
	margin-bottom: 10px;
	box-shadow: 0px 5px 5px 3px black;
	transition: transform 300ms linear, box-shadow 300ms linear;
}
.projectHolder:hover{
	transform: translateY(-0.5vmin);
	box-shadow: 0px 5px 10px 7px black;
}
.banner{
	position: relative;
	right: 2px;
	width: 100%;
	height: 95%;
	z-index: 2;
	filter: drop-shadow(6px 7px 3px var(--black));
}
.projName{
	position: absolute;
	width: 50%;
	margin-left: 1vmax;
	z-index: 3;
	text-shadow: 2px 2px 8px var(--shadow);
}
.proj{
	color: var(--navy);
	font-size: var(--fluid-h3);
}
.uidActive{
	color: var(--mint) !important;
}
#sjm{
	background-image: url(../images/sjm/Home.jpg);
	background-size: cover;
}
#lucid{
	background-image: url(../images/lucid/mockUp.png);
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
}
#interactivities{
	background-image: url(../images/interactivities/HomeScreen.jpg);
	background-size: 100%;
}
@media screen and (min-width: 1080px) {
	.name{
		width: 40%;
	}
	#interactivities{
		background-image: url(../images/interactivities/HomeScreen.jpg);
		background-size: 130%;
	}
	#lucid{
		background-image: url(../images/lucid/mockUp.png);
		background-size: 100%;
		background-position: center bottom -200px;
		background-repeat: no-repeat;
	}
}
@media screen and (max-width: 1080px) {
	.proj{
		font-size: var(--fluid-p);
	}
}