@import url('https://fonts.cdnfonts.com/css/aller');
body {
	color:#f6e8ea;
	font-family: 'Aller';
	-webkit-text-stroke-width: 1.5px;
	-webkit-text-stroke-color: black;
	background: #000;
    overflow: hidden;
}
#banner {
	height: 6.27vh;
    width: 20vw;
	text-align: center;
	background: url("static/banner.png");
	background-size: 100% 100%;
	color: white;
	font-size:2.5vmax;
	margin-top: 6vh;
	margin-left: 2.75vw;
	line-height: 6.27vh;
}
.sidebar {
	background: url("static/sidebar.png");
	background-size: 100% 100%;
	filter: drop-shadow(-.5rem .5rem 1rem #000);
}
.logo {
	margin-top: 12vh;
	margin-left: 2.75vw;
	width: 20vmin;
	height: 20vmin;
	background: url("static/logo.svg");
	background-size: 100% 100%;
}
.sidebar-content {
	height: 100%;
	font-size: 4.5vw;
	text-align: right;
	margin-right: 0.3vw;
}
.fill {
	position:fixed;
	padding:0;
	margin:0;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
}
.flip {
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
}
.blur {
	filter: blur(0.25rem);
	-webkit-filter: blur(0.25rem);
}
#rank-container {
	margin-top: 7vh;
	margin-left: 2.75vw;
	width: 20vw;
	height: 44.35vh;
	background: #22171b;
	-moz-border-radius: 20%;
	-webkit-border-radius: 20%;
	border-radius: 20%;
}
.rank {
	width: 100%;
	height: 100%;
	filter: drop-shadow(-.5rem .5rem 1rem #000);
}
.rank.D {
	background: url("static/ranks/D.png");
	background-size: 100% 100%;
}
.rank.C {
	background: url("static/ranks/C.png");
	background-size: 100% 100%;
}
.rank.B {
	background: url("static/ranks/B.png");
	background-size: 100% 100%;
}
.rank.A {
	background: url("static/ranks/A.png");
	background-size: 100% 100%;
}
.rank.S {
	background: url("static/ranks/S.png");
	background-size: 100% 100%;
}
.rank.SH {
	background: url("static/ranks/SH.png");
	background-size: 100% 100%;
}
.rank.X {
	background: url("static/ranks/X.png");
	background-size: 95% 95%;
	background-repeat: no-repeat;
	background-position: center;
}
.rank.XH {
	background: url("static/ranks/XH.png");
	background-size: 95% 95%;
	background-repeat: no-repeat;
	background-position: center;
}
.mod {
    width: 6vw;
    padding-right: 5px;
}
.mod.HD {
    content: url("./static/mods/HD.png");
}
.mod.FL {
    content: url("./static/mods/FL.png");
}
.mod.HR {
    content: url("./static/mods/HR.png");
}
.mod.DT {
    content: url("./static/mods/DT.png");
}
.mod.NC {
    content: url("./static/mods/NC.png");
}
.mod.HT {
    content: url("./static/mods/HT.png");
}
.mod.EZ {
    content: url("./static/mods/EZ.png");
}
.mod.SD {
    content: url("./static/mods/SD.png");
}
.mod.PF {
    content: url("./static/mods/PF.png");
}
.mod.SO {
    content: url("./static/mods/SO.png");
}
.mod.NF {
    content: url("./static/mods/NF.png");
}
.mod.RX {
    content: url("./static/mods/RX.png");
}
.mod.AP {
    content: url("./static/mods/AP.png");
}
.red {
	color: #e53862 !important;
}
.yellow {
	color: #fde744 !important;
}
#artist {
	position: absolute;
	top:4vh; right: 0.3vw;
	padding: 0; margin: 0;
	width: 38vw; height:10vh;
}
#song {
	position: absolute;
	top:16vh; right: 0.3vw;
	padding: 0; margin: 0;
	width: 45vw; height:10vh;
}
#difficulty {
	position: absolute;
	top:26vh; right: 0.3vw;
	padding: 0; margin: 0;
	width: 38vw; height:10vh;
}
#comment {
    width: 29.5vw; height: 13vh;
    white-space: normal;
	position:absolute;
	padding: 0; margin: 0;
	top: 54vh; right: 0.3vw;
}
#pp {
	font-size: 8vw;
	position:absolute;
	padding: 0; margin: 0;
	top: 38vh; right: 0.3vw;
    width:30vw; height: 15vh;
}
#user {
	position:absolute;
	padding: 0;
	margin: 0;
	bottom: 1vh;
	right: 0.3vw;
	margin:0;
}
#username {
    width: 31.25vw; height: 9.72vh;
}
#profilepic {
	width: 13.33vw;
	height: 13.33vw;
	border: 2px solid #fff;
	border-radius: 50%;
}
#mods {
    vertical-align: bottom;
}