@keyframes image-main {
	0%, 1.5% {
		transform-origin: top;
		left: -50%;
		opacity: 0;
	}
	5% {
		opacity: 1;
	}
	95% {
		opacity: 1;
	}
	98.5%, 100% {
		transform-origin: bottom;
		left: 0;
		opacity: 0;
	}
}

.blob-container {
	height: 70vh;
	min-width: 100%;
	filter: blur(5vh);
}

@keyframes blob-appear {
	0% {
		opacity: 0;
	}
	100% {
		opacity: .7;
	}
}

.shape-blob {
	position: absolute;
	will-change: opacity, border-radius, transform;
}

.shape-blob.one {
	background: #71368a;
	width: 35vh;
	height: 35vh;
	top: 15vh;
	left: -3%;
	animation:
			blob-appear .35s .35s both,
			blob-transform 19s ease-in-out infinite alternate,
			blob-movement-one 29s ease-in-out infinite alternate;
}

.shape-blob.two {
	background: #9b59b6;
	width: 15vh;
	height: 10vh;
	top: 55vh;
	left: 30%;
	animation:
			blob-appear .35s .35s both,
			blob-transform 9s ease-in-out infinite alternate,
			blob-movement-two 14s ease-in-out infinite alternate;

}

.shape-blob.three {
	background: #8f2570;
	height: 30vh;
	width: 20vh;
	left: 35%;
	top: 5vh;
	animation:
			blob-appear .35s .35s both,
			blob-transform 16s ease-in-out infinite alternate,
			blob-movement-three 21s ease-in-out infinite alternate;
}

.shape-blob.four {
	background:#c23c0c;
	height: 10vh;
	width: 8vh;
	left: 20%;
	top: 6vh;
	animation:
			blob-appear .35s .35s both,
			blob-transform 6s ease-in-out infinite alternate,
			blob-movement-four 11s ease-in-out infinite alternate;
}

@keyframes blob-transform {
	0% { border-radius: 37% 63% 51% 49% / 37% 35% 35% 63%; }
	25% { border-radius: 36% 64% 64% 36% / 64% 48% 52% 26%; }
	50% { border-radius: 37% 63% 51% 49% / 30% 30% 70% 73%; }
	75% { border-radius: 40% 60% 42% 58% / 51% 51% 49% 59%; }
	100% { border-radius: 33% 67% 70% 30% / 30% 40% 70% 70%; }
}

@keyframes blob-movement-one {
	0% { transform: translate(0, 0) rotate(10deg) scale(1); }
	100% { transform: translate(20%, 10vh) rotate(-10deg) scale(1.1); }
}

@keyframes blob-movement-two {
	0% { transform: translate(0, 0) rotate(0deg) scale(1.3); }
	100% { transform: translate(-30%, -10vh) rotate(150deg) scale(1); }
}

@keyframes blob-movement-three {
	0% { transform: translate(0, 0) rotate(50deg) scale(1); }
	100% { transform: translate(-20%, 13vh) rotate(-40deg) scale(.7); }
}

@keyframes blob-movement-four {
	0% { transform: translate(0, 0) rotate(-200deg) scale(1); }
	100% { transform: translate(10%, 10vh) rotate(0) scale(1.3); }
}

.project-container {
	position: relative;
	height: 40vh;
	overflow: clip;
	padding: 0;

	transform: scale(.5) translateY(10vh);
	opacity: 0;
	transition: all .35s;
}

.project-container.visible {
	transform: scale(1) translateY(0);
	opacity: 1;
}

.project-container.visible:hover {
	transform: scale(1.05);
}

.project-image {
	transform: skew(-18deg);
	overflow: clip;
	position: relative;
	width: 100%;
}

.project-image.left {
	transform-origin: bottom;
	right: 50%;
}

.project-image.right {
	transform-origin: top;
	left: 50%;
}

.project-image > img {
	transform: skew(18deg);
	width: 100%;
	height: 40vh;
	object-fit: cover;
	position: relative;
}

.project-image.left > img {
	transform-origin: bottom;
	left: 25%;
}

.project-image.right > img {
	transform-origin: top;
	right: 25%;
}

.project-text {
	position: absolute;
	align-self: center;
	padding: 1rem 2rem;
	max-width: 640px;
	text-wrap: balance;
}

.project-text > h1 {
	font-weight: 600;
	text-shadow: 0 0 .7rem black;
}

.project-text > h5 {
	font-weight: 400;
	text-shadow: 0 0 .3rem black;
}

.project-text.left {
	left: 0;
	right: auto;
	text-align: left;
}

.project-text.right {
	left: auto;
	right: 0;
	text-align: right;
}

.profile {
	position: relative;
	overflow: clip;
	padding: 0;
}

.profile-image {
	transform: skew(-18deg);
	overflow: clip;
	position: relative;
	width: 100%;

	transform-origin: top;
	right: 50%;
}

.profile-image > img {
	transform: skew(18deg);
	width: 100%;
	height: 12rem;
	object-fit: cover;
	position: relative;

	transform-origin: top;
	left: 25%;
}

.profile-text {
	position: absolute;
	align-self: center;
	padding: 1rem 2rem;
	max-width: 360px;
	text-wrap: balance;

	left: auto;
	right: 0;
	text-align: right;
}

.profile-text > h4 {
	font-weight: 600;
	text-shadow: 0 0 .4rem black;
}

.profile-text > i {
	font-weight: 500;
	text-shadow: 0 0 .3rem black;
}

.profile-text > div {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1rem;
	margin-top: 1rem;
	justify-content: right;

	font-weight: 400;
	text-shadow: 0 0 .25rem black;
}

.profile-text > div > p {
	margin-bottom: 0;
}