@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

body
{
	padding: 0;
	margin: 0;
	background: #222222;
	background-size: 100vw 100vh;
	background-attachment: fixed;
	overflow: hidden;
}

.wallpaper
{
	padding: 0;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	height: 100vh;
	width: 100vw;
	background: url(../images/wallpaper.jpg);
	background-size: cover;
	filter: brightness(0.3);
	opacity: 0.5;
}

.usersBack
{
	padding: 0;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	height: 100vh;
	width: 19vw;
	background: linear-gradient(135deg, #ADECE9, #F8D6E2);
	opacity: 0.08;
}

.usersList
{
	padding: 0;
	margin: 0;
	position: absolute;
	top: 1.5vw;
	left: 1.5vw;
	z-index: 1;
	height: 100vh;
	width: 15vw;
}

.user
{
	padding: 0;
	margin: 1vw 0;
	z-index: 2;
	height: 5vw;
	width: 15vw;
	border-radius: 0.5vw;
	background: linear-gradient(135deg, #ADECE922, #F8D6E222);
	cursor: pointer;
}

.user:hover
{
	background: linear-gradient(135deg, #ADECE933, #F8D6E233);
}

.userSelected
{
	background: linear-gradient(135deg, #ADECE944, #F8D6E244) !important;
}

.avatar
{
	padding: 0;
	margin: 0;
	position: relative;
	top: 1vw;
	left: 1vw;
	z-index: 3;
	height: 3vw;
	width: 3vw;
	border-radius: 2vw;
	background: url(../images/avatar.png);
	background-size: cover;
	cursor: pointer;
	border: solid 2px #FFFFFF;
	box-shadow: #000000 0 0 6px -2px;
}

.avatarVanished
{
	filter: saturate(0) !important;
}

.pseudo
{
	padding: 0;
	margin: 0;
	position: relative;
	top: -2vw;
	left: 5vw;
	z-index: 3;
	height: 3vw;
	width: 9vw;
	display: inline-block;
}

.username
{
	padding: 0;
	margin: 0;
	z-index: 4;
	height: 1.6vw;
	line-height: 1.6vw;
	font-size: 1.4vw;
	font-family: Inter;
	font-weight: 400;
	color: #FFFFFF;
	text-shadow: #000000 0 0 4px;
	user-select: none;
}

.tagname
{
	padding: 0;
	margin: 0;
	z-index: 4;
	height: 1.4vw;
	line-height: 1.4vw;
	font-size: 1vw;
	font-family: Inter;
	font-weight: 300;
	color: #FFFFFFBB;
	text-shadow: #000000 0 0 4px;
	user-select: none;
}

.usersScrollBack
{
	padding: 0;
	margin: 0;
	position: absolute;
	top: 3vh;
	left: 17.8vw;
	z-index: 4;
	height: 94vh;
	width: 0.6vw;
	border-radius: 0.5vw;
	background: #111111AA;
}

.usersScroll
{
	padding: 0;
	margin: 0;
	position: absolute;
	top: 3vh;
	left: 17.8vw;
	z-index: 5;
	height: 40vh;
	width: 0.6vw;
	border-radius: 0.5vw;
	background: linear-gradient(135deg, #ADECE9, #F8D6E2);
	cursor: pointer;
	opacity: 0.2;
}

.usersScroll:hover { filter: brightness(1.2); }

.uploadBack
{
	padding: 0;
	margin: 0;
	position: absolute;
	bottom: 3vw;
	right: 13vw;
	z-index: 2;
	height: 6vw;
	width: 55vw;
	border-radius: 1vw;
	background: linear-gradient(135deg, #ADECE9, #F8D6E2);
	opacity: 0.08;
	cursor: pointer;
}

.uploadAdvice
{
	padding: 0;
	margin: 0;
	position: absolute;
	bottom: 9vw;
	right: 13.5vw;
	z-index: 2;
	height: 2vw;
	line-height: 2vw;
	text-align: right;
	font-size: 1vw;
	font-family: Inter;
	font-weight: 200;
	color: #FFFFFF;
	text-shadow: #000000 0 0 4px;
	user-select: none;
}

.uploadArrow
{
	padding: 0;
	margin: 0;
	position: absolute;
	bottom: 9vw;
	right: 39vw;
	z-index: 3;
	height: 3vw;
	width: 4vw;
	cursor: pointer;
}

.uploadArrow:hover
{
	animation-name: growArrow;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: ease;
}

@keyframes growArrow
{
	0% {  height: 3vw; transform: scale(1); }
	50% {  height: 4vw; transform: scale(1.4); }
	100% {  height: 3vw; transform: scale(1); }
}

.uploadLeftArrow
{
	padding: 0;
	margin: 0;
	position: absolute;
	top: 1vw;
	right: 1.5vw;
	z-index: 2;
	height: 0.6vw;
	width: 2vw;
	border-radius: 0.3vw;
	background: linear-gradient(135deg, #ADECE9, #F8D6E2);
	opacity: 0.08;
	cursor: pointer;
	transform: rotate(-45deg);
}

.uploadRightArrow
{
	padding: 0;
	margin: 0;
	position: absolute;
	top: 1vw;
	left: 1.5vw;
	z-index: 2;
	height: 0.6vw;
	width: 2vw;
	border-radius: 0.3vw;
	background: linear-gradient(135deg, #ADECE9, #F8D6E2);
	opacity: 0.08;
	cursor: pointer;
	transform: rotate(45deg);
}