main{
 text-align: center;}

.head-img {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	z-index: -5;
	object-position: top;
	object-fit: cover;
	animation: beginning linear forwards;
	animation-timeline: view();
	animation-range: exit;
}

@keyframes beginning {
	0% {
		opacity: 1;
	}

	75%, 100% {
		opacity: 0;
		scale: 1.2;
	}

}

.flex-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	
}

.flex-item {
	margin: 25px;
	align-items: center;
	
	box-shadow: 0 10px 15px #7e878d;
	border-radius: 10px;
	
}

	.flex-item img {
		height: 400px;
		width: 400px;
		max-width: 80vw;
		object-fit: cover;
	}

.MM
{
	background-color:darkred;
}

.HM {
	background-color: darkgreen;
}

@media screen and (min-width: 801px) {
	.flex-item:hover {
		scale: 1.05;
	}
}