:root{
	--project-window-width: 98%;
    --panel-flex: row;
}
@media screen and (max-width: 900px) {
	:root {
		--project-window-width: 95%;
        --panel-flex: column;
	}
}



.project {
	display: flex;
	flex-direction: var(--panel-flex);

	background-position: center;
	background-size: cover;
	background-blend-mode: multiply;
	gap: 2%
}
.project .icon {
	margin: 0 auto;
	max-height:400px;
	max-width: min(100%, 400px);
	flex-grow:3;
	pointer-events: auto;
	
	animation: pIconUnhover 0.5s forwards;
}
.project a {
    display: flex;
    justify-content: center;
}
.project .textbox {
	order: 1;
	pointer-events: auto;
	display:flex; 
	flex-direction: column; 
	flex-basis: 0%;
	flex-grow:2;
	padding: 1%;
	font-size: 110%;
	border: calc(var(--border-width)*3) outset white;
	
}
.plink {
	position: absolute;
	left:0;
	bottom:0;
	pointer-events: auto;
	
	font-size:120%;

	font-weight: bold;
	text-align: center;
	
}

.textbox .details {
    font-size: 1.15rem;
}
.textbox .body {
    font-size: 1.15rem;
    box-sizing: border-box;
}
.textbox ul {
    margin: 0;
}
.project .icon:hover{
	animation: pIconHover var(--duration) forwards;
	--duration: 0.5s;
	cursor: pointer;
}
.engine {
	position:absolute;
	bottom: 0;
	right: 0;
	width:12%;
	aspect-ratio: 1/1;
	pointer-events: auto;
}
.engine img{
	height: 100%;
	width: 100%;
	display: block;
	filter: drop-shadow(calc(-1px * calc(100%/40%)) calc(-1px * calc(100%/40%))  rgba(0, 0, 0, 1));
}
.engine img:hover{
	transform: translate(-5%, -5%);
	filter: drop-shadow(0 0 transparent);
}
@keyframes pIconHover {
	from {
		scale: 1.0;
		rotate: 0deg;
	}
	to {
		scale: 1.05;
		rotate: 5deg;
	}
}
@keyframes pIconUnhover {
	from {
		scale: 1.05;
		rotate: 5deg;
	}
	to {
		scale: 1.0;
		rotate: 0deg;
	}
}