:root {
	--main-bg: #333633;
	--main-color: #fff;
	--accent: #3b7572;
	--box-bg: rgba(20, 31, 30, .5);
	--box-border: rgba(0, 0, 0, .29);
	--shadow: 0 4px 8px 2px rgba(0,0,0,.33);
	--tag-bg: rgba(58, 117, 114, .33);
	--vtag-bg: rgba(255,255,255,.75);
	--vtag-color: #000;
	--selection: rgba(59, 117, 114, .67);
}

body {
	overflow-y: hidden;
	margin: 0;
	background: var(--main-bg) url(background.avif) 50%/cover no-repeat fixed;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 16px;
	color: var(--main-color);
}

* {
	box-sizing: border-box !important;
	user-select: none !important;
	list-style-type: none !important;
}

*::selection {
	background-color: var(--selection);
}

body>img {
	opacity: 0;
	position: absolute;
	top: -32px;
	left: -64px;
}


main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  display: flex;
  flex-direction: column;
}


.box {
  width: 100%;
  padding: 8px;
  background-color: var(--box-bg);
  border: 3px solid var(--box-border);
  border-radius: 11px;
  box-shadow: var(--shadow);
}


section.list {
  height: 392px;
  margin-bottom: 16px;
}


.boxTitle {
  display: flex;
  align-items: center;
  padding: 2px 0 8px 4px;
}


.boxTitle span {
  margin-left: 9px;
}


ul.items {
  display: flex;
  background-color: rgba(0,0,0,.33);
  border-radius: 4px;
  width: 100%;
  height: calc(100% - 34px);
  margin: 0;
  padding: 3px 3px 0 3px;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #666 transparent;
}


ul.items li {
  margin-bottom: 3px;
  display: flex;
  width: 100%;
  min-height: 26px;
  border-radius: 2px;
  font-size: 14px;
  align-items: center;
  padding: 0 0 1px 8px;
}


ul.items li:hover {
  background-color: rgba(85,85,85,0.08);
}


ul.items li.selected {
  background-color: rgba(85,85,85,.25);
}


li .tag {
  background-color: var(--tag-bg);
  border-radius: 2px;
  font-size: 10px;
  font-weight: 400;
  padding: 0 4px;
  margin-left: 6px;
  margin-top: 1px;
  pointer-events: none;
}
li .vtag {
  background-color: var(--vtag-bg);
  color: var(--vtag-color)!important;
  font-weight: 600;
}


section.downloads .downloadButtons {
  display: flex;
  height: 30px;
}


.downloadButtons a,
#overlay article div a {
  font-size: 14px;
  padding-bottom: 1px;
  color: #fff;
  text-decoration: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  min-width: 0;
  cursor: pointer;
  height: 30px;
}

.downloadButtons>:only-child,
.downloadButtons>:nth-child(odd) {
	background-color: rgba(59, 117, 114, .67)
}

.downloadButtons>:only-child:hover,
.downloadButtons>:nth-child(odd):hover {
	background-color: rgba(59, 117, 114, .39)
}

.downloadButtons>:only-child:active,
.downloadButtons>:nth-child(odd):active {
	background-color: rgba(59, 117, 114, .2);
	outline: 3px solid rgba(59, 117, 114, .67)
}

.downloadButtons>:nth-child(even) {
	margin-right: 8px;
	margin-left: 8px;
	background-color: rgba(0, 0, 0, .29)
}

.downloadButtons>:nth-child(even):hover {
	background-color: rgba(0, 0, 0, .2)
}

.downloadButtons>:nth-child(even):active {
	background-color: rgba(0, 0, 0, .15);
	outline: 3px solid rgba(0, 0, 0, .29)
}

.downloadButtons>:nth-child(even):last-child {
	margin-right: 0;
	margin-left: 8px
}

aside {
	pointer-events: none
}

aside * {
	pointer-events: auto
}

aside.left {
	position: absolute;
	top: 0;
	left: 0;
	height: 100vh;
	padding: 12px
}

aside.left .box {
	width: 180px;
	border-radius: 8px
}

aside.left img {
	filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .33));
	margin-bottom: 9px
}

.search {
	position: absolute;
	top: 12px;
	width: 320px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
	padding: 6px
}

input {
	background: 0 0;
	border: none;
	outline: none;
	color: #fff;
	font-family: Inter;
	font-size: 14px;
	font-weight: 500
}

.search #optiSearch {
	width: 275px
}

aside.left .categories {
	margin-top: 0;
	display: flex;
	flex-direction: column;
	padding: 4px;
	padding-bottom: 0
}

ul.categories li {
	margin-bottom: 4px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 1px;
	border-radius: 3px
}

ul.categories li:hover {
	background-color: rgba(59, 117, 114, .2)
}

ul.categories li.selected {
	background-color: rgba(59, 117, 114, .67)
}

aside.left .bottom {
	position: absolute;
	bottom: 12px
}

aside article.box {
	padding-left: 12px;
	padding-right: 12px
}

aside article.box * {
	margin: 0;
	font-size: 14px;
	font-weight: 400
}

aside article.box h1 {
	margin-bottom: 10px;
	text-align: center;
	font-size: 16px;
	font-weight: 500
}

aside article.box b {
	font-weight: 600
}

aside.left .social {
	padding: 0;
	padding-left: 4px;
	padding-right: 4px;
	margin: 0;
	margin-top: 10px;
	display: flex;
	justify-content: center
}

.social a {
	margin-left: 6px;
	margin-right: 6px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .33))
}

.social a:hover {
	opacity: .66
}

aside.right {
	display: flex;
	flex-direction: column;
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 12px
}

aside.right .box {
	margin-top: 12px;
	width: auto;
	align-self: flex-end;
	border-radius: 8px;
	padding: 4px;
	display: flex;
	gap: 4px
}

aside.right .ad {
	width: 140px;
	height: 290px
}

.ad img {
	border-radius: 6px;
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .33))
}

aside.right .chat {
	display: none;
	height: 460px;
	width: 300px;
	padding: 0;
	border-radius: 11px;
	border: none;
	padding: 0;
	box-shadow: 0 4px 8px 2px rgba(0, 0, 0, .33)
}

aside.right button {
	width: 48px;
	height: 32px;
	border: none;
	background: 0 0;
	border-radius: 3px;
	display: flex;
	align-items: center;
	justify-content: center
}

aside.right button:hover {
	background-color: rgba(59, 117, 114, .25)
}

aside.right button:active {
	transform: none
}

aside.right button.selected {
	background-color: rgba(59, 117, 114, .67)
}

#overlay {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	background: #0007;
	width: 100vw;
	height: 100vh;
	z-index: 1
}

#overlay .title {
	width: 620px;
	font-size: 24px;
	margin-bottom: 12px;
	display: flex;
	justify-content: space-between
}

.title button {
	width: 24px;
	height: 24px;
	border: none;
	background: 0 0;
	border-radius: 3px;
	cursor: pointer
}

#overlay article {
	width: 660px;
	height: 90vh;
	padding: 0 24px;
	margin-right: -8px;
	padding-bottom: 40px;
	overflow-y: scroll;
	scrollbar-width: thin;
	scrollbar-color: #666 transparent
}

#overlay article * {
	user-select: text!important
}

#overlay .throbber {
	position: absolute;
	top: 50%;
	left: 50%;
	animation: spin 1.5s linear infinite
}

@keyframes spin {
	from {
		transform: translate(-50%, -50%)rotate(0)
	}
	to {
		transform: translate(-50%, -50%)rotate(360deg)
	}
}

#overlay article div {
	display: flex;
	justify-content: center;
	margin-top: 8px
}

#overlay article div a {
	max-width: 200px;
	margin: 0 4px;
	-webkit-user-drag: none
}

#overlay article div img {
	margin: 0 4px
}

#overlay article h1 {
	font-size: 36px;
	text-align: center;
	margin-bottom: 16px
}

#overlay article h2 {
	font-size: 24px;
	text-align: center;
	margin-top: 38px;
	margin-bottom: 12px
}

#overlay article p {
	font-weight: 400;
	margin: 8px 0
}

#overlay article a {
	font-weight: 600;
	color: #3b7572
}

#overlay article code {
	background-color: rgba(51, 68, 68, .6);
	padding-left: 6px;
	padding-right: 6px;
	border-radius: 4px
}

.huggingface {
	background-color: rgba(252, 212, 28, .75);
	color: #000!important;
	font-weight: 600
}

.huggingface:hover {
	background-color: rgba(252, 212, 28, .4)
}

.huggingface:active {
	background-color: rgba(252, 212, 28, .2);
	outline: 3px solid rgba(252, 212, 28, .5)
}

.filespayouts {
	background-color: #068102
}

.filespayouts:hover {
	background-color: rgba(43, 133, 2, .4)
}

.filespayouts:active {
	background-color: rgba(51, 255, 0, .2);
	outline: 3px solid rgba(0, 207, 0, .5)
}

.mediafire {
	background-color: rgba(0, 119, 255, .75)
}

.mediafire:hover {
	background-color: rgba(0, 119, 255, .4)
}

.mediafire:active {
	background-color: rgba(0, 119, 255, .2);
	outline: 3px solid rgba(0, 119, 255, .5)
}

.gofile {
	background-color: rgba(252, 212, 28, .75);
	color: #000!important;
	font-weight: 600
}

.gofile:hover {
	background-color: rgba(252, 212, 28, .4)
}

.gofile:active {
	background-color: rgba(252, 212, 28, .2);
	outline: 3px solid rgba(252, 212, 28, .5)
}

.onefichier {
	background-color: rgba(255, 130, 28, .75);
	color: #000!important;
	font-weight: 600
}

.onefichier:hover {
	background-color: rgba(252, 130, 28, .4)
}

.onefichier:active {
	background-color: rgba(252, 130, 28, .2);
	outline: 3px solid rgba(252, 130, 28, .5)
}

.uploadrar {
	background-color: #00bcd4
}

.uploadrar:hover {
	background-color: rgba(0, 187, 212, .555)
}

.uploadrar:active {
	background-color: rgba(0, 187, 212, .171);
	outline: 3px solid rgba(3, 154, 255, .5)
}

.torrent {
	background-color: rgba(118, 184, 63, .75)
}

.torrent:hover {
	background-color: rgba(118, 184, 63, .4)
}

.torrent:active {
	background-color: rgba(118, 184, 63, .2);
	outline: 3px solid rgba(118, 184, 63, .5)
}

.archive {
	background-color: rgba(0, 0, 0, .75)
}

.archive:hover {
	background-color: rgba(0, 0, 0, .4)
}

.archive:active {
	background-color: rgba(0, 0, 0, .2);
	outline: 3px solid rgba(0, 0, 0, .5)
}

.drive {
	background-color: rgba(66, 133, 244, .75)
}

.drive:hover {
	background-color: rgba(66, 133, 244, .4)
}

.drive:active {
	background-color: rgba(66, 133, 244, .2);
	outline: 3px solid rgba(66, 133, 244, .5)
}

.mega {
	background-color: rgba(221, 20, 5, .75)
}

.mega:hover {
	background-color: rgba(221, 20, 5, .4)
}

.mega:active {
	background-color: rgba(221, 20, 5, .2);
	outline: 3px solid rgba(221, 20, 5, .5)
}

.other {
	background-color: rgba(66, 66, 66, .75)
}

.other:hover {
	background-color: rgba(66, 66, 66, .4)
}

.other:active {
	background-color: rgba(66, 66, 66, .2);
	outline: 3px solid rgba(66, 66, 66, .5)
}

.dmca {
	position: absolute;
	bottom: 6px;
	left: 50%;
	transform: translateX(-50%);
	text-shadow: 0 0 16px #000;
	opacity: .5
}


::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: none;
}
::-webkit-scrollbar-thumb {
  background: #666;
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
  background: #444;
}

@media(max-height:600px) {
	aside article.box,
	.search,
	.dmca {
		display: none!important
	}
}

@media(max-height:494px) {
	section.list {
		height: calc(100vh - 102px)!important
	}
}

@media(orientation:portrait),
(max-width:705px) {
	main {
		top: calc(50vh - 30px);
		width: calc(100vw - 24px)
	}
	section.list {
		height: calc(100vh - 290px)!important
	}
	aside.right {
		display: none
	}
	aside.left {
		width: 100vw
	}
	aside article.box {
		display: none!important
	}
	aside.left img {
		margin-top: 4px;
		margin-left: 4px
	}
	aside.left .categories {
		flex-direction: row;
		overflow-x: auto;
		width: calc(100vw - 24px);
		scrollbar-width: thin;
		scrollbar-color: #666 transparent;
		position: absolute;
		top: calc(100vh - 60px)
	}
	ul.categories li {
		padding-left: 8px;
		padding-right: 8px
	}
	.search {
		width: calc(100vw - 24px);
		position: absolute;
		top: calc(100vh - 110px);
		padding: 0;
		padding-left: 8px;
		align-items: center
	}
	.search #optiSearch {
		height: 38px;
		width: 100%;
		font-size: 16px
	}
	aside.left .bottom {
		position: absolute;
		top: 18px;
		right: 12px;
		height: 32px
	}
	aside.left .social {
		margin-top: 0
	}
	#overlay article {
		width: calc(100vw - 32px)
	}
	#overlay .title {
		width: calc(100vw - 52px)
	}
	.dmca {
		display: none
	}
}

@media(max-width:410px) {
	aside.left img {
		opacity: .5
	}
}