/****************************************************/
/*** GLOBAL STYLING ***/
/****************************************************/
@keyframes margin-down {
	0% { margin-top: -100%; }
	100% { margin-top: 0; }
}
@keyframes bg-down {
	0% { background-position: 0 0; }
	100% { background-position: 0 100%; }
}
@keyframes wiggle {
	0% { transform: rotate(0) scale(1); }
	60% { transform: rotate(0) scale(1); }
	75% { transform: rotate(0) scale(1.12); }
	80% { transform: rotate(0) scale(1.1); }
	84% { transform: rotate(-10deg) scale(1.1); }
	88% { transform: rotate(10deg) scale(1.1); }
	92% { transform: rotate(-10deg) scale(1.1); }
	96% { transform: rotate(10deg) scale(1.1); }
	100% { transform: rotate(0) scale(1); }
}

/* unset styling */
b, strong, i, em, mark, s, u, sup, sub, kbd, abbr, cite, ins,
samp, small, var, p, span, a
	{font-size: unset;}

/* apply baseline styles */
::selection, ::-moz-selection {
	text-decoration: none;
	text-shadow: none;
	outline: none;
	box-shadow: none;
	border: none;
}
* {
	box-sizing: border-box;
	word-wrap: break-word;
	font-size: var(--text-sm);
	line-height: var(--text-sm--line-height);
}
body {
	background-image: var(--img-body-bg);
	color: var(--base-content);
	font-family: var(--font-sans);
	margin: 0;
}
a {
	color: var(--emphasis);
	&:hover {
		color: var(--emphasis-dark);
	}
	&[disabled] {
		color: color-mix(in oklab, var(--emphasis) 50%,
			transparent);
		&:hover {
			color: color-mix(in oklab, var(--emphasis) 50%,
				transparent);
		}
	}
}
button:not(:disabled),
[role='button']:not(:disabled),
input[type='file']:not(:disabled),
input[type='color']:not(:disabled),
input[type='radio']:not(:disabled),
input[type='checkbox']:not(:disabled),
input[type='range']:not(:disabled)::-moz-range-thumb,
input[type='range']:not(:disabled)::-webkit-range-thumb,
.dropdown summary
	{cursor: pointer;}
.icon {
	vertical-align: middle;
	margin: 0 calc(var(--spacing) * .5);
}
code {
	padding: var(--spacing) calc(var(--spacing) * 2);
	white-space: pre-wrap;
	-webkit-user-select: all;
	user-select: all;
	overflow-y: auto;
	cursor: crosshair;
	display: block;
}
hr {
	background: var(--img-hr) center;
	height: var(--img-hr-height);
	margin: calc(var(--spacing) * 3) calc(var(--spacing) * 2);
	border: none;
	color: transparent;
	clear: both;
}
hr.hr-small {
	margin: calc(var(--spacing) * 2) calc(var(--spacing) * 8);
	height: 0;
	background: none;
}
p {margin: var(--spacing) 0;}
br {
	display: block;
	margin: var(--spacing) 0;
}
#cover {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.25);
	z-index: 99;
	&:is(.clicked #cover) {
		display: inline;
	}
}
.clear {
	clear: both;
	margin-bottom: calc(var(--spacing) / 2);
}
.float-wrapper {
	float: right;
	margin-bottom: calc(var(--spacing) / 2);
}
.perfect-center {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
.revert {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
.external-link {
	background: var(--img-ext) right center no-repeat;
	padding-right: 16px;
	&:hover {
		background-image: var(--img-ext-hover);
	}
}
.bg, .shadow {
	height: 100%;
	display: block;
	position: absolute;
	z-index: -1;
}
.desktop {
	display: inline;
	@media (width <= 1200px) {				/*lg & below*/
		display: none !important;
	}
}
.mobile {
	display: none;
	@media (width <= 1200px) {				/*lg & below*/
		display: inline !important;
	}
}
.clicked #sidebar {
	height: unset;
}
#sidebar nav .content {
	@media (width <= 1200px) {				/*lg & below*/
		display: none;
		&:is(.clicked #sidebar nav .content) {
			display: block;
		}
	}
}

/* heading */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-big);
	margin: 0;
}
h1 {
	font-size: var(--text-5xl);
	line-height: var(--text-5xl--line-height);
}
h2 {
	font-size: var(--text-4xl);
	line-height: var(--text-4xl--line-height);
}
h3 {
	font-size: var(--text-3xl);
	line-height: var(--text-3xl--line-height);
}
h4 {
	font-size: var(--text-2xl);
	line-height: var(--text-2xl--line-height);
}
h5 {
	font-size: var(--text-xl);
	line-height: var(--text-xl--line-height);
}
h6 {
	font-size: var(--text-lg);
	line-height: var(--text-lg--line-height);
}
.role-banned {
	color: var(--banned);
	text-decoration: line-through;
	&:is(a):hover {
		color: var(--banned-hover);
		text-decoration: line-through underline;
	}
}
.role-visitor {
	color: var(--visitor);
	&:hover {
		color: var(--visitor-hover);
	}
}
/*.role-member {
	color: var(--member);
	&:hover {
		color: var(--member-hover);
	}
}*/
.role-vip {
	color: var(--vip);
	&:hover {
		color: var(--vip-hover);
	}
}
.role-moderator {
	color: var(--moderator);
	&:hover {
		color: var(--moderator-hover);
	}
}
.role-artist {
	color: var(--artist);
	&:hover {
		color: var(--artist-hover);
	}
}
.role-programmer {
	color: var(--programmer);
	&:hover {
		color: var(--programmer-hover);
	}
}
.role-admin {
	color: var(--admin);
	&:hover {
		color: var(--admin-hover);
	}
}
.role-moderator, .role-artist, .role-programmer,
.role-admin {
	font-weight: bold;
}
.role-visitor, .role-member, .role-vip,
.role-moderator, .role-artist, .role-programmer,
.role-admin {
	text-decoration-thickness: 1px;
}

/****************************************************/
/*** CARDS ***/
/****************************************************/
.card, .card-info, .card-success, .card-warning,
.card-error {
	color: var(--secondary-600);
	background: var(--secondary-100);
	border: 1px solid var(--secondary-400);
	border-radius: var(--radius);
	box-shadow: 0 .1em .3em color-mix(in oklab,
		var(--secondary-700) 50%, transparent);
	width: 100%;
	padding: calc(var(--spacing) * 2);
	margin: calc(var(--spacing) * 2) auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	position: relative;
}
.card-info {
	color: var(--info-600);
	background: var(--info-100);
	border-color: var(--info-400);
}
.card-success {
	color: var(--success-600);
	background: var(--success-100);
	border-color: var(--success-400);
}
.card-warning {
	color: var(--warning-600);
	background: var(--warning-100);
	border-color: var(--warning-400);
}
.card-error {
	color: var(--error-600);
	background: var(--error-100);
	border-color: var(--error-400);
}

/****************************************************/
/*** TABLES ***/
/****************************************************/
.flex-table {
	border-radius: var(--radius);
	box-shadow: 0 .1em .3em color-mix(in oklab,
		var(--secondary-700) 50%, transparent);
	margin: var(--spacing) auto;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	
	.row {
		display: flex;
		&:is(header.row) * {
			font-size: var(--text-lg);
			font-weight: bold;
		}
	}
	.col {
		color: var(--secondary-600);
		background: var(--secondary-100);
		border: solid var(--secondary-400);
		border-width: 1px 1px 0 0;
		padding: calc(var(--spacing) * .5) var(--spacing);
		flex: 1;
		align-content: center;
		text-align: center;
		&:is(header.row .col) {
			color: var(--primary-600);
			background: var(--primary-100);
			border-color: var(--primary-400);
			border-bottom-width: 1px;
		}
		&:is(header.row + .row .col) {
			border-top-width: 0;
		}
		&:is(.row:first-child .col:first-child) {
			border-radius: var(--radius) 0 0 0;
		}
		&:is(.row:first-child .col:last-child) {
			border-radius: 0 var(--radius) 0 0;
		}
		&:is(.row:last-child .col:last-child) {
			border-radius: 0 0 var(--radius) 0;
		}
		&:is(.row:last-child .col:first-child) {
			border-radius: 0 0 0 var(--radius);
		}
		&:is(.row:first-child .col) {
			border-top-color: var(--secondary-300);
			&:is(header.row .col) {
				border-top-color: var(--primary-300);
			}
		}
		&:is(.row .col:first-child) {
			border-left-color: var(--secondary-300);
			border-left-width: 1px;
			&:is(header.row .col) {
				border-left-color: var(--primary-300);
			}
		}
		&:is(.row:last-child .col) {
			border-bottom-width: 1px;
		}
	}
	&:is(.table-2xs) :not(.row, .col) {
		max-height: 50px;
	}
	&:is(.table-xs) :not(.row, .col) {
		max-height: 64px;
	}
	&:is(.table-sm) :not(.row, .col) {
		max-height: 75px;
	}
	&:is(.table-md, .table-base) :not(.row, .col) {
		max-height: 100px;
	}
	&:is(.table-lg) :not(.row, .col) {
		max-height: 150px;
	}
	&:is(.table-xl) :not(.row, .col) {
		max-height: 200px;
	}
	&:is(.table-2xl) :not(.row, .col) {
		max-height: 300px;
	}
}