/****************************************************/
/*** GLOBAL ***/
/****************************************************/
::selection, ::-moz-selection {
	color: var(--highlight);
	background: var(--primary-400);
}
a {
  color: var(--emphasis);
	text-decoration: 2px dotted underline;
  &:hover {
		color: var(--emphasis-dark);
		text-decoration: 1px solid underline;
  }
}
mark {
	color: var(--highlight);
	background: var(--primary-600);
	outline: 1px solid var(--primary-600);
	border-radius: calc(var(--radius) * .5);
	padding: 0 1px;
}
code {
	color: var(--primary-600);
	background: var(--highlight);
	border: 3px double var(--primary-200);
	margin: var(--spacing) 0;
	&:focus, &:hover {
		background: var(--primary-50);
		border-color: var(--primary-300);
	}
	&::selection, &::-moz-selection {
		color: #fff;
		background: var(--emphasis);
	}
}
hr.hr-small {
	border: 10px solid transparent;
	border-image: var(--img-content-border-2) round
		var(--img-content-border-slice) / 0 / 0;
	border-image-width: var(--img-content-border-height)
		var(--img-content-border-height) 0
		var(--img-content-border-height);
}

/* heading */
h1, h2, h3, h4, h5, h6 {
	color: var(--emphasis);
}
h1 {
	font-family: var(--font-big);
	text-align: center;
}

/****************************************************/
/*** PAGE & CONTENT ***/
/****************************************************/
.body-bg {
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	position: fixed;
	z-index: -1;
}
.main-section {
	border: var(--img-content-border-height) solid transparent;
	border-image: var(--img-content-border) round
		var(--img-content-border-slice) /
		var(--img-content-border-height) /
		var(--img-content-border-outset);
}
#page * {
	max-width: 100%;
}
#page {
	grid-template-rows: var(--img-header-height) 1fr;
	gap: var(--spacing);
	justify-items: center;
	display: grid;
	height: 100%;
	@media (width <= 1200px) {				/*lg & below*/
		width: 100%;
		left: 0;
		position: absolute;
		display: block;
	}
}
#main {
	background: var(--img-content-bg);
	grid-template-columns: minmax(350px, 20em) minmax(500px,
		calc(1500px - 40rem)) minmax(350px, 20em);
	gap: var(--spacing);
	display: grid;
	position: relative;
	@media (width <= 1200px) {				/*lg & below*/
		margin-top: 4em;
		grid-template-rows: repeat(3, min-content);
		grid-template-columns: 100%;
	}
}
#header {
	text-align: center;
	transition: 0.1s all;
	z-index: 100;
	& img {
		height: 100%;
		&:hover {
			filter: drop-shadow(0 0 .5em var(--primary-500));
		}
	}
}
.sticky-nav .header {
	transition: 0.1s all;
	&:hover {
		filter: drop-shadow(0 0 3px var(--inner-900));
	}
}

/****************************************************/
/*** CONTENT WRAPPER & ARTICLE ***/
/****************************************************/
#content-wrapper {
	border-image-width: var(--img-content-border-height) 0;
	@media (width <= 1200px) {				/*lg & below*/
		border-image-width: var(--img-content-border-height) 0;
	}
}
.article-title {
	margin-bottom: calc(var(--spacing) * 2);
}
.article-wrapper {
	padding: calc(var(--spacing) * .5);
}
.img, .photoset {
	background-color: var(--base-100);
	border: var(--img-border-height) solid transparent;
	border-image: var(--img-border) round
		var(--img-border-slice) /
		var(--img-border-height) /
		var(--img-border-outset);
	text-align: center;
}
:is(a):has(.img, .photoset) {
	display: block;
	text-align: center;
	margin: var(--spacing) 0;
}

/****************************************************/
/*** NAV WRAPPER & SIDEBAR ***/
/****************************************************/
#nav-wrapper {
	background: var(--inner-100);
	height: 100%;
	position: relative;
	align-self: flex-start;
	z-index: 99;
	@media (width <= 1200px) {				/*lg & below*/
		box-shadow: 0 .2em .5em color-mix(in oklab,
			var(--primary-800) 50%, transparent);
		border: none;
		padding: var(--spacing);
		width: 100%;
		min-height: 4em;
		height: unset !important;
		position: fixed !important;
		left: 0;
		top: 0;
	}
}
#sidebar {
	flex-direction: column;
	display: flex;
	padding: 0;
	h3 {
		color: var(--secondary-500);
		font-weight: normal;
		text-align: center;
		@media (width > 1200px) {				/*xl & above*/
			display: block;
		}
	}
	@media (width <= 1200px) {				/*lg & below*/
		border-radius: var(--radius);
		height: 4em;
		.header {
			max-width: max-content;
			height: 4em;
			position: absolute;
			left: 50%;
			transform: translate(-50%, 0);
			img {
				height: 100%;
			}
		}
		.content {
			margin-top: calc((var(--spacing) * 2) + 4em);
			.dropdown {
				border-radius: var(--radius);
				padding: var(--spacing);
				margin: calc(var(--spacing) * 2) var(--spacing);
				font-size: var(--text-lg);
				summary {
					font-size: var(--text-lg);
				}
				a {
					border-radius: calc(var(--radius) * 1.5);
					padding: calc(var(--spacing) * 1.5)
						calc(var(--spacing) * 2);
					margin: var(--spacing);
					width: calc(100% - calc(var(--spacing) * 2));
				}
			}
		}
	}
}
.dropdown {
	color: var(--secondary-600);
	background: var(--inner-200);
	border: 1px solid var(--inner-500);
	border-radius: calc(var(--radius) * .5);
	padding: calc(var(--spacing) * .5);
	margin: var(--spacing) 0;
	&:open, &:hover {
		color: var(--secondary-400);
		background: var(--inner-300);
	}
	summary {
		font-size: 15px;
		padding: calc(var(--spacing) * .5) var(--spacing);
		display: block;
	}
	ul {
		padding: 0;
		list-style: none;
		a {
			color: var(--secondary-400);
			background: var(--inner-100);
			font-size: 14px;
			text-decoration: none;
			border: 1px solid var(--inner-500);
			border-radius: var(--radius);
			padding: var(--spacing) calc(var(--spacing) * 1.5);
			margin: calc(var(--spacing) * .5) 0;
			width: 100%;
			display: block;
			&:hover {
				color: var(--emphasis);
				background: var(--inner-200);
				border-color: var(--primary-200) var(--primary-100)
					var(--primary-100) var(--primary-200);
				outline: 1px solid var(--highlight);
				box-shadow: .1em .1em .2em .1em inset
					var(--inner-400);
			}
		}
	}
}
.clock {
	background: var(--img-clock) no-repeat;
	width: var(--img-clock-width);
	height: var(--img-clock-height);
	margin-top: var(--spacing);
	text-align: center;
	float: right;
	position: relative;
	.live-clock {
		color: var(--emphasis-dark);
		font-family: var(--font-lucidaconsole);
		font-size: 13px;
		right: 10px;
		top: 22px;
		position: absolute;
		&:hover {
			color: var(--primary-400);
		}
	}
}
.hamburger {
	height: 4em;
	width: 3.25em;
	margin: calc(var(--spacing) * .5) calc(var(--spacing) * 1.5);
	transition: all .5s;
	right: 0;
	top: 0;
	position: absolute;
	z-index: 9999999999;
	cursor: pointer;
	& div {
		border-color: var(--base-content);
		border-top: .325em solid;
		border-bottom: .325em solid;
		border-radius: .325em;
		height: .3em;
		margin: calc(.65em * .75) 0;
	}
	&:is(.clicked .hamburger) {
		transform: rotate(90deg);
		margin: 0 calc(var(--spacing) * 1.5);
	}
	&:is(.clicked .hamburger, .hamburger:hover) div {
		border-color: var(--emphasis-dark);
	}
}

/****************************************************/
/*** USER WRAPPER ***/
/****************************************************/
#user-wrapper {
	background: var(--inner-100);
	@media (width <= 1200px) {				/*lg & below*/
		color: var(--highlight);
		background: var(--img-content-bg-2);
		border-image-width: 0;
		grid-row-start: 1;
		
		a:not(:is(.clock, button, .btn, .card) a,
		a[role=button]) {
			color: var(--inner-100);
			text-shadow: -1px -1px var(--emphasis-light),
				-1px 1px var(--emphasis-dark), 1px -1px var(--emphasis-light),
				1px 1px var(--emphasis-dark), 0 1px var(--emphasis-dark),
				0 -1px var(--emphasis-light), 1px 0 var(--emphasis-dark),
				-1px 0 var(--emphasis-dark), 0 -2px var(--emphasis-light),
				0 2px var(--emphasis-light), -2px 0 var(--emphasis-light),
				2px 0 var(--emphasis-dark);
			&:hover {
				color: var(--inner-300);
			}
		}
	}
	
	/* user & pet bars */
	.details {
		text-align: center;
		@media (width <= 1200px) {				/*lg & below*/
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: var(--spacing);
		}
	}
	.user-bar, .pet-bar {
		justify-content: center;
	}
	
	/* online user counter */
	.online {
		background: var(--highlight);
		border: var(--img-box-border-height) solid transparent;
		border-image: var(--img-box-border) round
			var(--img-box-border-slice) /
			var(--img-box-border-height) /
			var(--img-box-border-outset);
		text-align: center;
		line-height: 0;
		margin: 0 auto;
		width: 72px;
		display: grid;
		grid-template-rows: repeat(2, 1fr);
		p {
			margin: 1px 0;
			.icon {
				margin: 0;
			}
		}
		&:hover {
			background: var(--inner-200);
			border-image-source: var(--img-box-focus-border);
		}
		@media (width <= 1200px) {				/*lg & below*/
			float: left;
		}
	}
}

/****************************************************/
/*** CREDIT WRAPPER ***/
/****************************************************/
#credit-wrapper {
	padding: calc(var(--spacing) * 2) var(--spacing);
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	text-align: center;
	p {
		font-size: var(--text-xs);
	}
	@media (width <= 1200px) {				/*lg & below*/
		grid-row-start: 3;
		display: grid;
	}
}

/****************************************************/
/*** USERS ***/
/****************************************************/
.avatar-icon {
	img {
		background: #fff;
		border: 1px solid var(--inner-200);
		outline: 1px solid var(--primary-50);
		border-radius: 500px;
	}
	&:hover img {
		background: var(--inner-100);
		border-color: var(--inner-300);
		outline-color: var(--primary-100);
	}
}

/****************************************************/
/*** PETS ***/
/****************************************************/
.pet-img {
	aspect-ratio: 1/1;
	max-height: 250px;
	position: relative;
	z-index: 1;
	.bg {
		background: var(--inner-100);
		outline: 1em solid var(--primary-25);
		border-radius: 250px;
		width: calc(100% - 3em);
		height: calc(100% - 3em);
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		position: absolute;
		&:is(a:hover .bg) {
			background: var(--inner-200);
			outline-color: var(--primary-50);
		}
	}
}

/****************************************************/
/*** RANDOM EVENTS ***/
/****************************************************/
.random-event.card {
	color: var(--highlight);
	background: linear-gradient(var(--primary-300),
		var(--primary-400));
	box-shadow: 0 .1em .3em color-mix(in oklab,
			var(--secondary-700) 50%, transparent),
		0 -1px inset var(--primary-200);
	border-color: var(--primary-600);
	padding-top: calc(var(--spacing) * 5);
	.header {
		color: var(--emphasis-light);
		background: linear-gradient(var(--primary-50),
			var(--primary-100));
		border: 1px solid;
		border-color: var(--highlight) var(--primary-50)
			var(--primary-50) var(--highlight);
		outline: 1px solid var(--primary-100);
		box-shadow: 0 0 .3em color-mix(in oklab,
			var(--primary-300) 50%, transparent);
		border-radius: 4em;
		font-size: var(--text-base);
		font-style: italic;
		padding: var(--spacing) calc(var(--spacing) * 2);
		left: -10px;
		top: -10px;
		position: absolute;
	}
	a {
		color: var(--inner-100);
		font-weight: bold;
		text-shadow: -1px -1px var(--primary-600),
			-1px 1px var(--primary-600), 1px -1px var(--primary-600),
			1px 1px var(--primary-600), 0 1px var(--primary-600),
			0 -1px var(--primary-600), 1px 0 var(--primary-600),
			-1px 0 var(--primary-600);
		text-decoration: 1px solid underline;
		&:hover {
			color: var(--inner-300);
		}
	}
}