PHP Decode

<?  * { 
	margin: 0; 
	padding: 0; 
	box-sizing: border-box; /* Include padding and border in element's total width/height */ 
} 
 
body { 
	height: 100vh; /* Use viewport height for body */ 
	width: 100vw; /* Use viewport width for body */ 
	margin: 0; /* Remove default body margin */ 
	font-family: 'Segoe UI', sans-serif; /* Set a default font */ 
	overflow: hidden; /* Hide any overflow content to prevent scrollbars */ 
	display: flex; 
	justify-content: center; /* Center content horizontally */ 
	align-items: center; /* Center content vertically */ 
	background-size: cover; /* Ensure background covers the entire body */ 
	background-repeat: no-repeat; /* Prevent background from repeating */ 
} 
 
.container { 
	width: 100%; 
	height: 100%; 
	display: flex; 
	position: fixed; 
	overflow: hidden; 
	background-size: cover; /* Ensure background covers the entire container */ 
	background-repeat: no-repeat; /* Prevent background from repeating */ 
} 
 
.col, .row { 
	flex: 1; /* Expand to fill available space */ 
	display: flex; 
	flex-direction: column; 
	overflow: hidden; /* Hide any overflow content to prevent scrollbars */ 
} 
 
#prev img, #next img { 
    width: 100%; /* Ensure image fills the width */ 
    height: 100%; /* Ensure image fills the height */ 
    object-fit: cover; /* Ensure image covers the container */ 
    transform: scale(0.6); 
    opacity: 0.5; 
} 
 
#prev:hover img, #next:hover img { 
    filter: invert(100%); 
    opacity: .75; 
} 
 
#prev { left: 0; }  
#next { right: 0; } 
 
#dots { 
	width: 100%; 
	height: 50px; 
	position: absolute; 
	z-index: 10; 
	bottom: 0; 
	display: flex; 
	background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.7)); 
	padding-bottom: 15px; 
	justify-content: center; 
	align-items: flex-end; 
	visibility: hidden; 
} 
 
.dot-container { 
	height: 50px; 
	margin: 5px; 
	cursor: pointer; 
	display: flex; 
	align-items: flex-end; 
	transition: all 0.2s; 
} 
 
.dot-container:hover .dot { 
	height: 50px; 
	opacity: 1; 
} 
 
.dot { 
	height: 0px; 
	width: 0px; 
	border: solid white 2.5px; 
	background-color: rgba(226, 245, 236, 0.7); 
	background-size: cover; 
	background-position: center; 
	opacity: 0.5; 
	transition: all 0.05s, opacity 0.5s; 
} 
 
.dot.active { 
	opacity: 1; 
} 
 
.content { 
	/* Content styles */ 
} 
 
.hidden { 
	width: 0%; 
	height: 0%; 
} 
 
.visible { 
	width: 100%; 
	height: 100%; 
} 
 
.pushUpDown:nth-child(odd) { 
	transform: translateY(-100%); 
	animation: pushDown 1s forwards; 
    animation-fill-mode: forwards; 
} 
 
.pushUpDown:nth-child(even) { 
	transform: translateY(100%); 
	animation: pushUp 1s forwards; 
    animation-fill-mode: forwards; 
} 
 
.pushUpDown div.content { 
	width: 100%; 
	height: 100%; 
} 
 
@keyframes pushDown { 
	from {transform: translateY(-100%);} 
	to {transform: translateY(0%);} 
} 
 
@keyframes pushUp { 
	from {transform: translateY(100%);} 
	to {transform: translateY(0%);} 
} 
 
.pullUpDown:nth-child(odd) { 
	transform: translateY(-100%); 
	animation: pullDown 1s forwards; 
    animation-fill-mode: forwards; 
} 
 
.pullUpDown:nth-child(even) { 
	transform: translateY(100%); 
	animation: pullUp 1s forwards; 
    animation-fill-mode: forwards; 
} 
 
.pullUpDown div.content { 
	width: 100%; 
	height: 100%; 
} 
 
.bigger { 
	animation: bigger 1s; 
	animation-fill-mode: forwards; 
} 
 
@keyframes bigger { 
	from { transform: scale(0.75); } 
	to { transform: scale(1); } 
} 
 
.smaller { 
	animation: smaller 1s; 
	animation-fill-mode: forwards; 
} 
 
@keyframes smaller { 
	from { transform: scale(1); } 
	to { transform: scale(0.75); } 
} 
 
.pullDown { 
	animation: pullDown 1s forwards; 
	animation-fill-mode: forwards; 
} 
 
@keyframes pullDown { 
	from { transform: translateY(0%); } 
	to { transform: translateY(100%); } 
} 
 
.pullUp { 
	animation: pullUp 1s forwards; 
	animation-fill-mode: forwards; 
} 
 
@keyframes pullUp { 
	from { transform: translateY(0%); } 
	to { transform: translateY(-100%); } 
} 
 
.pullLeft { 
	animation: pullLeft 1s; 
	animation-fill-mode: forwards; 
} 
 
@keyframes pullLeft { 
	from { transform: translateX(0%); } 
	to { transform: translateX(-100%); } 
} 
 
.pullRight { 
	animation: pullRight 1s; 
	animation-fill-mode: forwards; 
} 
 
@keyframes pullRight { 
	from { transform: translateX(0%); } 
	to { transform: translateX(100%); } 
} 
 
.boxShrink { 
	animation: boxShrink 0.5s; 
	animation-timing-function: linear; 
	animation-fill-mode: forwards; 
} 
 
@keyframes boxShrink { 
	from {width: 100%; height: 100%; opacity: 1;} 
	to {width: 0%; height: 0%; opacity: .5;} 
} 
 
.boxEmerge { 
	animation: boxEmerge 1s; 
	animation-fill-mode: forwards; 
} 
 
@keyframes boxEmerge { 
	from {width: 0%; height: 0%;} 
	to {width: 100%; height: 100%;} 
} 
 
.slideCol { 
	width: 0%; 
	height: 100%; 
	animation: slideCol 1s; 
	animation-fill-mode: forwards; 
} 
 
@keyframes slideCol { 
	from { width: 0%; } 
	to { width: 100%; } 
} 
 
.pushUp { 
	animation: pushUp 1s; 
	animation-fill-mode: forwards; 
} 
 
.pushDown { 
	animation: pushDown 1s; 
	animation-fill-mode: forwards; 
} 
 
.fade { 
	animation: fade 0.5s; 
	animation-fill-mode: forwards; 
} 
 
@keyframes fade { 
	from { opacity: 0; } 
	to { opacity: 1; } 
} 
 
.pushLeft { 
	animation: pushLeft 1s; 
	animation-fill-mode: forwards; 
} 
 
@keyframes pushLeft { 
	from { transform: translateX(100%); } 
	to { transform: translateX(0%); } 
} 
 
.pushRight { 
	animation: pushRight 1s; 
	animation-fill-mode: forwards; 
} 
 
@keyframes pushRight { 
	from { transform: translateX(-100%); } 
	to { transform: translateX(0%); } 
} 
 
.slide-header { 
	user-select: none; 
	opacity: 0; 
	cursor: pointer; 
	position: fixed; 
	top: 45%; 
	left: 25%; 
	width: 70%; 
	height: 40%; 
	box-sizing: border-box; 
	background-image: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,1)); 
	display: flex; 
	z-index: 20; 
	transition: all 0.5s; 
	color: white; 
	font-family: 'Segoe UI', sans-serif; 
	font-size: 1.5em; 
} 
 
.slide-header.in { 
	animation: slideHeaderIn 1s 1s; 
	animation-fill-mode: forwards; 
} 
 
.slide-header.out { 
	animation: slideHeaderOut 0.2s; 
	animation-fill-mode: forwards; 
} 
 
@keyframes slideHeaderIn { 
	from { opacity: 0; transform: translateY(-20%); } 
	to { opacity: 1; transform: translateY(0%); } 
} 
 
@keyframes slideHeaderOut { 
	from { opacity: 1; transform: translateY(0%); } 
	to { opacity: 0; transform: translateY(20%); } 
} 
 
.slide-header img { 
	height: 100%; 
} 
 
.header-text { 
	vertical-align: top; 
	margin-left: 15px; 
	padding: 7.5px 0; 
	box-sizing: border-box; 
} 
 
.header-text h3 { 
	display: -webkit-box; 
	overflow: hidden; 
	text-overflow: ellipsis; 
	-webkit-line-clamp: 1; 
	width: 100%; 
	font-weight: 400; 
	-webkit-box-orient: vertical; 
	margin-bottom: 5px; 
} 
 
.header-text p { 
	font-weight: 500; 
	font-size: 1em; 
	color: #eee; 
	text-shadow: 0px 0px 5px #000; 
	margin-left: 15px; 
	display: -webkit-box; 
	overflow: hidden; 
	-webkit-line-clamp: 6; 
	text-overflow: ellipsis; 
	-webkit-box-orient: vertical; 
} 
 
@media screen and (max-height: 900px) { 
	.header-text p { 
		-webkit-line-clamp: 5; 
	} 
} 
 
@media screen and (max-height: 690px) { 
	.header-text p { 
		-webkit-line-clamp: 4; 
	} 
} 
 
@media screen and (max-height: 615px) { 
	.slide-header { 
		font-size: 1em; 
	} 
 
	.header-text p { 
		-webkit-line-clamp: 6; 
	} 
} 
 
@media screen and (max-height: 550px) { 
	.header-text p { 
		-webkit-line-clamp: 5; 
	} 
} 
 
@media screen and (max-height: 470px) { 
	.header-text p { 
		-webkit-line-clamp: 4; 
	} 
} 
 
@media screen and (max-height: 420px) { 
	.header-text p { 
		-webkit-line-clamp: 3; 
	} 
} 
 
@media screen and (max-height: 375px) { 
	.header-text p { 
		-webkit-line-clamp: 2; 
	} 
 
	.dot-container { 
		height: 5px; 
		border-radius: 50%; 
		overflow: hidden; 
	} 
 
	.dot-container:hover .dot { 
		height: 0px; 
		opacity: 1; 
	} 
 
	.dot { 
		height: 0px; 
		width: 10px; 
		border: solid white 2.5px; 
		background-color: rgba(226, 245, 236, 0.7); 
		background-size: cover; 
		background-position: center; 
		opacity: 0.5; 
		transition: all 0.05s, opacity 0.5s; 
	} 
 
	.dot.active { 
		opacity: 1; 
	} 
} 
 
@media screen and (max-height: 321px) { 
	.header-text p { 
		-webkit-line-clamp: 1; 
	} 
} 
 ?>