/*--=================================================================
///////////////////////////////////////////////////////////////////
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀  ⢠⠀⠀⠀⠀⠀ ⠀⠀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⢸⣄⠀⠀⠀⠀⠀⠀⠀⠀  ⣧⡀⠀⠀⠀⠀ ⢀⣼⠀⠀⠀⠀⠀⠀⠀⠀  ⣠⣼
⠀⣿⣧⣀⡀⠀⠀⠀⠀⠀⠀ ⣿⣷⡀⠀⠀⢀⣾⡟⠀⠀⠀⠀⠀⠀ ⣀⣴⣿⣿⠀
⠀⣿⣿⣿⣿⣿⣷⣶⣤⣤⠀⢸⣿⣿⣿⣿⣿⣿⡇⠀⣠⣤⣶⣶⣿⣿⣿⣿⡟⠀ 
⠀⢹⣿⣿⣤⣈⣉⠛⠛⠿⠆⠸⣿⣷⠀⠀⣾⣿⠀⠸⠿⠟⠛⠋⣉⣁⣿⣿⡇⠀	CSS Transformers style sheet
⠀⢸⣿⣿⡟⠛⠿⠿⣷⣶⡄⠀⣿⣿⣇⣸⣿⡟⠀⣤⣴⣶⡾⠿⠟⢻⣿⣿⠁⠀		used in: Transformers html &
⠀⠘⣿⣿⣿⣷⣶⣤⣤⣀⠁⠀⠻⣿⣿⣿⣿⠇⠀⠉⣁⣠⣤⣴⣶⣾⣿⡿⠀⠀					Transformers warning html
⠀⠀⠈⢿⣿⡿⢿⣿⣿⣿⣿⣷⣄⠈⠻⠟⠁⣠⣾⣿⣿⣿⣿⣿⣿⣿⠟⠁⠀⠀	
⠀⠀⣧⡀⠻⣿⣄⠈⠉⠛⠛⠿⢿⣷⣄⣴⣾⡿⠿⠟⠛⠉⢉⣴⣿⠋⢠⡎⠀⠀	Last clean: MAY 3 2026
⠀⠀⣿⣷⡄⠘⢿⣷⣄⠀⠀⠀⢠⣿⣿⣿⣧⠀⠀⠀⢀⣴⣿⡟⠁⣰⣿⡇⠀⠀	
⠀⠀⢻⣿⣿⣦⠈⢻⣿⣷⣄⢀⣿⣿⣿⣿⣿⣧⠀⣰⣿⣿⠏⢀⣾⣿⣿⠇⠀⠀
⠀⠀⢸⣿⣿⣿⣷⡀⠙⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠁⣠⣿⣿⣿⣿⠀⠀⠀
⠀⠀⢸⣿⣿⣿⣿⣿⣄⠈⢿⣿⣿⣿⣿⣿⣿⣿⣿⠟⢀⣴⣿⣿⣿⣿⣿⠀⠀⠀ALL HAIL MEGATRON!
⠀⠀⠘⠿⣿⣿⣿⣿⣿⣧⡀⠻⣿⣿⣿⣿⣿⡿⠃⢠⣾⣿⣿⣿⣿⣿⠏⠀⠀⠀
⠀⠀⠀⠀⠀⠉⠙⠻⢿⣿⣷⡄⠘⢿⣿⣿⠟⠀⣴⣿⣿⠿⠟⠋⠁⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠛⠦⠈⠻⠋⠀⠞⠋⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
///////////////////////////////////////////////////////////////////
====================================================================*/

@font-face {font-family: TF-movie;	src: url(ttf/Transformers\ Movie.ttf);}
@font-face {font-family: robofan;	src: url(ttf/Robofan\ Symbol.otf);}
@font-face {font-family: megatron;	src: url(ttf/Megatron.otf);}
@font-face {font-family: vcr-osd-mono;	src: url(ttf/VCR_OSD_MONO_1.001.ttf);}
@font-face {font-family: cybero; src: url(ttf/Cybero\ Personal\ Use\ Only.ttf);}
@font-face {font-family: cybertronic; src: url(ttf/Modern\ Cybertronic.otf);}
@font-face {font-family: arial-narrow;src: url(ttf/arialnarrow.ttf);}

/* ===== scrolls ===== */
	.scroll { overflow-y: auto; overflow-x: hidden; }
	.no-scrollbar::-webkit-scrollbar {	width: 0px; } 
	.no-scrollbar-lg::-webkit-scrollbar {@media (max-width: 768px) {width: auto !important; }} 
/* flat on mobile */
	.mobile-flat {@media (max-width: 768px) {height: auto !important;}}

/**/

:root {
	--dark-blue: #27185c;
	--blue: #2c61b0;
	--light-blue: #37a5e1;
	--lightest-blue: #5de4f4;

}
	body {
		background: url() black;
		color: white;
		font-size: 15px;
		font-family: vcr-osd-mono;
	}

::-moz-selection {
  color: white;
  background: var(--blue);
}
::selection {
  color: white;
  background: var(--blue);
}

/* basic styling */

	a { color: var(--lightest-blue); }
	.no-indent {text-indent: 0 !important;}
	p { z-index: 999; text-indent: 2.5rem; line-height: 18px; }
	.text-faded { opacity: 0.5; }
	b, strong { color: aqua; }
	.highlight { color: aqua; }
	hr { border: 1px solid var(--light-blue); }
	hr.hr-2 { border: 0.5px dashed #2c61b0c9; }
	h1 { font-size: 3.5rem; }
	h2 { font-size: 3rem; }
	h3 { font-size: 2.5rem; }
	h4 { font-size: 2rem; }
	h1::after, h2::after, h3::after, h4::after, h5::after, h6::after { 
		content: "";
		display: block;
		height: 1px;
		margin: 10px auto;
		width: 90%;
		border: 1px solid var(--light-blue);
	}
	h1, h2, h3, h4, h5, h6 { font-family: cybero; text-indent: 2rem; margin-top: -5px;}

	img { object-fit: cover; }

	@media (max-width: 768px) {
	h1, h2, h3, h4, h5, h6 { margin-left: 0; text-indent: 1rem; line-height: 1.5rem;} 
	h1 { font-size: 3rem; }
	h2 { font-size: 2.5rem; }
	h3 { font-size: 1.8rem; }
	h4 { font-size: 1.5rem; }

	p { font-size: 14px; line-height: 16px; margin-bottom: 8px; }
}
		
/* navigation */
	#NAVIGATION {
		a {
			overflow: hidden;
			margin: 5px -10px 5px -10px;
			font-family: cybero;
			font-size: 1.5rem;
			color: var(--lightest-blue);
			transition: 0.03s ease;
		}
		a:hover { transform: scale(1.03); color: white; }

		a:active {
			transform: scale(0.99);
			box-shadow: inset 0 0 20px 5px var(--light-blue) !important;
			}

		a.card {
			border: 0 transparent;
			border-radius: 0;
			box-shadow: inset 0 0 20px 5px var(--blue);
			background: var(--dark-blue);
			filter: drop-shadow(3px 3px 0 var(--light-blue));
		}	
		
		a.card:active {	filter: drop-shadow(1px 1px 0 var(--light-blue));	}
	}

/* main TF-card */
	.TF-card {
		overflow: hidden;
		padding: 30px; padding-top: 40px;
		border: 5px double var(--light-blue);
		border-radius: 0;
		background: #2e197ba3;
		box-shadow: inset 0 0 50px 5px var(--blue);
		margin: 20px 0 20px 0;
		animation-name: shine;
		animation-duration: 0.8s;
		animation-iteration-count: ease-in; 
	}

	@media (max-width: 786px) {	.TF-card { padding: 15px; padding-top: 30px;}}

	@keyframes shine {
			from {  box-shadow: inset 0 0 50px 15px var(--light-blue); background: #29166dce; }
			to { box-shadow: inset 0 0 50px 5px var(--blue);  }
		}	

	@keyframes shine-image {
		from { mix-blend-mode: luminosity; }
		to { mix-blend-mode: normal; }
	}

	img.carded {		
		box-shadow: inset 0 0 50px 5px var(--blue);
		border: 2px solid var(--light-blue);
		border-radius: 0;
		padding: 5px;	
		animation-name: shine-image;
		animation-duration: 0.8s;
		animation-iteration-count: ease-in; 
	}


	/* card borders */
	.TF-card-left-corner {
		object-fit: cover;
		user-select: none;
		width: 400px; position: absolute; top: 0; left: 0;
		content: url(extras/TF-card_left-corner.png);
	}
	.TF-card-right-corner {
		object-fit: cover;
		user-select: none;
		display: block;
		width: 400px; position: absolute; top: 0; right: 0;
		content: url(extras/TF-card_right-corner.png);
	}
	.TF-card-left-corner-2 {
		object-fit: cover;
		user-select: none;
		display: block;
		width: 400px; position: absolute; bottom: 0; left: 0; rotate: 180deg;
		content: url(extras/TF-card_right-corner.png);
	}
	.TF-card-right-corner-2 {
		object-fit: cover;
		user-select: none;
		width: 400px; position: absolute; bottom: 0; right: 0; rotate: 180deg;
		content: url(extras/TF-card_left-corner.png);
	}

	/* card borders mobile */
	@media (max-width: 768px) {
		.TF-card-left-corner {  
			user-select: none;
			width: 80%;
		}

		.TF-card-right-corner-2 {  
			user-select: none;
			width: 80%;
		}

		.TF-card-right-corner, .TF-card-left-corner-2 { display: none !important; }
	}

	/* tab title */
	#TAB-TITLE {
		background: radial-gradient(var(--blue), transparent, transparent);
		display: flex; justify-content: center; align-content: center;
		margin: 30px auto 5px auto;
		p {
			font-family: TF-movie;
			font-size: 2.5rem;
			letter-spacing: 2px;
			text-indent: 0;
			line-height: 2rem;
			text-align: center;
			margin: 0;
		}
		img.autobot {
			content: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/cc938bdf-1540-4b61-8150-c9dc0fe24c5c/dfmavs8-c9f7eeb7-0d94-48a5-bc91-98dfb9082bce.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiIvZi9jYzkzOGJkZi0xNTQwLTRiNjEtODE1MC1jOWRjMGZlMjRjNWMvZGZtYXZzOC1jOWY3ZWViNy0wZDk0LTQ4YTUtYmM5MS05OGRmYjkwODJiY2UuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.xs8KYMsKrV8OdIBvge0-5lLnpaivxMxfb13YMr3J2LM);
			height: 2.8rem;
			margin: -5px 10px 0 10px;
		}
		img.decepticon {
			content: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/cc938bdf-1540-4b61-8150-c9dc0fe24c5c/dfmk2zi-0a50052c-9e96-4aa5-95e0-e5915503907e.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiIvZi9jYzkzOGJkZi0xNTQwLTRiNjEtODE1MC1jOWRjMGZlMjRjNWMvZGZtazJ6aS0wYTUwMDUyYy05ZTk2LTRhYTUtOTVlMC1lNTkxNTUwMzkwN2UuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.6bTT7KcPeV83miSAi_2hykynX2PLuUIJ4LuMHilU8IQ);
			height: 2.8rem;
			margin: -5px 10px 0 10px;
		}
	}

	/* tab title mobile screen */
	@media (max-width: 768px) {
		#TAB-TITLE {
			p { font-size: 2rem; margin: auto; }
			img.autobot, img.decepticon { margin: auto; }
		}
	}

	/* card bg */
	img.decepticon-bg {
		content: url(https://files.catbox.moe/1aqggh.png);
		width: 200px;
		position: absolute; bottom: 1rem; mix-blend-mode: lighten; opacity: 0.3;
		user-select: none;
	}
	img.autobot-bg {
		content: url(https://files.catbox.moe/c5i3fr.jpg);
		width: 200px;
		position: absolute; bottom: 1rem; right: 0; mix-blend-mode: lighten; opacity: 0.3;
		user-select: none;
	}

	@media (max-width: 768px) {
		img.decepticon-bg {
			width: 150px;
			position: absolute; bottom: 1rem; mix-blend-mode: lighten; opacity: 0.3;
			user-select: none;
		}
		img.autobot-bg {
			width: 150px;
			position: absolute; bottom: 1rem; right: 0; mix-blend-mode: lighten; opacity: 0.3;
			user-select: none;
		}
	}

/*=======================================
//////////////	 id styling ///////////////
========================================*/

/* id: fav characters */
	#FAV-CHARAS {
		.carded.card {
		background: transparent;
		border: 2px solid var(--light-blue);
		border-radius: 0;
		padding: 10px;	}

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

		.desc { background: linear-gradient(to bottom, var(--dark-blue), var(--blue)); border: 2px solid var(--light-blue); padding: 3px; margin-top: -2px; }
		p { text-align: center; text-indent: 0; margin-bottom: 0; font-size: 0.8rem; line-height: 1rem;}
		p.name { font-size: 1.5rem; margin: 5px auto 5px auto;  text-transform: capitalize; line-height: 1.1rem;  }
		p.continuity { color: var(--lightest-blue); font-size: 1rem; margin: 10px auto 5px auto;  text-transform: capitalize; }
	}

	/* fav character mobile */
	@media (max-width: 768px){
		#FAV-CHARAS {
			.carded.card { padding: 5px; }
			img { height: 150px; }
			p.name { font-size: 1.3rem; margin: 5px auto 5px auto; }
		}
	}

/* id: ocs */
	#TF-OCS {
		z-index: 999;

		.TF-card {	padding: 15px;	}

		p.name-title { 
			font-size: 2rem;
			line-height: 1.8rem;
			font-family: cybero;
			text-indent: 0;
			text-align: center;
			font-style: italic;
			margin: 0;

			span { 
				font-size: 1.2rem; 
				color: var(--lightest-blue); 
				margin-bottom: 10px;
				display: block;
				line-height: 1.3rem;
			}
		}

		img {
			object-fit: cover;
			width: 150px;
			height: auto;
		}

		p.quote {
			text-indent: 0;
			text-align: center;
			font-style: italic;
			margin: 5px auto 15px auto;
		}

		a {
			color: var(--lightest-blue);
			text-align: center;
			margin: auto;
			display: block;
			position: absolute; bottom: 0.5rem; left: 0.8rem;
			font-size: 0.8rem;
		}

			.TF-card-left-corner {
				object-fit: cover;
				width: 200px;
			}
			.TF-card-right-corner {
				object-fit: cover;
				width: 200px;
			}
			.TF-card-left-corner-2 {
				object-fit: cover;
				width: 200px;
			}
			.TF-card-right-corner-2 {
				object-fit: cover;
				width: 200px;
			}
	}

	#TF-OCS-INFO {
		background: linear-gradient(to bottom, var(--dark-blue), var(--blue));
		border: 2px solid var(--light-blue);
		border-radius: 0;
		margin-left: 10px;
		padding: 5px;
		p {
			font-size: 12px;
			text-indent: 0;
			margin: 5px
		}
	}

	#wip-oc-thing {
		img { outline: 1px solid var(--lightest-blue); padding: 5px; box-shadow: inset 0 0 10px 1px var(--light-blue); }
		p {font-family: cybero; font-size: 1.5rem; margin-bottom: 0; margin-top: 5px;}
		span { display: block; color: var(--lightest-blue); font-size: 1rem; line-height: 1rem; margin-top: 0; }
	}

	/* tf ocs mobile */
	@media (max-width: 768px) { 

		#TF-OCS {
			z-index: 999;

			p.name-title { 
				font-size: 1.8rem;
				margin: 0;

				span { 
					font-size: 0.8rem; 
					line-height: 1rem;
				}
			}

			p.quote {
				font-size: 0.8rem;
				line-height: 0.9rem;
				margin: 10px 0 20px 0;
			}

			a {
				position: absolute; bottom: 1.2rem; left: 1.2rem;
				font-size: 0.6rem;
			}

				.TF-card-left-corner {
					object-fit: cover;
					width: 80%;
				}
				.TF-card-right-corner-2 {
					object-fit: cover;
					width: 80%; rotate: 180deg;
				}
				.TF-card-right-corner, .TF-card-left-corner-2 { display: none; }
		}

		#TF-OCS-INFO {
			margin: 0;
			padding: 5px;
			p {	font-size: 11px;	}
		}

		#wip-oc-thing {
			img { padding: 2px; }
			p {font-size: 1rem;}
			span {font-size: 0.8rem; line-height: 0.9rem; margin-top: 1px; }
		}
	}

/* id: graphics */
	#GRAPHICS {
		display: flex; justify-content: center;
		.stamps {
			img {
				z-index: 9999999;
				width: 99px;
				height: 56px;
				object-fit: cover;
				margin: 2px -3px 2px -3px;
			}
		}
	}

/* id: yapping tabs */
	#side-tab {	a { display: block; }}

	#TF-YAPPING {
		p { font-size: 1.1rem; line-height: 1.3rem; margin-bottom: 0.5rem; font-family: arial-narrow; }
		img { margin: 5px auto; display: flex; justify-content: center; }
		p.img-desc { color: var(--lightest-blue); display: block; line-height: 1.1rem; text-align: center; text-indent: 0; margin-bottom: 8px; }
		p.date { font-size: 0.9rem; line-height: 1.1rem; margin-top: 20px; color: var(--lightest-blue); display: block; text-align: center; text-indent: 0; }
		p.list { text-indent: 0; }
		p.list::before { 
			content: "-";
			margin-right: 0.5rem;
		 }
		h1, h2, h3, h4, h5, h6 { margin: 5px auto 5px auto; text-align: center; text-indent: 0; }

		.TF-card-left-corner, .TF-card-left-corner-2, .TF-card-right-corner, .TF-card-right-corner-2 { margin: 0;}
	}