Scoresheet: Change results screen

public/src/css/scoresheet.css

@@ -1,207 +0,0 @@
-.scoresheet{
-	width:100%;
-	height:100%;
-	color:black;
-	font-family: TnT;
-	background: url("/assets/img/bg-pattern-2.png");
-	position: absolute;
-}
-
-.scoresheet h2{
-	position:absolute;
-	top:1%;
-	left:1%;
-	font-size: 7vmin;
-	margin:0;
-	color: white;
-}
-
-.result-window{
-	width:70%;
-	margin:auto;
-}
-
-.scoresheet button{
-	height: 50%;
-	min-width:20%;
-	position: absolute;
-	display: inline-block;
-	cursor: pointer;
-	border:5px solid #ae7a26;
-	background: rgb(255, 255, 255);
-	color: black;
-	font-family: TnT;
-	font-size: 5vmin;
-	border-radius: 10px;
-	outline: none;
-	top:10%;
-	white-space: nowrap;
-}
-
-.scoresheet .replay{
-	left:1%;
-}
-
-.scoresheet .song-select{
-	left:23%;
-}
-
-.scoresheet button:hover,
-.scoresheet .bottom-part:not(:hover) button.selected{
-	border-color:#fa5d3a;
-	color:white;
-	background:#0c6577;
-}
-
-.scoresheet .result-bar{
-	max-width: 120vh;
-	height: 71vh;
-	min-height: 200px;
-	display:flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: flex-end;
-	position: absolute;
-	left: 0;
-	right: 0;
-	margin: auto;
-}
-
-.scoresheet .score-cont{
-	position:relative;
-	right:1%;
-	width:60%;
-	height:80%;
-	background:rgba(255,255,255,0.7);
-	border-radius:15px;
-	margin: 10px;
-	max-height: 33vh;
-}
-
-.scoresheet .score-hp-bar-bg{
-	position: relative;
-	margin-top:2%;
-	margin-left:5%;
-	background: url("/assets/img/hp-bar-bg.png");
-	background-size: contain;
-	background-repeat: no-repeat;
-	
-}
-
-.scoresheet .score-hp-bar-colour{
-	position:absolute;
-	padding: 0;
-}
-
-.scoresheet .score-hp-bar-colour img{
-	position:absolute;
-	height: 100%;
-	width: 100%;
-	margin:0;
-	padding:0;
-}
-
-.scoresheet .score-points{
-	min-width:30%;
-	height:18%;
-	background:black;
-	border:5px solid #ae7a26;
-	border-radius: 10px;
-	position:absolute;
-	bottom:5%;
-	left:5%;
-	color: white;
-	font-size: 5vmin;
-	text-align: right;
-	padding: .3% 1%;
-	white-space: nowrap;
-}
-
-.scoresheet .score-details{
-	position: absolute;
-	right:5%;
-	width:70%;
-	height:50%;
-	color:white;
-}
-
-.scoresheet .score-details th,
-.scoresheet .score-details td{
-	font-size: 3vmin;
-	font-weight: normal;
-	white-space: nowrap;
-}
-
-.scoresheet .score-details td{
-	text-align: right;
-}
-
-.scoresheet .value{
-	width: 25%;
-}
-
-.scoresheet .bottom-part{
-	position: fixed;
-	width:100%;
-	height:19vh;
-	bottom:0;
-	-webkit-box-shadow: inset 0px 10px 20px -5px #ee6d46;
-	-moz-box-shadow: inset 0px 10px 20px -5px #ee6d46;
-	box-shadow: inset 0px 10px 20px -5px #ee6d46;
-	border-top:10px outset #b6361d;
-	box-sizing: border-box;
-}
-
-.scoresheet .score-mark{
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	right: 105%;
-	height: 40%;
-	margin: auto;
-}
-
-.scoresheet .gradient-overlay{
-	position:absolute;
-	width:100%;
-	height:100%;
-	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(255,165,100,0.64) 62%, rgba(255,165,100,0.65) 63%);
-
-}
-
-.scoresheet .top-part{
-	width:100%;
-	height:10vh;
-	background:#e84019;
-	border-bottom:5px solid #b23111;
-	box-sizing: border-box;
-}
-
-.header-great,
-.header-fail{
-	color: transparent;
-}
-.header-great::after,
-.header-fail::after{
-	content: attr(alt);
-	color: transparent;
-	-webkit-background-clip: text;
-	background-clip: text;
-	position: absolute;
-	width: 100%;
-	left: 0;
-}
-.header-great::after{
-	background-image: linear-gradient(0deg, #f00 10%, #fe0 70%);
-}
-.header-fail::after{
-	background-image: linear-gradient(0deg, #00b3df 30%, #6a62f9 90%);
-	
-}
-.scoresheet .stroke-sub{
-	position:relative;
-	z-index:1;
-}
-.scoresheet .stroke-sub::before{
-	left:auto;
-}