/* new about page - development started august 26, 2026 */
/* quadruple shoutouts to xkeeper. you genuinely deserve it! (did not help just felt like saying that lmao) */

body {
	background-image: url("../img/elements/about/irix/about_bg_irix2.gif");
	background-attachment: fixed;
	font-family: tahoma, sans-serif;
	font-size: 14px;
	margin: 0;
	padding: 0;
}

/* IRIX window code */
.window {
	position: absolute;
	top: 6px; left: 0; right: 0; bottom: 6px;
	max-width: 700px;
	margin: 0 auto;
	padding: 0;
}
.window .t-navi {
	position: relative;
	background-image: url("../img/elements/about/irix/t-bg.gif");
	background-repeat: repeat-x;
	height: 32px;
}
.window .lt-navi, .window .rt-navi {
	position: absolute; top: 0; 
	height: 32px; background-repeat: no-repeat;
}
.lt-navi {width: 200px; left: 0; background-image: url("../img/elements/about/irix/t-left.gif");}
.rt-navi {width: 60px; right: 0; background-image: url("../img/elements/about/irix/t-rght.gif");}

.lt-navi a {
	margin: 8px;
	width: 24px; height: 24px;
	display: inline-block;
}

.window .navi {
	position: relative;
	background-image: url("../img/elements/about/irix/n-bg.gif");
	background-repeat: repeat-x;
	height: 26px;
}
.window .l-navi, .window .r-navi {
	position: absolute; top: 0; 
	width: 12px; height: 26px; 
	background-repeat: no-repeat;
}
.c-navi {padding: 2px 12px 2px 12px;}
.c-navi a {display:inline-block;}

.l-navi {left: 0; background-image: url("../img/elements/about/irix/n-left.gif");}
.r-navi {right: 0; background-image: url("../img/elements/about/irix/n-rght.gif");}

.window .c-page {
	position:absolute;
	top:58px; bottom:8px; right:0; left:0;
}

.window .l-page, .window .r-page {
	position: absolute; top: 0; bottom: 0;
	width: 7px; height: 100%; 
	background-repeat: repeat-y;
}
.window .lb-page, .window .rb-page {
	position: absolute; bottom: 0;
	width: 7px; height: 26px; 
	background-repeat: no-repeat;
}
.l-page {left: 0; background-image: url("../img/elements/about/irix/c-left.gif"); border-right:1px solid #306176;}
.r-page {right: 0; background-image: url("../img/elements/about/irix/c-rght.gif"); border-left:1px solid black;}
.lb-page {background-image: url("../img/elements/about/irix/cb-left.gif");}
.rb-page {background-image: url("../img/elements/about/irix/cb-rght.gif"); background-position-x: -1px;}

.window .btm {
	position: absolute; bottom: 0; 
	background-image: url("../img/elements/about/irix/b-bg.gif");
	background-repeat: repeat-x;
	width: 100%; height: 8px;
}
.window .l-btm, .window .r-btm {
	position: absolute; bottom: 0; 
	width: 34px; height: 8px; 
	background-repeat: no-repeat;
}
.l-btm {left: 0; background-image: url("../img/elements/about/irix/b-left.gif");}
.r-btm {right: 0; background-image: url("../img/elements/about/irix/b-rght.gif");}

/* end of IRIX window code */

.page-container {
	margin: 0 auto;
	position: absolute;
	top: 0; bottom: 0;
	left: 7px; right: 7px;
	overflow: scroll;
	background-color: white;
	padding: 0 20px;
	/*overflow-x: hidden;*/
}

hr {color: white;}

.bio-header {
	max-width: 685px; /* was 630px; */
	margin: 0 -20px;
	min-height:410px;
	background-image: url("../img/elements/about/headermost_col-ext.png");
	background-repeat: no-repeat;
	border-collapse: collapse;
}

.bio-top {height:120px;}
.bio-info {
	height: 60px;
	font-size: 10px;
}
.bio-info ul {
	list-style-type: none;
	padding-left: 277px;
	margin: 0;
}

.bio-info ul li.name {padding-left:25px;}
.bio-info ul li.age {padding-left:20px;}
.bio-info ul li.pronouns {padding-left:15px;}
.bio-info ul li.hobbies {padding-left:10px;}

.bio-header td {vertical-align: top;} /* since it's clear everything needs to be top aligned atp */

.bio-detail {
	padding-left: 235px;
	padding-right: 15px;
}
.bio-detail p {
	margin-top: 0px; margin-bottom: 10px;
	text-shadow: -2px 2px 1px white;
}

table.medium-table {
	max-width: 625px; margin: 10px auto;
	border-collapse: collapse;
}
tr, td {border: 0;}
.medium-table .content {padding: 0 12px;}
.medium-table .content p {margin: 5px 0;}
.medium-table .gallery-link {text-align: right; display: block;}
.medium-samples {
	display: inline-block; white-space: nowrap;
	margin: 0 auto;position: relative;
	height: 90px; overflow-x: scroll; overflow-y: hidden;
}
.medium-samples a {display: inline-block;vertical-align: top;}
.medium-samples img {width:110px;}

.medium-ctx, .medium-left {padding: 0;vertical-align: top;}
.medium-left, .medium-left a {
	width: 170px;
	height: 280px;
	overflow: hidden;
}
.medium-left a {z-index: 1;}
.medium-left img {
	/*width: 250%; position: absolute; left: -116px; top: -22px;*/
	width: 100%;

}
.medium-left a {
	position: relative;
	display:inline-block;
}
.medium-left a::after {
	position: absolute;
	top:0; left:0; right:0; bottom:0;
	content: "";
	background-image: url("../img/elements/about/page-mask.png");
	background-repeat: no-repeat;
	background-position: bottom left;
	background-size: 50px;
}

.medium-data {
	box-shadow: 0 -5px 10px white;
	display: inline-block;
	margin: 0 auto;
	position: relative;
}
.medium-data .credit, .category .credit {
	font-size: 10px; opacity: 0.5;
}

/* cat links,,, ^w^ */
.medium-catlinks {
	width: 250px;
	height: 19px;
	line-height: 5px;
	padding: 3px 5px;
	vertical-align: top;
	display: inline-block;
	/*border-top: 2px solid;
	border-bottom: 2px solid;*/
}
.medium-catlinks img {
	padding: 2px;
	font-size: 10px;
	vertical-align: top;
}

/*#mediums-default {display:block;}
#categories {display:none;}*/

#animation:target .header,
#backgrounds:target .header,
#characters:target .header,
#mografx:target .header,
#objects:target .header,
#webdev:target .header {
	filter: invert(1);
	background: linear-gradient(90deg,rgb(255, 255, 255) 81%, rgba(255, 255, 255, 0) 100%);
}

.category p {margin: 5px 0;}
.category {margin: 20px auto;}
.category-box .header {padding-bottom: 3px;}
.category-box .header, .category-samples {border-left: 2px solid black;}
.category-box {margin: 0 auto;}
.category-samples a {display:inline-block;}
.category-samples img {height:105px;border-bottom: 2px solid black;}

.clients {margin: 0 auto; text-align: center;}
.clients img {height: 32px; padding: 0 5px; opacity: .25;}

/* hover */
.medium-samples img:hover, .category-samples img:hover, .medium-left a:hover img {filter: brightness(1.25);}
.gallery-link img:hover {opacity: .75;}
.clients img:hover {opacity: 1;}


/* social media links */
#social-links-only {max-width: 500px;margin: 10px auto;}
#socials, #social-links-only {
	text-align: center; 
	font-family: sans-serif; 
	font-style: italic;
}

#socials .social-link {padding: 8px;}
#social-links-only a {
	padding: 4px 8px; color: black;
	text-decoration: none;
}
#socials .social-link, 
#social-links-only a {display: inline-block; vertical-align: top;}

#socials a.social-link {text-decoration: none;}
#socials .social-link img {margin: 0 auto;display: block;}
#socials .social-link p {
	font-family: sans-serif; font-style: italic;
	text-align: center; font-size: 15px;
	margin: 0 auto; display: block; 
	color: black;
}

.section-header {
	margin: 0 auto; display: block;
	text-align: center; background: white;
	margin-left: -20px; margin-right: -20px;
	padding: 5px 0;
}
.section-header img {margin-top: 25px;}
/*.section-header.first {text-align: left;padding-left: 25px;}*/

.footer {
	font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;
	margin-left: -20px; margin-right: -20px; margin-bottom: 15px;
	padding: 0 15px;
}

#socials .social-link:hover p, #social-links-only a:hover {color: white;background: black;}
/* dark-mode modifications */
/* just something interesting i decided to do :P */
@media (prefers-color-scheme: dark) {
	html{scrollbar-color: #33d6d6 #002929;}
	.page-container {background: #222;color:white;}
	hr {color: #484848;}
	.bio-header {
		color: white;
		background-color: black;
		background-image: url("../img/elements/about/headermost_dark-ext.png");
	}
	.bio-detail p {
		text-shadow: -2px 2px 1px #222;
	}
	.category-box .header {filter: invert(1);}
	.category-samples {border-left: 2px solid white;}
	.category-samples img {height:105px;border-bottom: 2px solid white;}
	#social-links-only a, #socials .social-link p {color: white;}
	#socials .social-link:hover p, #social-links-only a:hover {color: black;background: white;}
	/* still hate that i have to do it like this... */
	#animation:target .header,
	#backgrounds:target .header,
	#characters:target .header,
	#mografx:target .header,
	#objects:target .header,
	#webdev:target .header {
		filter: invert(0);
		background: linear-gradient(90deg,rgb(0, 0, 0) 81%, rgba(0, 0, 0, 0) 100%);
	}
	.medium-table {color: white; background-color:#222;}
	.medium-header img, .medium-left a::after {filter: invert(0.8665);}
	.medium-data {box-shadow: 0 -5px 10px #222;}
	.clients img {filter: invert(1);}
	.section-header {
		background: #777;
		box-shadow: inset 0 60px 25px -30px #222, 0 5px 7px #484848;
	}
	/*.section-header img {filter: drop-shadow(-1px 0 1px white) drop-shadow(0 0 1px white) drop-shadow(1px 0 1px white);}*/
	.section-header.first {box-shadow: inset 0 60px 25px -30px black, 0 5px 7px #484848;}
	/*.section-header {filter: invert(1) hue-rotate(-180deg);}*/
}

/* low screen resolution changes */
@media screen and (max-width: 580px) {.medium-samples {width: 330px;}.section-header img {width: 90%;}}
@media screen and (max-width: 510px) {.medium-samples {width: 220px;}}