body {
	container: body / inline-size;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 192px;
	letter-spacing: 0px;
	background-color: #000;
	padding: 2px 13px 59px 13px;
	overflow: auto;
}

.col-top1 {
	margin-left: 1px;
	width: 100%;
	max-width: 375px;
	display: flex;
	flex-direction: column;
	font-family: 'Fanwood Text';
	text-align: left;
}

.col-top2 {
	display: flex;
	flex-direction: column;
}

.title-ocean {
	color: #f00;
	font-size: 91.46px;
	line-height: 1.123;
}

.subtitle-a-college-student {
	margin-top: -2px;
	color: #fff;
	font-size: 54.06px;
	line-height: 1.345;
}

.group1 {
	position: relative;
	margin-right: 18px;
	padding: 0 59px;
}

._024c {
	position: absolute; top: 5px; left: 0; right: 0; 
	width: 100%;
}

.text-age-19-i-m {
	position: relative; z-index: 1;
	text-shadow: -1px -1px 0px #000,1px -1px 0px #000,1px 1px 0px #000,-1px 1px 0px #000;
	text-align: left;
}

.row {
	margin: 40px auto 0; /* keep top spacing, center horizontally */
	display: flex;
	align-items: flex-start;
	gap: 32px;
	padding-left: 1px;
	padding-right: 25px;
}

.col-left {
	margin-top: 6px;
	width: 178px;
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
}

.group2 {
	position: relative;
	margin-left: 2px; margin-right: -8px;
	padding: 32px 17px 5px 0;
}

.subtitle-like-sunburn {
	color: #dabbbb;
	text-align: left;
}

.ft-aawqea-yamr2qv {
	position: absolute; z-index: 1; top: 10px; left: 97px; 
	rotate: -22deg;
	transform-origin: 50% 50%;
	width: 72px;
}

.group-bottom {
	position: relative;
	margin: -4px 11px -4px -1px;
	padding-top: 65px;
	padding-right: 31px;
}

.subtitle-interact {
	color: #d5b0b0;
	text-align: left;
}

.pngtree-simple-pink {
	position: absolute; z-index: 1; top: 0; left: 82px; 
	width: 85px;
}

.col-right {
	width: 178px;
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	padding-bottom: 14px;
}

.group3 {
	position: relative;
	margin-left: -1px;
	width: 150px;
	align-self: start;
	padding: 45px 38px 23px 0;
}

.subtitle-dislike {
	color: #f00;
	text-align: left;
}

.creepy-eye-png-by {
	position: absolute; z-index: 1; top: 8px; left: 88px; 
	rotate: 18deg;
	transform-origin: 50% 50%;
	width: 57px;
}

.col {
	position: relative;
	margin: -58px -25px 0 -1px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 84px;
	padding-right: 9px;
}

.subtitle-dni-just-stay {
	margin-bottom: -53px;
	color: #f00;
	text-align: left;
}

.bloody-knife-png {
	position: absolute; z-index: 1; top: 23px; left: 56px; 
	rotate: -59deg;
	transform-origin: 50% 50%;
	width: 124px;
}

.col-bottom {
	margin-top: 40px; /* Add space above this section */
	margin-left: -1px;
	width: 190px;
	display: flex;
	flex-direction: column;
	color: #ff1515;
	font-size: 24px;
	font-family: 'Kaisei Decol';
	line-height: 3.029;
	text-align: center;
}

.subtitle-find-me-here {
	min-height: 58px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.row-bottom {
	margin-top: -4px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.building-blocks-standard-icon {
	justify-content: center;
	flex-shrink: 0;
}

.building1 {
	width: 46px; height: 52px;
}

.linkedin {
	margin-left: -2px; margin-top: 4px;
	width: 39px; height: 39px;
	justify-content: unset;
}

.building2 {
	margin-top: 5px;
	width: 43px; height: 42px;
}



/* container queries (flex rows) */

@container body (width < 474px) {
	.row {
		flex-direction: column;
		align-items: center; /* Center the columns on mobile */
		gap: 35px;
	}
	.col-bottom {
		margin-left: 0; margin-right: 0;
	}
	.row > * {
		margin-top: unset !important;
	}
	/* Center the content inside the columns on mobile */
	.col-left, .col-right {
		align-items: center;
	}
	.group3 {
		align-self: center;
	}
}

/* Make all divs centered horizontally by default
   NOTE: this is a broad rule and may override intentional margins
   on certain elements. If you want to scope this to only top-level
   layout containers, tell me and I'll narrow the selector. */
/* Scoped centering for main layout containers — safer than centering all divs */
.col-top1,
.row,
.col-bottom {
	margin-left: auto;
	margin-right: auto;
}

/* Rain Toggle Button - Mobile Responsive */
@media (max-width: 768px) {
	.rain-toggle {
		top: 12px;
		right: 12px;
		padding: 8px 12px;
		font-size: 12px;
	}
}

@media (max-width: 480px) {
	.rain-toggle {
		top: 10px;
		right: 10px;
		padding: 6px 10px;
		font-size: 11px;
		border-width: 1px;
	}
}