<!DOCTYPE html>
<html>
	<head>
		<title>W abt u?</title>
		<style>
			@import url(https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap);
			.card,
			.content,
			body {
				overflow: hidden;
			}
			body {
				width: 100vw;
				height: 100vh;
				padding: 0;
				margin: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				background: black;
			}
			.card,
			.container {
				display: flex;
				align-items: center;
			}
			.card {
				width: 1280px;
				height: 720px;
				margin: 0;
				justify-content: center;
			}
			.container-full,
			.content {
				width: 1000px;
				height: 562px;
			}
			.backgroundImage {
				position: absolute;
				width: 1000px;
			}
			.boyImage {
				position: absolute;
				width: 1000px;
				z-index: 2;
				animation: 200s linear infinite blur;
			}
			.content {
				border-radius: 40px;
				animation: 200s linear infinite brightness;
			}
			.container {
				justify-content: center;
			}
			.container-full,
			.face {
				display: flex;
				align-items: center;
				overflow: hidden;
			}
			.container-full {
				margin: 0;
				justify-content: center;
				transform: scale(1);
				animation: 200s linear infinite zoom-in;
			}
			.cube,
			.face {
				width: 870px;
				height: 190px;
			}
			.cube {
				position: relative;
				transform-style: preserve-3d;
				perspective: 480px;
				transform-style: preserve-3d;
				perspective-origin: 51% 70%;
			}
			.face,
			.hue {
				position: absolute;
			}
			.face {
				background: 0 0;
				border: 0 solid #000;
				opacity: 0.5;
			}
			.bottom,
			.top {
				width: 870px;
				height: 870px;
			}
			p {
				white-space: nowrap;
				overflow: hidden;
				font-family: "Bebas Neue", sans-serif;
				font-weight: 400;
				font-size: calc(6em + (190px / 10) * 0.7);
				padding-top: 20px;
				color: #fff;
			}
			span {
				color: red;
			}
			.front {
				transform: translateZ(435px);
				display: none;
			}
			.back {
				transform: translateZ(-435px) rotateY(180deg) scaleX(-1);
			}
			.left {
				transform: translateX(-435px) rotateY(-90deg) scaleX(-1);
			}
			.right {
				transform: translateX(435px) rotateY(90deg) scaleX(-1);
			}
			.top {
				transform: translateY(-435px) rotateX(90deg) scaleY(-1);
			}
			.bottom {
				transform: translateY(-245px) rotateX(-90deg) scaleY(-1);
			}
			.left p {
				margin-left: 480px;
				animation: 200s linear infinite left;
			}
			.back p {
				margin-left: -390px;
				animation: 200s linear infinite back;
			}
			.right p {
				margin-left: -1260px;
				animation: 200s linear infinite right;
			}
			@keyframes left {
				100% {
					margin-left: -54000px;
				}
			}
			@keyframes back {
				100% {
					margin-left: -54870px;
				}
			}
			@keyframes right {
				100% {
					margin-left: -55740px;
				}
			}
			.hue {
				top: 0;
				left: 0;
				z-index: 3;
				width: 100%;
				height: 100%;
				mix-blend-mode: overlay;
				background: #1e5799;
				background: radial-gradient(ellipse at center, #1e5799 0, #7db9e8 100%);
				opacity: 1;
			}
			.hue.animated {
				-webkit-animation: 8s infinite filter-animation;
				animation: 8s infinite filter-animation;
			}
			.container-reflect {
				position: absolute;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 380px;
				filter: blur(10px);
			}
			.container-reflect .cube {
				perspective-origin: 51% -30%;
			}
			.container-reflect .back {
				transform: translateZ(-435px) rotateY(180deg) scaleX(-1) scaleY(-1);
			}
			.container-reflect .left {
				transform: translateX(-435px) rotateY(-90deg) scaleX(-1) scaleY(-1);
			}
			.container-reflect .right {
				transform: translateX(435px) rotateY(90deg) scaleX(-1) scaleY(-1);
			}

			.container-reflect p {
				transform: scaleY(70%);
			}

			@keyframes filter-animation {
				0%,
				100% {
					filter: hue-rotate(0deg);
				}
				50% {
					filter: hue-rotate(100deg);
				}
			}
			@keyframes zoom-in {
				0% {
					transform: scale(1);
				}
				100% {
					transform: scale(2.5);
				}
			}
			@keyframes blur {
				0% {
					filter: blur(0px);
				}
				100% {
					filter: blur(3px);
				}
			}
			@keyframes brightness {
				0% {
					filter: brightness(1) contrast(1);
				}
				100% {
					filter: brightness(0.8) contrast(1.3);
				}
			}

		</style>
		<script type="text/javascript">
			const negative = `<p>Romantic relationships are just people <span>projecting their insecurities</span> onto each other and calling it love.
			Friendships often boil down to who can tolerate the other’s <span>nonsense the longest</span>.
			The concept of <span>"community"</span> is just an excuse for people to gossip and meddle in each other’s lives.
			Marriage is celebrated as sacred while most couples can <span>barely stand each other</span>.
			People bond over shared hatred more easily than over shared kindness—<span>what a testament to human nature</span>.
			Social gatherings are just competitions to see who can <span>fake happiness</span> the best.
			Everyone is so busy pretending to care that no one notices how <span>hollow their connections are</span>.
			Family dinners are glorified rituals where everyone <span>lies</span> about how <span>"great" life is</span>.
			Public apologies are just performances to avoid consequences, <span>not</span> genuine remorse.</p>`;

			// Function to insert poem into divs
			function insert() {

				const textDivs = document.querySelectorAll(".text");

				textDivs.forEach((div) => {
					div.innerHTML = negative;
				});
			}
			document.addEventListener("DOMContentLoaded", insert);

			const contentDiv = document.querySelector(".content");
			function adjustContentSize() {
				const viewportWidth = window.innerWidth;
				const baseWidth = 1000;
				const scaleFactor =
					viewportWidth < baseWidth ? (viewportWidth / baseWidth) * 0.8 : 1;
				contentDiv.style.transform = `scale(${scaleFactor})`;
			}
			window.addEventListener("load", adjustContentSize);
			window.addEventListener("resize", adjustContentSize);
		</script>
	</head>
	<body>
		<div class=container>
			<div class=content style=display:block;width:1000px;height:562px>
				<div class=container-full>
					<div class="animated hue"></div><img class=backgroundImage src="https://drive.google.com/thumbnail?id=1_ZMV_LcmUXLsRokuz6WXGyN9zVCGfAHp&sz=w1920"> <img class=boyImage src="https://drive.google.com/thumbnail?id=1eGqJskQQgBJ67myGekmo4YfIVI3lfDTm&sz=w1920">
					<div class=container>
						<div class=cube>
							<div class="face top"></div>
							<div class="face bottom"></div>
							<div class="face left text"></div>
							<div class="face right text"></div>
							<div class="face front"></div>
							<div class="face back text"></div>
						</div>
					</div>
					<div class=container-reflect>
						<div class=cube>
							<div class="face top"></div>
							<div class="face bottom"></div>
							<div class="face left text"></div>
							<div class="face right text"></div>
							<div class="face front"></div>
							<div class="face back text"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>