Remove extraneous CSS file

style.css

@@ -1,296 +0,0 @@
-:root {
-	--spotify-green: #1DB954;
-	--spotify-white: #FFFFFF;
-	--spotify-black: #000000;
-
-	--accent1: #7289da;
-	--accent2: #00aa00;
-
-	--error: #ff0000;
-
-	--background: #23272A;
-	--background-text: var(--spotify-white);
-
-	--card-colour: #2C2F33;
-	--card-text: #ffffff80;
-
-	--on-card-colour: #4c4c4c;
-	--on-card-text: var(--spotify-green);
-
-	--modal-container-background: #0e0f10eb;
-	--modal-background: var(--card-colour);
-	--modal-text: var(--card-text);
-
-	--fonts: 'Open Sans', sans-serif;
-}
-
-
-html, body, #app {
-	width: 100%;
-	height: 100%;
-	margin: 0;
-	padding: 0;
-	overflow-x: hidden;
-	font-family: var(--fonts);
-}
-
-
-body {
-	background-color: var(--background);
-}
-
-
-p {
-	padding: 10px;
-}
-
-select {
-	background-color: var(--spotify-black);
-	color: var(--spotify-white);
-	padding: 15px;
-	border-style: none;
-	border-radius: 7px;
-	font-family: var(--fonts);
-	outline: none;
-}
-select:hover { cursor: pointer; }
-select:focus { border-style: none; }
-
-button {
-	padding: 10px 20px;
-	background-color: var(--spotify-green);
-	border-style: none;
-	border-radius: 50px;
-	font-size: larger;
-	font-family: var(--fonts);
-	outline: none;
-}
-button:hover { cursor: pointer; }
-
-input[type=number] {
-	background-color: var(--spotify-black);
-	color: var(--spotify-white);
-	padding: 15px;
-	border-style: none;
-	border-radius: 7px;
-	font-family: var(--fonts);
-	outline: none;
-}
-input[type=number]:active {
-	border-color: var(--spotify-green);
-}
-
-
-div.body {
-	display: flex !important;
-	flex-direction: column;
-	flex-wrap: wrap;
-	justify-content: center;
-	width: 95%;
-	margin-left: auto;
-	margin-right: auto;
-}
-
-
-[v-cloak], .hidden {
-	display: none !important;
-}
-
-#login {
-	width: 100%;
-	height: 100%;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	color: var(--spotify-green);
-}
-
-
-.flex-row {
-	display: flex;
-	flex-direction: column;
-	justify-content: space-evenly;
-	align-items: center;
-	width: 90%;
-	background-color: var(--card-colour);
-	color: var(--card-text);
-	margin: 10px auto;
-	border-radius: 10px;
-	padding: 5px;
-}
-
-.flex-row > div {
-	margin: 10px;
-}
-
-.row {
-	width: 90%;
-	background-color: var(--card-colour);
-	color: var(--card-text);
-	margin: 10px auto;
-	padding: 20px;
-	border-radius: 10px;
-}
-
-.center {
-	text-align: center;
-}
-
-.error {
-	color: var(--error);
-	border-style: solid;
-	border-radius: 5px;
-	border-width: 2px;
-}
-
-div#login > div {
-	display: inline-block;
-	color: var(--card-text);
-	padding: 20px;
-	margin: 5px;
-	background-color: var(--card-colour);
-	border-radius: 7px;
-	font-size: large;
-	width: 95%;
-}
-
-.account-info {
-	color: var(--spotify-white);
-}
-
-.profile-picture {
-	--profile-pic-width: 50px;
-	width: var(--profile-pic-width);
-	height: var(--profile-pic-width);
-	vertical-align: middle;
-	border-radius: 50%;
-	margin-right: 5px;
-}
-
-
-/* Tooltip Styling */
-.tooltip {
-	display: none !important;
-	z-index: 2;
-}
-
-.tooltip .tooltip-inner {
-	background: var(--spotify-black);
-	color: var(--spotify-green);
-	border-radius: 16px;
-	padding: 5px 10px 4px;
-}
-
-.tooltip .tooltip-arrow {
-	width: 0;
-	height: 0;
-	border-style: solid;
-	position: absolute;
-	margin: 5px;
-	border-color: black;
-	z-index: 1;
-}
-
-.tooltip[x-placement^="top"] {
-	margin-bottom: 5px;
-}
-
-.tooltip[x-placement^="top"] .tooltip-arrow {
-	border-width: 5px 5px 0 5px;
-	border-left-color: transparent !important;
-	border-right-color: transparent !important;
-	border-bottom-color: transparent !important;
-	bottom: -5px;
-	left: calc(50% - 5px);
-	margin-top: 0;
-	margin-bottom: 0;
-}
-
-.tooltip[x-placement^="bottom"] {
-	margin-top: 5px;
-}
-
-.tooltip[x-placement^="bottom"] .tooltip-arrow {
-	border-width: 0 5px 5px 5px;
-	border-left-color: transparent !important;
-	border-right-color: transparent !important;
-	border-top-color: transparent !important;
-	top: -5px;
-	left: calc(50% - 5px);
-	margin-top: 0;
-	margin-bottom: 0;
-}
-
-.tooltip[x-placement^="right"] {
-	margin-left: 5px;
-}
-
-.tooltip[x-placement^="right"] .tooltip-arrow {
-	border-width: 5px 5px 5px 0;
-	border-left-color: transparent !important;
-	border-top-color: transparent !important;
-	border-bottom-color: transparent !important;
-	left: -5px;
-	top: calc(50% - 5px);
-	margin-left: 0;
-	margin-right: 0;
-}
-
-.tooltip[x-placement^="left"] {
-	margin-right: 5px;
-}
-
-.tooltip[x-placement^="left"] .tooltip-arrow {
-	border-width: 5px 0 5px 5px;
-	border-top-color: transparent !important;
-	border-right-color: transparent !important;
-	border-bottom-color: transparent !important;
-	right: -5px;
-	top: calc(50% - 5px);
-	margin-left: 0;
-	margin-right: 0;
-}
-
-.tooltip.popover .popover-inner {
-	background: #f9f9f9;
-	color: black;
-	padding: 24px;
-	border-radius: 5px;
-	box-shadow: 0 5px 30px rgba(black, .1);
-}
-
-.tooltip.popover .popover-arrow {
-	border-color: #f9f9f9;
-}
-
-.tooltip[aria-hidden='true'] {
-	visibility: hidden;
-	opacity: 0;
-	transition: opacity .15s, visibility .15s;
-}
-
-.tooltip[aria-hidden='false'] {
-	visibility: visible;
-	opacity: 1;
-	transition: opacity .15s;
-}
-/* End of Tooltip */
-
-
-@media only screen and (min-width: 768px) {
-	.tooltip {
-		display: block !important;
-	}
-	div.body {
-		flex-direction: row;
-		flex-wrap: wrap;
-		width: 90%;
-	}
-	.flex-row {
-		flex-direction: row;
-		flex-wrap: wrap;
-	}
-	div#login > div {
-		width: 33%;
-	}
-}