:root {
	--c-chat: rgba(21, 24, 51, 0.9);
}


body {background-color: transparent;
background-size: cover;background-position: center bottom;}

video {
	position:absolute;bottom:0;left:0;width:100%;min-height:100%;z-index: 2;
	background-color: black;display: none;
}

.chars {
	position:relaltive;width:100%;height:100%;
	text-align: center;
}

.charin {position:relative;display: inline-block;}
.charin .mainchar {
	height: 90vh;vertical-align: bottom;z-index: 4;
	margin-top: 10vh;padding: 0;cursor: pointer;position: relative;
	transition: all 0.2s ease-in-out;
}
.charin .hover {
	position:absolute;height:90vh;top: 10vh;left:0;z-index: 2;
	opacity: 0;transition: all 0.2s ease-in-out;
}
.charin:hover .hover {opacity: 1;}
.zoomedchar {height: 150vh!important;top: 0vh!important;}



i {color: #B5B5B5 !important;}
.top {position:absolute;top:0;left:0;width: 98vw;padding: 1vw;z-index: 6;}
.top .time {
	position:relative;display: inline-block;width: 30%;
}

.time .topwaet {
	position:absolute;width: 15vw;top:-1.5vw;left:-2vw;opacity: 0.8;
	transform: rotate(20deg);
}
.time .date {
	display:block;position: absolute;top: 1.8vw;transform: rotate(-7deg);
	left: 0vw;font-size: 3vw;line-height: 3vw;
	font-weight: 900;color: white;letter-spacing: 1px;font-family: 'Dafoe', cursife;
}
.userinfo {
	display:inline-block;width:70%;text-align: right;position: relative;
	vertical-align: top;
}
.userinfo .toprbg {
	position:absolute;top:-1vw;right:-1vw;width: 30vw;display:block;opacity: 0.8;
}
.commandsontop {
	position: absolute;right:8.5vw;top:-5.5vh;transform: rotate(-6deg);
}
.commandsontop .commandtop {
	display: inline-block;position:relative;padding: 0 1vw;
	height: 6vh;vertical-align: middle;margin-top: 0vw;
}
.commandtop img {
	height: 6vh;display: block;position:relative;cursor:pointer;
	transition: all 0.2s ease-in-out;
}
.commandtop img:hover {
	transform: scale(1.1);
}
.userinfo font {font-weight: 900;color: white;letter-spacing: 1px;text-align: center;}

.money {
	position: absolute;top:5vw;transform: rotate(3deg);right:5.5vw;
	width: 20vw;font-size: 2.5vw !important;line-height: 2.5vw !important;
	
}
.user {
	position: absolute;top:1vw;transform: rotate(5deg);right: 2vw;
	width: 16vw;font-size: 3vw !important;line-height: 3vw !important;
	font-family: 'Dafoe', cursife;
}


@media (max-width: 980px) {
	.time .date {font-size: 3vw;}
	.userinfo font {font-size: 3vw;}
	.chatbox .commandtop, .commandtop img {height: 9vh;}
	.commandsontop {top:-9vh;}
}


.chatbox {
	width: 98vw;height: 18vh;position: absolute;bottom: 1vh;left: 1vw;
	background-color: transparent;overflow: initial;z-index: 200;
	transition: all 0.2s ease-in-out;
}
.chatbox .imgboxchat {
	position:absolute;top:-50%;left:0%;width:100%;height:160%;display:block;
	opacity: 0.8;
}
.chatbox a {color: var(--c-magenta);background-color: rgba(255,255,255,0.6);}
.chatbox .sp1 {
	display:block;position:absolute;top: -0.5vw;right: 0;
	height: 1vw;background-color: var(--c-magenta);width: 10vw;
}
.chatbox .sp2 {
	display:block;position:absolute;top: 1vw;right: 0;
	height: 1vw;background-color: var(--c-magenta);width: 6vw;
}
.chatbox .text .name {
	position: absolute;font-size: 2.2vw;left: 0vw;top: -9.5vh;text-align: center;
	font-weight: 800;color: white;-webkit-text-stroke: 2px black;width: 35vw;
	transform: rotate(-2deg);
}
.chatbox .text {
	position:relative;display:block;width: 85%;height: 75%;margin-top: 2%;
	margin-left: 5%;font-size: 1.2vw;color: white;font-weight: 400;opacity: 0;
	text-align: left;letter-spacing: 1px;transition: all 0.2s ease-in-out;
}
.hidetext {display: none;opacity:0;}
.chatbox .nextarrw {
	position: absolute;bottom: 2.5vh;right: 6vw;
	width: 4vw;cursor: pointer;transition: all 0.2s ease-in-out;
}
.chatbox:hover .nextarrw {transform: scale(1.1);right: 5.5vw;}



.takeactions {
	position: absolute;top: 20%;left: 0%;width: 35%;height: 60%;z-index: 4;
	text-align: center;
}
.takeactions a {
	display: block;position: relative;margin: 1vw;padding: 3vw 0;padding-top: 3.5vw;
	font-size: 1.3vw;line-height: 1.3vw;color: white;font-weight: 900;text-align: center;
	background-position: center;width: 80%;text-decoration: none;margin-left: -3%;
	transition: all 0.2s ease-in-out;cursor: pointer;background-repeat: no-repeat;
	background-image: url(../assets/gui/menubtn.png);background-size: 100% 100%;
}
.takeactions a font {
	position:relative;transform: rotate(-3deg);display:block;
}
.takeactions a:hover {margin-left: 0;color: var(--c-magenta);}

@keyframes efc {0%{opacity: 0}50%{opacity: 1;}100%{opacity: 0;}}
.efc {
	position:absolute;top:0;left:0;width:100%;height:100%;background-color: white;z-index: 950;
	animation: efc 1s ease-in-out forwards;opacity: 1;
}





.settings {
	position: absolute;z-index:999;top:0;left:0;width:100%;height: 100%;overflow: hidden;
	text-align: center;background-color: rgba(50,50,50,0.6);
	background-position: center;
	
	display: none;opacity: 0;
	transition: opacity: 0.2s ease-in-out;
}
@keyframes settings1 {
	from {opacity: 0;}to{opacity: 1;}
}
.settings::before {
	background-image: url(../assets/gui/settings.png);background-size: cover;
	content:"";position:absolute;top:0;left:0;width:100%;height:100%;opacity: 0;
	animation: settings1 0.3s ease-in-out forwards;animation-delay: 0.5s;
}
.stitl {
	position:absolute;top: 12.5vh;left: 16vw;color: white;transform: rotate(-4deg);
	font-size: 2.5vw;line-height: 2.5vw;font-weight: 900;text-align: left;opacity: 0;
	animation: settings1 0.3s ease-in-out forwards;animation-delay: 0.9s;
}
.leftsettings {
	position: absolute;bottom: 15vh;right:56vw;width: 25%;opacity: 0;
	height: 65%;transform: skewX(2deg) rotate(-3deg);
	animation: settings1 0.3s ease-in-out forwards;animation-delay: 1.1s;
}
.settingsopt {
	position: relative;width: 100%;margin-bottom: 1vw;
}
.setopt {
	font-size: 1.25vw;line-height:1.25vw;color:white;font-weight:900;display:block;
	text-align: left;top: 0vh;transform: rotate(-4deg);left: 1.5vw;
	position: absolute;z-index: 4;text-shadow: 0 0 0.25vw black;
}
.settingsopt img {
	position:relative;width:100%;
}

input[type=range] {
	-webkit-appearance: none;appearance: none;width: 75%;
	height: 1.5vw;outline: none;background: var(--c-bg);
	
	position: absolute;left: 2.5vw;top: 5vh;transform: rotate(-3deg);
}
input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;appearance: none;width: 3vw;height: 3vw;
	background-color: var(--c-magenta);
	cursor: pointer;border-radius: 50%;background-position: center;
	background-image: url(../assets/sprites/slide.png);background-size: 90% 90%;
	background-repeat: no-repeat;box-shadow: 0 0 0.25vw 0 rgba(0,0,0,0.6);
}







.charact {
	position: absolute;bottom:0;right: 25%;height: 90%;
	cursor: pointer;transition: all 0.2s ease-in-out;
}
.charact img {display:block;height:100%;}
.charact:hover {background: radial-gradient(rgba(152,17,224,0.3), rgba(152,17,224,0) 80%);}