p, div{
	margin: 0;
}
html{
	background: linear-gradient(to bottom, #907a7a, #d0baba);
	overflow: hidden;
	font-family: 'Roboto', sans-serif;
	color: rgba(0,0,0,0.65);
	filter: blur(3px);
	transition: filter 0.8s;
}
html.load{
	filter: blur(0px);
}
div{
	position: absolute;
}
.left, .top, .right-lower, .right-higher, .bottom, .phpbox, .phpbox2, .phpbox3, .phpcount{
	overflow: auto;
}
#sub{
	color: rgba(50,0,0,0.75);
	text-decoration: none;
	transition: color 0.2s;
}
#sub:hover{
	color: rgba(100,35,35,0.85);
}
h1{
	margin: 0.75vh 0;
}
#ss{
	max-height: 36vh;
	max-width: 36vw;
	border-radius: 20px;
	border: 4px solid #404040;
	flex-wrap: wrap;
	justify-content: center;
}
#pfptxt{
	font-size: 3.5vh;
	margin: 1vh 0 0 0;
	float: left;
}
#pfp{
	width: height;
	float: left;
	height: 90%;
	border-radius: 49.5%;
	border: 4px solid #505050;
	margin: 0.25% 0.25%;
}
#logo{
	height: 1.1em;
	filter: grayscale(30%);
	border-radius: 4px;
	margin: auto 0.5vw;
	vertical-align: middle;
}
.main{
	width: 96vw;
	height: 96vh;
	margin: auto;
	padding: 0.5vh 0.5vw;
	background-clip: padding-box;
	background-color: #e0d0d0;
	border-radius: 20px;
	border: 4px solid #504040;
	position: relative;
	overflow: auto;
}
.top{
	width: 77.5vw;
	height: 16vh;
	background-color: #707070;
	border-radius: 1em;
	border: 4px solid #606060;
	margin: 1vh 1vw 1vh 17vw;
	z-index: 8;
}
.left{
	float: left;
	width: 15vw;
	height: 86vh;
	margin: 1vh 1vw 1vh 1vw;
	background-color: #a06060;
	border: 4px solid #905050;
	border-radius: 20px;
}
.right{
	width: 78vw;
	height: 74vh;
	margin: 19vh 1vw 0 17vw;
	color: #000000;
}
.right-higher{
	width: 77.5vw;
	height: 18vh;
	background-color: #a07070;
	border: 4px solid #906060;
	border-radius: 20px;
	margin: 0;
}
.right-lower{
	width: 77.5vw;
	height: 48vh;
	background-color: #606060;
	border: 4px solid #505050;
	border-radius: 20px;
	margin: 20vh 0 0 0;
	text-align: center;
}
.imgbox{
	margin: 0 1vw;
}
.listmods{
	width: 50%;
	height: 60%;
	background-color: #a87878;
	border: 4px solid #906060;
	border-radius: 10px;
	overflow: auto;
	margin: 1vh 0 1vh 1vw;
}
.bottom{
	width: 93.5vw;
	height: 50px;
	margin: 89vh 0 1vh 1vw;
	background-color: #505050;
	border: 4px solid #404040;
	border-radius: 15px;
	text-align: center;
}
.left:hover, .right-lower:hover, .right-higher:hover, .top:hover, .bottom:hover{
	filter: brightness(108%);
}
.left, .right-lower, .right-higher, .top, .bottom{
	transition: 0.15s;
}
.top-list-div{
	position: relative;
	float: right;
	height: 16vh;
}
#top-list{
	width: fit-content;
	margin: 1vh 0;
	text-align: right;
}
#top-list li{
	margin-top: 0.5vh;
}
#eightyeight{
	width: 88px;
	height: 31px;
	margin: 0 0 0 5px;
	position: relative;
	top: 8px;
	display: inline;
	border: 2px solid #404040;
}
#mods-text, #mod{
	margin: 0.75vh 0 0.75vh 1vw;
	color: rgba(0,0,0,0.75);
}
#mods-ul{
	margin: 0 0 0 1vw;
	padding: 0;
}
#mod{
	width: fit-content;
	padding: 0.25% 1%;
	transition: 0.33s;
}
#mod:hover{
	color: rgba(50,0,0,0.75);
	background-color: rgba(255,255,255,0.06);
	border-radius: 4px;
	cursor: pointer;
}
#mods-span1{
	color: rgba(0,0,0,0.3);
	font-size: 0.7em;
}
#leftp{
	font-size: 24px;
	margin: 0.75vh 0.5vw;
	padding: 0.75vh 0.75vw;
	color: rgba(0,0,0,0);
	border-radius: 20px;
}
.phpbox{
	height: 60vh;
	width: 50vw;
	border: 4px solid #504040;
	border-radius: 20px;
	margin: 1vh 1vw;
	background: linear-gradient(to bottom, rgba(50,0,0,0.15), rgba(50,0,0,0.04));
}
.phpbox3{
	height: 45vh;
	width: 48vw;
	margin: 13vh 1vw 1vh 1vw;
	border: 4px solid #504040;
	border-radius: 10px;
	text-align: center;
	background: linear-gradient(to bottom, rgba(50,0,0,0.15), rgba(50,0,0,0.04));
}
.phpbox2{
	height: 10vh;
	width: 48vw;
	margin: 1vh 1vw;
	border: 4px solid #504040;
	border-radius: 10px;
	text-align: center;
	background: linear-gradient(to bottom, rgba(50,0,0,0.25), rgba(50,0,0,0.1));
}
#phptxt{
	font-size: 24px;
	font-weight: 600;
	margin: 1vh 0;
}
#phptxt:nth-child(2){
	font-size: 20px;
	margin-top: 0.5vh;
}
#form{
	height: 100%;
	width: 100%;
}
#form1, #form2, #form3, #submit{
	width: 50%;
	margin-top: 0.5vh;
	border-radius: 4px;
}
#form2{
	text-align: top-left;
	height: 50%;
	width: 85%;
	resize: none;
	font-size: 20px;
	border-radius: 6px;
}
#submit{
	width: 20%;
}
#label, #label-sub{
	color: rgba(0,0,0,0.7);;
	font-size: 1.2em;
	margin-top: 0.75vh;
}
#label-sub{
	color: rgba(0,0,0,0.5);
	font-size: 0.75em;
}
.phpcount{
	height: 6vh;
	width: 18vw;
	margin: 1vh 0 0 52vw;
	border: 4px solid #504040;
	border-radius: 10px;
	background: linear-gradient(to bottom, rgba(50,0,0,0.3), rgba(50,0,0,0.08));
}
.phpcount p{
	margin-top: 1vh;
	text-align: center;
	font-size: 18px;
	color: rgba(0,0,0,0.75);
}
#phpback{
	margin: 9vh 0 0 52vw;
}
#pajak{
height: 15vh;
margin: 81vh 0 0 80vw;
position: absolute;
transition: opacity 0.4s;
opacity: 0.05;
}
#pajak.fade1{
opacity: 1;
}
#pajak.fade0{
opacity: 0.05;
}
#pajakback{
position: absolute;
margin: 76vh 0 0 86vw;
}

/*experimental animation stuff*/

@keyframes left-color{
	100% {color: rgba(0,0,0,0.75); background: rgba(255,255,255,0.08);}
}
@keyframes resize-left{
	100% {width: 30vw;}
}
@keyframes resize-top{
	100% {width: 62.5vw; margin: 1vh 1vw 1vh 32vw;}
}
@keyframes resize-right{
	100% {width: 63vw; margin: 19vh 1vw 0vh 32vw;}
}
@keyframes resize-rh{
	100% {width: 62.5vw;}
}
@keyframes right-higher-size{
	100% {font-size: 0.6em;}
}
@keyframes resize-rl{
	100% {width: 62.5vw;}
}
@keyframes right-lower-img{
	100% {max-height: 28vh; max-width: 28vw;}
}

/*animation names*/

#leftp.color{
	animation: 0.8s forwards left-color;
	animation-timing-function: cubic-bezier(1,0,0.8,0.8);
}
#leftp.color-rev{
	animation: 0.8s forwards reverse left-color;
	animation-timing-function: cubic-bezier(1,0,0.8,0.8);
}
.left.resize{
	animation: 0.75s forwards resize-left;
	animation-timing-function: cubic-bezier(0.11,0.77,0.18,1);
}
.top.resize{
	animation: 0.75s forwards resize-top;
	animation-timing-function: cubic-bezier(0.11,0.77,0.18,1);
}
.right.resize{
	animation: 0.75s forwards resize-right;
	animation-timing-function: cubic-bezier(0.11,0.77,0.18,1);
}
.right-higher.resize{
	animation: 0.75s forwards resize-rh;
	animation-timing-function: cubic-bezier(0.11,0.77,0.18,1);
}
#mods-span1.size{
	animation: 0.75s forwards right-higher-size;
	animation-timing-function: cubic-bezier(0.11,0.77,0.18,1);
}
.right-lower.resize{
	animation: 0.75s forwards resize-rl;
	animation-timing-function: cubic-bezier(0.11,0.77,0.18,1);
}
#ss.imgresize{
	animation: 0.75s forwards right-lower-img;
	animation-timing-function: cubic-bezier(0.11,0.77,0.18,1);
}