h1 {
	color: hsl(280 100% 95% / 1);
	text-align: center;
	font-size: 3em;
	text-shadow: 0 0 10px hsl(0 0% 60% / 1);
}
.min-body {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	width: 100%;
}
.mod-holder {
	position: relative;
}
img#mod-loading {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	transition-duration: .1s;
}
img#mod-loading:has(+ .mod-groups > .mod-group) {
	opacity: 0;
}
.mod-groups {
	display: flex;
	gap: 40px;
	max-width: 1000px;
	flex-wrap: wrap;
	justify-content: center;
}
.mod-group {
	background-color: hsl(280deg 100% 3% / 50%);
	border-radius: 30px;
	padding: 10px;
	backdrop-filter: blur(10px);
	display: flex;
	flex-direction: column;
	width: min-content;
	opacity: 1;
	transition-duration: 1s;
	transition-delay: .2s;
	@starting-style {
		opacity: 0;
		transform: translateY(10vh);
	}
}
.mod-group h3 {
	color: var(--moderation-group-color, inherit);
	font-weight: bold;
	text-align: center;
	text-shadow: 0 0 10px black;
}
.mod-name {
	flex-grow: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mod-users {
	display: flex;
	gap: 10px;
	justify-content: center;
}
.mod-user {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: hsl(280 100% 95% / 1);
	padding: 10px;
	background-color: hsl(280deg 100% 3% / 50%);
	border-radius: 30px;
	backdrop-filter: blur(10px);
	font-size: 1.1em;
	width: 160px;
	aspect-ratio: 1;
	justify-content: center;
	transition-duration: 0.2s;
}
.mod-user:hover .mod-user-avatar img {
	transform: scale(1.05);
}
.mod-user .mod-user-avatar img {
	transition-duration: .2s;
}
.mod-user:hover {
	color: white;
    text-shadow: 0 0 10px white;
    font-size: 1.15em;
}
.mod-user[frozen="true"] {
	color: #a3dcf5;
	box-shadow: inset 0 0 40px 10px hsl(200deg 100% 90% / 20%);
}
.mod-user[frozen="true"] > .mod-user-avatar {
	position: relative;
}
.mod-user[frozen="true"] > .mod-user-avatar > img {
	height: 90px;
	width: 90px;
	margin: 3px;
}
.mod-user[frozen="true"] > .mod-user-avatar::after {
	content: "";
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	background: url(/hpapp/img/ice-avatar.webp) center / 100% no-repeat;
	opacity: 0.6;
}
html {
	overflow-y: scroll;
}

.modlog-logcont {
	padding: 40px 5px 40px 0;
	height: 600px;
	overflow-y: auto;
	color: hsl(280 10% 70% / 1);
	display: flex;
	flex-direction: column;
	mask-image: linear-gradient(to top, transparent 0px, black 32px, black 50%, transparent 50%),
		linear-gradient(to bottom, transparent 0px, black 32px, black 50%, transparent 50%);
}

.modlog-logcont::-webkit-scrollbar {
	width: 10px;
}

.modlog-logcont::-webkit-scrollbar-thumb {
	background-color: hsl(280 10% 50% / 1);
	border-radius: 30px;
}

.modlog-logcont::-webkit-scrollbar-track {
	border-right: 4px solid hsl(280 10% 10% / 1);
}

.modlog-cont h2 {
	color: hsl(280 100% 95% / 1);
	margin-left: 40px;
}

.cont.modlog-parent {
	background-color: hsl(280deg 100% 3% / 100%);
	backdrop-filter: blur(10px);
	mask-image: linear-gradient(180deg, transparent, black 100px);
}

.modlog-day-entry {
	border-top: 2px solid hsl(280 10% 20% / 1);
	width: 100%;
	padding: 10px;
	display: flex;
	gap: 20px;
	opacity: 1;
	transition-duration: .5s;
	@starting-style {
		opacity: 0;
	}
}

.modlog-date {
	font-weight: bold;
	width: 100px;
	text-align: center;
	flex-shrink: 0;
}

.modlog-logs {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.modlog-log span {
	font-weight: inherit;
}
.modlog-log span.username {
	color: white;
}
.modlog-log[logtype="kick"] span.action {
	color: hsl(262 60% 50% / 1);
}
.modlog-log[logtype="leave"] span.action {
	color: hsl(40 70% 45% / 1);
}
.modlog-log[logtype="join"] span.action {
	color: hsl(180 80% 50% / 1);
}
.modlog-log[logtype="promotion"] span.action {
	color: hsl(120 60% 45% / 1);
}
.modlog-log[logtype="demotion"] span.action {
	color: hsl(300 100% 30% / 1);
}
.modlog-log[logtype="freeze"] span.action {
	color: hsl(195 50% 50% / 1);
}
.modlog-log[logtype="unfreeze"] span.action {
	color: hsl(195 50% 50% / 1);
}
.modlog-log .log-comment {
	color: hsl(280 7% 60% / 1);
}

.moderation-group {
	color: var(--moderation-group-color, inherit);
}

@media screen and (max-width: 700px) {
	.mod-group {
		width: 100%;
	}

	.mod-holder {
		width: 90%;
	}

	.mod-users {
		background: radial-gradient(#0009 20%, transparent 70%) 100% no-repeat;
		flex-wrap: wrap;
	}

	.mod-user {
		font-size: 1em;
		width: 45%;
	}

	.modlog-log .log-comment {
		color: hsl(280 7% 50% / 1);
	}

	.modlog-logcont {
		color: hsl(280 10% 80% / 1);
	}

	.modlog-day-entry {
		padding: 10px 0;
		gap: 5px;
	}
}