@font-face {font-family: worldstar;	src: url(/extras/ttf/Worldstar.ttf);}
@font-face {font-family: liberation-serif; src: url(/extras/ttf/LiberationSerif-Regular.ttf);}
@font-face {font-family: transformers-movie; src: url(/extras/ttf/Transformers\ Movie.ttf);}
@font-face {font-family: robofan-symbol; src: url(/extras/ttf/Robofan\ Symbol.otf);}
@font-face {font-family: cybertronic; src: url(/extras/ttf/Modern\ Cybertronic.otf);}
@font-face {font-family: arial-narrow; src: url(/extras/ttf/arialnarrow.ttf);}
@font-face {font-family: cybero; src: url(/extras/ttf/Cybero\ Personal\ Use\ Only.ttf);}
:root {
	--dark-grey: #71706E;
	--grey: #A8A9AD;
	--silver: #D8D8D8;
	--red-1: #800000;
	--red-2: #4C0D0F;

	--img-pfp: url("https://i.ibb.co/CsHc2Hty/ezgif-com-animated-gif-maker.gif");
	--yap-user: "@iizpoopfart";
	--yap-user-1: "iizlovesMegatron";
}

	body { 
		background: url(https://i.ibb.co/R4StPFV7/megatron-shrine-bg-20260519190506.png) center/cover fixed black;
		font-family: liberation-serif;
		font-size: 16px;
		line-height: 22px;
		color: #fff;
	}

/* ===== basic styling ===== */	
	h1, h2, h3, h4, h5, h6{	font-family: transformers-movie; font-weight: normal; letter-spacing: 1px; text-shadow: 3px 3px 0 var(--red-1);}
	h2 {
		font-size: 2.2rem;
		text-align: center;
		margin: 10px auto;
	}	
	p {
		background: linear-gradient(to left, var(--red-2), black);
		padding: 8px;
		padding-bottom: 5px;
		color: #e3e3e3;
		margin-bottom: 0;
	}
	p.no-bg {background: 0 !important;}
	a { color: white; }
	a:hover { color: white; }
	b {color: #ff4242 !important; font-weight: 900;}
	hr {height: 15px; background: url(https://i.ibb.co/nNhbHKBc/1000125019-Photoroom.png) center/cover repeat-x; filter: contrast(1.2) saturate(1.5) brightness(0.7);}
	
	/* selection pseudo */
	::-moz-selection {  color: white;  background: #d10000;}
	::selection {  color: white;  background: #d10000;}

	.card {
		background: var(--grey);
		border: 0;
		border-radius: 0;
	}

	.card-body {
		background: rgba(0, 0, 0, 0.485);
		box-shadow: inset 0 0 20px 5px var(--red-1);
		border: 2px solid #ab0000;
	}


	/* scroll back to top */
	#SCROLLBACKTOTOP {
		color: white;
		font-family: worldstar;
		text-align: center;
		padding: 10px;
		background: #000000;
		border: 2px solid #ab0000;
		box-shadow: inset 0 0 20px 5px var(--red-1);
		display: none;
		cursor: pointer;		
		position: fixed; bottom: 10%; left: 14%;
		z-index: 9999;		
		transition: 0.2s ease;
		animation: show-up 0.5s ease;
		animation-fill-mode: both;
		filter: drop-shadow(0 0 5px red);
	}
	#SCROLLBACKTOTOP:hover {transform: scale(1.05);	background: red;}
	@keyframes show-up {
		from { position: fixed; bottom: 0; opacity: 0;}
		to { position: fixed; bottom: 2%; opacity: 1; }
	}
	@media (max-width: 799px) {
		#SCROLLBACKTOTOP {position: fixed; bottom: 15%; left: 10% !important;}
	}

	/*===== megatron graphic =====*/
	.big-megatron-graphic {
		position: fixed; right: -5%; bottom: 0;
		width: 100%;
		object-fit: cover;
		z-index: -999;
	}
	.big-megatron-graphic-mobile {
		z-index: -999;
		object-view-box: inset(5%);
		width: 100%;
		margin-top: -30px;
	}
	@media (max-width: 799px) {	.big-megatron-graphic {display: none;}}
	@media (min-width: 800px) {	.big-megatron-graphic-mobile {display: none;}}

/*===============================================================
/////////////////////	left side by order	/////////////////////
=================================================================*/

	.LEFT-SIDE {
		padding: 15px;
		position: sticky; top: 0;
		height: 100vh;
		background: url(https://i.ibb.co/YTJFnQDc/Untitled37-20260519190918.png) center/contain repeat-y rgb(47, 0, 0);
		box-shadow: inset 0 0 20px 5px var(--red-1);	
	}
	@media (max-width: 799px) {
		.LEFT-SIDE {
			height: auto !important;
		}
	}
	
	/* nav bar */
	#NAVBAR {
		h4 {margin: 5px; text-align: right;}
		ul.nav {
			a { 
				font-family: worldstar;
				font-size: 18px;
				letter-spacing: 1px;
				display: block;
				color: white;
				background: black;
				padding: 5px;
				text-align: center;
				text-transform: uppercase;
				border: 1px solid black;
			}
	
			a:hover {
				background: var(--red-2);
			}
	
			a:active {
				transform: scale(0.98);
				background: var(--red-1);
			}
		}
	}

	/* ===== MUSIC PLAYER BY GLENTHEMES =====*/
	#glenplayer02 {
		position:relative;
		top:0px;
		left:5px;
		display: flex; justify-content: center;
		text-align: center;
		z-index:99;

		a {text-decoration:none;}
		div {align-self:center;}
	}  
	.music-controls {
		user-select:none;
		width: 95%;
		cursor:pointer;

		.playy, .pausee {
			font-size: 2rem;
			text-shadow: -2px 0 #000, 0 2px #000, 2px 0 #000, 0 -2px #000, 0 0;
			display: flex; align-items: center; justify-content: center;
			margin: auto;
			height: 120px;
			width: 120px;
			background: url(https://i1.sndcdn.com/artworks-RaJRtZGyp1ZG-0-t500x500.jpg) center/cover;
			border-radius: 200px;
			transition: 0.2s ease;
		}
		.playy:hover {transform: scale(1.05); filter: drop-shadow(0 0 5px var(--red-1));}
		.pausee:hover {transform: scale(1.05); filter: drop-shadow(0 0 5px var(--red-1)); animation-play-state: paused;}
		
		.pausee {
			display: none; align-items: center; justify-content: center;
			animation: spin 5s linear infinite;} 
	}
	@keyframes spin {
		from {transform: rotate(0deg);}
		to {transform: rotate(360deg);}
	}
	@media (max-width: 799px) {	#glenplayer02 {display: none !important;}}


/*===============================================================
/////////////////////	right side by order	/////////////////////
=================================================================*/

	.RIGHT-SIDE {
		position: relative;
		padding: 20px;
		color: white;
		background: linear-gradient(#00000072, black);
		min-height: 100vh;

		h3 {
			margin-bottom: 0;
			margin-top: 20px;
			text-indent: 1.5rem;
			font-style: italic;
			background: linear-gradient(to left, transparent, var(--red-1));
			border-radius: 0;
			text-shadow: 3px 3px 0 black;
		}

	}

	/* card intro */
	.card-intro {
		display: flex;
		margin-bottom: -2px;

		img {
			width: 200px;
			height: 100%;
			object-fit: cover;
		}
	}

	ul.list-group {
		font-size: 14px;
		border: 0;
		border-radius: 0;
		margin: auto;
	}
	li.list-group-item {
		background: transparent;
		border-bottom: 2px solid #ab0000;
		padding: 3px;
		border-radius: 0;
		display: flex;
		justify-content: space-between;
	}
	li.list-group-item>span { 
		font-weight: bold;
		color: red;
	}

	/* card intro mobile */
	@media (max-width: 799px) {
		.card-intro {
			font-size: 12px;
			line-height: 14px;
		}
		.card-intro img {
			width: 100%;
		}
		ul.list-group li {
			text-align: right;
		}
		ul.list-group li span{
			text-align: left;
		}
	}

	/* ===== marquee ===== */ 
	.marquee-container {
		position: relative;
		display: flex;
		overflow: hidden;
		user-select: none;
		border-radius: var(--border-rounded);	

		img { max-width: 99px; height: 56px; margin-right: 5px; }
		img:hover {transform: scale(1.05); filter: drop-shadow(0 0 5px red); }
		
		.marquee {
			display: flex;
			animation: marquee 25s linear infinite;	}
		.marquee:hover {animation-play-state: paused;}
	}
	@keyframes marquee {
		from {transform: translateX(20%);}
		to {transform: translateX(calc(-100%));}}

	/* intro : who why how */

	/* continuities */
	#continuities {

		.col-6 {
			height: 250px;
			padding: 5px;
		}		

		.card-body {
			padding: 0;
			overflow-y: auto;
			overflow-x: hidden;
			height: 100%;
			background: black;

			border-radius: 5px;
			border: 5px ridge #ab0000;
			border-top: 5px double #ab0000;
			border-bottom: 5px double #ab0000;

			transition: 0.3s ease;
		}
		.card-body:hover {
			height: 150%;
			box-shadow: inset 0 0 20px 5px #ab0000;
			border-color: #d10000;
			background: black;
		}
		.card-body img.megatron {
			height: 200px !important;
			width: 100%;
			object-fit: cover;
		}
		.card-body h5 {
			margin: 5px auto;
			padding: 2px;

			text-shadow: none;
			text-align: center;
			font-family: worldstar;

			width: 100%;
			border-radius: 0;
			background: linear-gradient(var(--red-1), 80%, var(--red-2));
		}
		.card-body p {
			background: 0;
			font-size: 15px;
		}
	}
	
	/* continuities : mobile */
	@media (max-width: 799px) {
		#continuities {
			.col-6 {
			height: 210px;
			padding: 5px !important;
		}
			.card-body img.megatron {
				min-height: 150px;
				max-height: 150px;
				width: 100%;
				object-fit: cover;
			}
			
			.card-body:hover {
				height: 200%;
				background: black;
			}
		}
	}

	/* selfships */
	#selfships {

		a.mybtn {
			background: var(--red-1);
			padding: 5px 10px;
			position: absolute; bottom: 0; right: 0;
			border-radius: 20px 0 0 0;
			opacity: 0.5;
			transition: 0.3s ease;
		}
		a.mybtn:hover {
			opacity: 1;
		}

		.card-body {
			border-radius: 0 0 20px 20px;
			padding: 10px;
		}
		.card-body > .row.no-gutters {
			border-radius: 0 0 20px 20px;
			overflow: hidden;
			filter: drop-shadow(0 0 2px black);
		}	
			
		.ship-info {
			margin: 20px auto;
			padding: 20px;
			background: url(https://i.pinimg.com/736x/d3/01/51/d3015178b253ff1646207e1d78676fcd.jpg) center/cover black;
			box-shadow: inset 0 0 20px 5px var(--red-1);
			border: 2px solid #ab0000;
			border-bottom: 5px double #ab0000;
			border-top: 5px double #ab0000;
			border-radius: 50px 0 50px 0;
		}
		.ship-info .row.no-gutters {
			gap: 20px;
			border-radius: 40px 0 40px 0;
			overflow: hidden;
			filter: drop-shadow(0 0 3px black);
		}		
		.ship-info img.profile {
			width: 100%;
			height: 180px;
			object-fit: cover;
			display: block;
			margin-bottom: -15px;
		}
		.ship-info hr {
			border-bottom: 3px dashed #ab0000;
			border-top: 0;
			margin: 8px auto;
			background: 0;
		}
		.ship-info p.name {
			background: 0;
			text-align: center;
			font-style: italic;
			margin: -10px auto;
			font-size: 20px;
			font-weight: 900;
			filter: drop-shadow(0 3px 0 var(--red-1));
		}
		.ship-info p.info {
			background: 0;
			text-align: center;
			font-size: 14px;
			margin: -10px auto;
			margin-bottom: 5px;
		}
		.ship-info p.desc {
			font-style: italic;
			font-size: 14px;
			line-height: 15px;
			margin: -5px auto;
			padding: 5px;
			text-indent: 1rem;
			background: var(--red-2);
		}
		.ship-info p {
			background: 0;
			margin: 0;
			margin-bottom: -5px;
		}
		.ship-info .progress {
			background: var(--red-1);
			margin: auto;
			width: 95%;
			height: 5px;
			border-radius: 10px;
			filter: drop-shadow(0 3px 0 black);
		}
		.ship-info .progress > .progress-bar {
			background: red;
		}
	}

	/* yapping */
	#yapping {
		background: #231a1a url(https://64.media.tumblr.com/14a5d48f0c60aefd5892cda8a5ef0ad8/a87663422dd3d0ff-ff/s250x400/e1fa72967d14205ace3c56c718070232dbe63dd4.pnj);
		padding: 20px 0;
		font-family: arial;
		font-size: 16px;
		line-height: 18.5px;
		margin: -20px;

		hr {
			margin: 10px 0;
			background: 0;
			height: 1px;
			width: 100%;
			border: 0;
			border-bottom: 1px solid var(--grey);
		}
		header.header-profile {
			background: black;
			position: relative;
			padding: 0;	margin: 0;
			margin-top: -40px;
			margin-bottom: 10px;
			border-bottom: 1px solid var(--grey);
			
			.banner {
				background: url(https://i.pinimg.com/736x/c9/a0/3a/c9a03a222cbfd43c54815fef80f07ac8.jpg) center/cover var(--red-2);
				height: 200px;
				width: 100%;
				display: block;
				position: relative;
				
			}
			.userrnamee {
				background: linear-gradient(var(--red-1), 20%, var(--red-2));
				color: white;
				display: flex; align-items: center;
				width: 80%;
				padding-left: 35px;
				position: absolute; bottom: -40px; right: 0;
			}
			span.userrname { display: flex; margin: 8px 0; }
			span.userrname::before{
				content: var(--yap-user-1);
				font-size: 25px;
				font-weight: bold;
				margin-right: 8px;
			}
			span.userrname::after {	font-size: 18px; content: var(--yap-user);}
			.content {	position: relative; bottom: 50px; margin-bottom: -30px; }
			.content > img {
				content: var(--img-pfp);
				object-fit: cover;
				object-position: center;
				height: 100px;
				width: 100px;
				outline: 5px solid black;
				border-radius: 500px;
				margin-left: 20px;
				z-index: 99;
			}
			.content > span {
				display: block;
				font-size: 15px;
				line-height: 17px;
				padding: 0 20px;
				margin-top: 10px;
			}
			.content span.hashtags { color: var(--grey); font-style: italic; display: block;}
		}		
		.yap {
			padding: 10px;
			padding-right: 20px;
			margin-left: 60px;
			color: #d7d4d4;

			header {
				margin: -10px;
				margin-left: -60px;
				margin-bottom: -28px;
				display: flex;
				align-items: top;
				line-height: 19px;

				div {
					position: relative;
					background: linear-gradient(var(--red-1), 20%, var(--red-2));
					text-shadow: 2px 2px 2px black;
					color: white;
					font-size: 15px;
					letter-spacing: 0.3px;
					height: 25px;
					padding: 4px 10px 0 5px;
					margin: 5px;
				}
				div::before {content: var(--yap-user-1); font-weight: bold; margin-right: 5px;}
				div::after {
					content: "...";
					position: absolute;
					right: -82%; top: -3px;
					font-size: 20px;
					color: #9f9e9c;
					font-weight: bold;
				}
				span {color: #dbd2d2;}
				img {
					content: var(--img-pfp);
					object-fit: cover;
					object-position: center;
					border-radius: 200px;
					height: 45px;
					width: 45px;
					margin: 8px 5px;
				}
			}
			p {
				background: 0;
				margin: 5px 0;
				padding: 0;
				padding-right: 5px;
			}
			a {color: #ff7b7b; text-decoration: underline;}
		}
		.yap::after {
			display: block;
			content: "";
			margin-top: 20px;
			margin-left: -50px;
			border-bottom: 1px solid var(--dark-grey);
		}
		.yap > .more-img {
			display: flex; justify-content: start;
			img {
				width: 45%;
				height: 100%;
				object-fit: cover;
				margin: 5px;
				border-radius: 5px;
				transition: 0.3s ease;
			}
			img:hover {	width: 70%; border-radius: 0;}
		}
		.yap > img {
			width: 50%;
			height: 100%;
			object-fit: cover;
			margin: 2px 0;
			border-radius: 5px;
			transition: 0.3s ease;
		}
		.yap > img:hover {
			width: 95%;
			height: 100%;
			border-radius: 0;
		}
	}

	/* essay */
	#READMORE-BTN {
		background: rgba(0, 0, 0, 0.485);
		box-shadow: inset 0 0 20px 5px var(--red-1);
		border: 2px solid #ab0000;
		font-family: worldstar;
		color: white;
		text-align: center;
		padding: 5px;
		z-index: 999 !important;
		transition: 0.2s ease;
	}
	#READMORE-BTN:hover {background: var(--red-1);}
	#more {display: none;}

	/* fun facts */
	#button-fun-fact {
		background: var(--red-1);
		border: 1px solid black;
		padding: 5px;
		user-select: none;
		display: block;
		cursor: pointer;
	}
	#button-fun-fact:active {
		border: 1px solid red;
		background: #ab0000;
		transform: scale(0.98);
		padding: 2.5px;
	}

	/* footer things */	
	.footer {		
		margin: 20px -20px -20px -20px;

		hr {margin: 20px;}
		.fun-facts {margin: 20px; padding: 10px;}
		.credits {
			background: linear-gradient(to top, #910303, transparent);
			padding: 5px;			
			p {margin: -5x 10px; font-size: 14px;	line-height: 15px;}
		}
	}

	img.stupid-pagedoll {
		width: 450px;
		object-fit: cover;
		object-position: 0 20px;
		position: absolute; right: -55%; bottom: 0;
		z-index: 1;
		pointer-events: none;
	}
	@media (max-width: 799px) { img.stupid-pagedoll { display: none;} }