* {
	z-index: 1
}

main::after {
	content: "";
	background: linear-gradient(180deg,rgba(24,24,27,0),rgba(24,24,27,.9));
	pointer-events: none;
	overflow: hidden;
	position: fixed;
	width: 100%;
	height: 70px;
	z-index: 2;
	bottom: 0;
	left: 0
}

.search {
	display: flex;
	flex-direction: column;
	gap: 8px
}

.search .input {
	display: flex;
	height: 100%;
	padding: .8rem .8rem .8rem 1rem;
	background: #18181b;
	border: 1px solid #525252;
	border-radius: 5px
}

.search img {
	width: 1.8rem
}

.search input {
	flex-grow: 1;
	font-family: Roboto,sans-serif;
	font-size: 1.2rem;
	background: 0 0;
	min-width: 0;
	outline: 0;
	border: none;
	color: #ccc;
	padding: 0;
	margin: 0
}

.search input:focus {
	font-weight: 500;
	color: #fff
}

.input:has(input:focus) {
	background-color: #202024;
	border-color: #a3a3a3
}

.items {
	display: flex;
	flex-flow: row wrap;
	align-content: flex-start;
	margin-bottom: 4rem;
	padding-top: .5rem;
	gap: 10px
}

.items .item {
	z-index: 0;
	margin: 0
}

.sorting {
	display: flex;
	justify-content: end;
	align-content: center;
	align-items: center;
	width: 100%;
	gap: 8px
}

.disclaimer {
	flex-grow: 1;
	padding: 0;
	margin: 0
}

#sorting_order {
	display: flex;
	padding: .8rem;
	border: 1px solid #525252;
	background-color: #18181b;
	cursor: pointer;
	border-radius: 5px;
	font-size: 1.1rem;
	justify-content: center;
	align-items: center;
	align-content: center
}

#sorting_order:focus,#sorting_order:hover {
	background-color: #202024;
	border-color: #a3a3a3
}

#sorting_order img {
	width: 1.5rem;
	height: 1.5rem;
	margin-top: -1px
}

#sorting_order,#sorting_sort,.dropdown-contents,.dropdown-value,.input {
	box-shadow: 0 0 10px 2px rgba(32,32,36,.5)
}

#loader {
	text-align: center;
	padding: 2rem 0;
	width: 100%
}

.spinner svg {
	height: 100px
}

#spinner {
	stroke-dasharray: 2.42776657104492px,242.776657104492px;
	stroke-dashoffset: 0;
	animation: 1.6s linear infinite loader
}

@keyframes loader {
	12.5% {
		stroke-dasharray: 33.98873199462888px,242.776657104492px;
		stroke-dashoffset: -26.70543228149412px
	}

	43.75% {
		stroke-dasharray: 84.97182998657219px,242.776657104492px;
		stroke-dashoffset: -84.97182998657219px
	}

	100% {
		stroke-dasharray: 2.42776657104492px,242.776657104492px;
		stroke-dashoffset: -240.34889053344708px
	}
}

.modal {
	padding: 1.5rem;
	border-radius: 10px;
	max-width: 75%;
	max-height: 75vh;
	min-width: 28vw!important;
	overflow-y: auto;
	background-color: #18181b;
	border: 1px solid #525252;
	display: grid;
	grid-auto-rows: minmax(min-content,max-content);
	gap: .5rem;
	animation: .4s cubic-bezier(.175,.885,.32,1.275) show_modal
}

@keyframes show_modal {
	from {
		scale: 0.5;
		opacity: 0
	}
}

#censored_item {
	font-weight: 700;
	color: #fbb
}

#modal_wrapper,.modal_wrapper {
	background: rgba(0,0,0,.5);
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	z-index: 42;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0
}

.modal .top {
	display: flex;
	align-items: center;
	align-content: center;
	width: 100%;
	gap: 2rem
}

.modal h1 {
	padding: 0;
	margin: 0;
	word-wrap: break-word;
	font-size: 1.8rem
}

.modal .detailed_info {
	margin-left: 4px;
	font-weight: bolder;
	outline: 0!important;
	text-decoration: underline dotted 2px;
	cursor: pointer;
	color: #aaa
}

.modal .detailed_info:hover {
	color: #ddd
}

#item_id {
	user-select: text!important
}

#close {
	padding: 0;
	margin: 0 0 0 auto;
	cursor: pointer;
	background: 0 0;
	outline: 0;
	border: none;
	opacity: .5;
	transition: opacity .2s ease-in-out;
	align-self: flex-start;
	justify-self: flex-start
}

#close:hover {
	opacity: 1
}

#close img {
	width: 2.5rem;
	height: 2.5rem
}

#item_footer {
	display: flex;
	align-content: center;
	align-items: center;
	color: #aaa;
	margin-left: 4px;
	padding: 0;
	gap: .5ch
}

#item_footer:empty {
	display: none
}

#item_footer a {
	font-weight: bolder;
	color: unset
}

#item_footer a:hover {
	color: #ddd
}

#item_footer img {
	border-radius: 100%;
	margin-right: .5ch;
	height: 1.5rem;
	width: 1.5rem
}

.item_view h3 {
	padding: 0;
	margin: 0
}

.turnstile_widget {
	position: absolute;
	top: -999px;
	left: -999px;
	opacity: 0
}

#no_results {
	text-align: center
}

#no_results h3 {
	font-size: 1.5rem;
	font-weight: 500;
	color: #fff;
	padding: 0;
	margin: .2rem 0
}

#no_results p {
	font-size: 1.15rem;
	color: #ddd;
	padding: 0;
	margin: 0
}

#particles {
	z-index: 0;
	position: relative
}

#particles span {
	display: block;
	overflow: hidden;
	width: var(--size);
	height: var(--size);
	border-radius: 100%;
	opacity: 0;
	background: #fff;
	position: absolute;
	animation: particle var(--speed) linear;
	z-index: 0!important
}

@keyframes particle {
	0% {
		opacity: 0;
		right: var(--x);
		bottom: var(--y)
	}

	25% {
		opacity: var(--opacity)
	}

	100% {
		opacity: 0;
		right: calc(var(--x) + var(--x-vel));
		bottom: calc(var(--y) + var(--y-vel))
	}
}

@media screen and (max-width: 600px) {
	.sorting {
		flex-wrap:wrap
	}

	.disclaimer {
		flex: 1 0 100%;
		order: 3
	}

	#sorting_sort {
		flex-grow: 1;
		max-width: unset
	}

	.modal {
		padding: 1.5rem 1rem;
		border-radius: 6px;
		max-width: 95%;
		max-height: 85vh
	}

	#particles {
		display: none
	}

	#particles span {
		display: none!important;
		animation: none!important
	}
}

.dropdown {
	position: relative;
	min-width: 200px;
	z-index: 99
}

.dropdown-value {
	display: flex;
	align-items: center;
	align-content: center;
	font-family: Roboto,sans-serif;
	font-size: 1rem;
	padding: .8rem;
	border-radius: 5px;
	outline-offset: -1px;
	cursor: pointer;
	border: none;
	width: 100%;
	gap: .5rem
}

.dropdown-value::after {
	content: "";
	margin-left: auto;
	background-image: url(/static/icon/button/arrow-right.svg);
	background-size: 100%;
	transition: rotate .2s;
	width: 1rem;
	height: 1rem
}

.dropdown-value.open::after {
	rotate: 90deg
}

.dropdown-value img {
	opacity: .8
}

.dropdown-value span {
	margin-top: 1px
}

.dropdown-contents,.dropdown-value {
	background-color: #18181b;
	outline: #525252 solid 1px;
	outline-offset: -1px;
	color: #ccc
}

.dropdown-value:focus,.dropdown-value:hover {
	background-color: #202024;
	outline-color: #a3a3a3;
	color: #fff
}

.dropdown-contents {
	display: flex;
	flex-direction: column;
	position: absolute;
	border-radius: 5px;
	padding: .5rem 0;
	margin-top: 4px;
	width: 100%;
	z-index: 99;
	top: 100%
}

.dropdown-contents button {
	display: flex;
	font-size: 1rem;
	font-family: Roboto,sans-serif;
	transition: background-color .1s,opacity .1s;
	align-items: center;
	align-content: center;
	padding: .5rem 1rem;
	border-radius: 5px;
	text-align: left;
	cursor: pointer;
	color: #fff;
	opacity: .8;
	background: 0;
	outline: 0;
	border: 0;
	gap: .8rem
}

.dropdown-contents img,.dropdown-value img {
	width: 1.5rem;
	height: 1.5rem
}

.dropdown-contents span {
	margin-top: 1px
}

.dropdown-contents button:focus,.dropdown-contents button:hover {
	background-color: rgba(255,255,255,.1);
	opacity: 1
}

.dropdown-contents.open {
	animation: 260ms ease-in-out open-dropdown
}

.dropdown-contents.close {
	animation: 260ms ease-in-out close-dropdown
}

@keyframes open-dropdown {
	from {
		opacity: 0;
		transform: translateY(-10px)
	}
}

@keyframes close-dropdown {
	to {
		opacity: 0;
		transform: translateY(-10px)
	}
}