/*Main CSS*/

/*imports*/
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

/*Theme - I'm debating if it's worth doing a CSS clean-up to make this easier to theme...*/
:root {
	--color:#261f40;
	--burgericon:url(/assets/burger.svg); /* nav burger icon */
	--closeicon:url(/assets/close.svg); /* nav close icon */
}

body {
	background-color:#817e9e;
	background-image: url(../axiom-pattern.png);
		background-position: center;
		background-size: ;
		background-attachment:fixed;
	color:#261f40;
	font-family: arial, sans-serif;
	max-width:1100px;
	margin:auto;
	padding-left:7px;
	padding-right:7px;
}

/*body variants*/
.bod2{	 /*gallery*/
	max-width:1000px
}

.bod3{	/*mini*/
	max-width:1200px
}

/*mini page*/
.mini {
	max-width:600px;
	min-height:100px;
	margin:auto;
		margin-top:30px;
		margin-bottom:30px;
}

h1, h2, h3, h4, h5 {
	font-weight:bold;
	font-style:italic;
	margin-top:10px;
	margin-bottom:10px;
	padding: 3px 10px 3px 0px;
}
	h1 {
		font-size:2em;
	}

.hDivide {
	background-color: #f282a0;
	background-image: linear-gradient(45deg, rgba(222,97,130,1) 15%, rgba(194,69,114,1) 80%);
	color:#ffffff;
	padding: 5px 10px;
	box-shadow:3px 3px 0px rgba(67, 61, 82,0.3);
		border: 1px solid #a5345d;
}

p, ul, li {
	line-height:1.3em;
}

li {
	margin-bottom:0.5em;
}

/*QoL - DO NOT EDIT UNLESS NECESSARY*/

	/*general center tag*/
.center {
	text-align:center;
	margin-right:auto;
	margin-left:auto;
}
	/*clearfix*/
.clearfix {
	overflow:auto;
}

.thumb {
	box-shadow:3px 3px 0px rgba(67, 61, 82,0.3);
	width:300px;
	max-width:100%;
	border: 1px solid #71678e;
}

.flex {
	max-width:100%;
		margin-left:auto;
		margin-right:auto;
}

.feed-entry img {
	max-width:100%;
}

.tabthumb {
	box-shadow:3px 3px 0px rgba(67, 61, 82,0.3);
	height:250px;
	max-width:100%;
}

.galimg {
	box-shadow:3px 3px 0px rgba(67, 61, 82,0.3);
	width:320px;
	max-width:100%;
	margin:3px;
}

.galnav {
	text-align:center;
	font-size:1.25em;
		margin-top:20px;
		margin-bottom:20px;
}

.tabimg {
	box-shadow:3px 3px 0px rgba(67, 61, 82,0.3);
	max-width:100%;
		margin-left:auto;
		margin-right:auto;
}

.pad {
	padding:10px;
		padding-bottom:30px;
}

/*elements*/

.header {
	font-size:1.5em;
	min-height:120px;
	overflow:hidden;
	display:flex;
	flex-wrap: wrap;
	align-content:end;
}

.headtext {
	font-size:2em;
	font-style:italic;
	font-weight:bold;
	margin-left:10px;
	padding:10px;
}

.category {
	font-size:1.5em;
	font-weight:bold;
	font-style:italic;
}

.divider {
	height:10px;
	width:100%;
}

.nav {
	line-height:1.25em;
	font-size:1.2em;
}

/*collapse - this system only targets sections directly below the button!!!*/
	/* bugs
		- with animations - animations work on drop down, but not on the way back up*/
.btncollapse {
	cursor: pointer;
	display: block;
}

.btncollapse:after {
	content: '\2B9C';
	font-style:normal;
	font-weight: bold;
	float: right;
}

.active:after {
	content: "\2B9F";
}

.collapse {
	overflow: hidden;
	/*max-height:0px;
	transition: max-height 0.5s ease-out;*/
	display:none;
}


/*navbar collapse - special css for navbars*/
#burger {
width:100%;
background:var(--background);
position:;
z-index:;
}

#burger summary {
list-style-type: none;
cursor: pointer;
display:flex;
align-items:center;
color:var(--background);
padding:10px;
font-size: 1.5em;
font-style:italic;
}

#burger summary::before, #burger[open]>summary::before {
height:30px;
width:30px;
margin-right:10px;
background:var(--color);
}

#burger summary::-webkit-details-marker {
display: none;
}

#burger summary::before {
content: '';
mask-image:url(/assets/burger.svg);
-webkit-mask-image:url(/assets/burger.svg);
mask-size:30px;
-webkit-mask-size:30px;
}

#burger[open]>summary::before {
content: '';
mask-image:url(/assets/close.svg);
-webkit-mask-image:url(/assets/close.svg);
mask-size:30px;
-webkit-mask-size:30px;
}

.skip a {
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}

.skip a:focus {
	position:static;
	width:auto;
	height:auto;
}

#burger #menu {
height:100%;
padding:10px;
margin-bottom:25px;
position:relative;
overflow:auto;
background:var(--background);
}

#burger #menu ul {
list-style:none;
margin:0;
text-align:center;
}

.navpc{padding:10px;}
.navmobile{display:none;}

/*legacy navbar - DON'T REMOVE UNLESS YOU'RE 100% SURE YOU GOT RID OF JS COLLAPSE NAVS*/
	.navtoggle {
		padding: 12px;
		width: 100%;
		border: none;
		text-align: left;
		font-size: 1.3em;
		font-style:italic;
		background-color:#e1dee9;
		background-image:none;
		box-shadow:none;
		color:#3e3948;
	}
		.active, .navtoggle:hover {
			background-color: #e6e4ea;
		}

	@media (min-width: 768px) {
		.navcollapse {
			max-height: 100%;
			display:block !important;
		}
		.navtoggle {
			display:none;
		}
	}

.card {
	padding:10px;
	margin-top:20px;
	margin-bottom:20px;
}

	.jumpto {
		padding:10px;
		margin:15px;
		float: right;
			clear:left;
		width:275px;
		max-width:100%;
		line-height:1.5em
	}

.card h2 {
	margin:0;
}

.projlink {
	font-size:1.75em;
	font-style:italic;
	font-weight:bold;
}

.footer {
	margin-top:20px;
	text-align:center;
	padding-bottom:25px;
	background-color:#e1dee9;
	border: 1px solid #71678e;
	box-shadow:5px 5px 0px rgba(67, 61, 82,0.3);
}

/*CSS Tabs / galleries */
.tabwrap article {
	display:none;
  }

.tabwrap article:target {
	display:block;
  }
  
  .tabwrapalt section {
	display:none;
  }

.tabwrapalt section:target {
	display:block;
  }

  .tabcontent {
	width:875px;
	max-width:100%;
	margin:20px;
		margin-left:auto;
		margin-right:auto;

}

/*chara page elements*/

.ocico {
	width:150px;
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
	box-shadow:3px 3px 0px rgba(67, 61, 82,0.3);
	border: 1px solid #71678e;
}

.oclink {
	font-size:1.25em;
	font-style:italic;
	font-weight:bold;
	text-align:center;
	margin-top:5px;
}

.octhumbgal {
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
}

.octhumb {
	display:flex;
	flex-direction:column;
	justify-content:center;
	margin:10px;
	max-width:150px;
}

/*page thumbs*/
.pagethumb {
	display:flex;
}

.pagethumbblurb {
	width:67%;
	margin-left:20px;
}

.thumblink {
	width:33%
}


/* Flex elements DO NOT EDIT UNLESS NECESSARY*/

/*main body*/
.bodymain {
	display:flex;
	flex-direction: row;
	margin-bottom:20px;
	min-height:500px;
}

.sidebar {
	width: 200px;
}

.content {
	width:900px;
	max-width:100%;
}

.contentgal {
	width:1000px;
	max-width:100%;
}

/*main body gallery*/

/*ipad-small screen viewport */
@media screen and (max-width:992px) {
	.pagethumb {
		flex-direction: column;
	}
		.thumb, .thumblink{
			margin:auto;
			width:300px;
			max-width:100%;
		}

		.pagethumbblurb{
			width:100%;
			margin-left:0
		}

	.sidebar {
		width:250px;
	}

	.content, .contentgal {
		width:850px;
		max-width:100%;
	}

	.ocico, .octhumb {
		width:200px;
		max-width:200px;
	}

	.octhumbgal{
		justify-content:center;
	}
}

/*mobile-vertical viewport*/
@media screen and (max-width: 768px) {
	.bodymain {
		flex-direction: column;
	}

	.sidebar {
		width:100%;
	}

	.content, .contentgal {
		width:100%;
		min-height:200px;
	}

	.galimg {
		width:100%
	}
	.navpc{display:none}
	.navmobile{display:block;}

}

/*Stylized elements*/

hr {
	border-color:rgba(113, 103, 142,0.2)
}

.bg-main {
	background-color: #f282a0;
	background-image: linear-gradient(45deg, rgba(222,97,130,1) 15%, rgba(194,69,114,1) 80%);
	color:#ffffff;
}

.bg-contain {
	background-color: #e6e4ea;
	color:;
	border: 1px solid #71678e;
	box-shadow:5px 5px 0px rgba(67, 61, 82,0.3);
}

.bg-contain2 {
	background-color:#e1dee9;
	color:;
	border: 1px solid #71678e;
	box-shadow:5px 5px 0px rgba(67, 61, 82,0.3);
}

.bg-contain3, .jumpto {
	background-color:#faf9fc;
	color:;
	border: 1px solid #71678e;
	box-shadow:5px 5px 0px rgba(67, 61, 82,0.3);
}

.bg-head {
	background-color:#594e70;
	background-image: url(../axiom-pattern.png);
		background-size:;
		background-position:center;
	color:#ffffff;
	border: 1px solid #71678e;
	margin-bottom:20px;
	box-shadow:5px 5px 0px rgba(67, 61, 82,0.3);
	text-shadow:5px 5px 0px rgba(67, 61, 82,1);
}

.navhead {
	padding:2px;
		padding-left:5px;
	margin-top:10px;
	margin-bottom:5px;
	font-style:italic;
	font-weight:bold;
	box-shadow:3px 3px 0px rgba(67, 61, 82,0.3);
		border: 1px solid #a5345d;
}

.warn {
	background-color:#a63748;
	color:#ffffff;
	display:inline-block;
	padding:3px 7px;
	margin-bottom:5px;
}

.tagmain {
	background-color: #f282a0;
	background-image: linear-gradient(45deg, rgba(222,97,130,1) 15%, rgba(194,69,114,1) 80%);
	color:#ffffff;
	font-style:italic;
	display:inline-block;
	padding:3px 7px;
	margin-bottom:5px;
}

code {
	color:#7873ad;
	background-color:#f4f0ff;
	padding: 2px 5px;
}

/*Links*/
a:link { text-decoration: none; color:#c24572;}
a:visited { text-decoration: none; color:#c24572;}
a:hover { text-decoration: underline; color:#e57391;}
a:active { text-decoration: none; color:#c24572;}

a.navtext {color:#3e3948; font-style:italic;}
a.tagmain {color:#ffffff}

/*buttons*/
button, .btndetail {
	background-color: #f282a0;
	background-image: linear-gradient(45deg, rgba(222,97,130,1) 15%, rgba(194,69,114,1) 80%);
	color:#ffffff;
	font-style:italic;
	font-size:1.1em;
	display:inline-block;
	padding:3px 7px;
	margin-bottom:5px;
	box-shadow:3px 3px 0px rgba(67, 61, 82,0.3);
		border: 1px solid #a5345d;
}

button:hover {background-color: #f7afc3;background-image:none;}
button:active {background-color: #f7afc3;background-image:none;}


.btndetail:hover {background-color: #f7afc3;background-image:none;}
.btndetail:active {background-color: #f7afc3;background-image:none;}