re-arranged user flow to display assignment first, with the optional button to access information from spotify.

palindromed/css/style.css

@@ -0,0 +1,84 @@
+@import url('https://fonts.googleapis.com/css2?family=Ranchers&display=swap');
+* {margin: 0; padding: 0; box-sizing: border-box; font-family: 'Ranchers', cursive; letter-spacing: 5px;}
+nav > a:hover
+{
+	opacity: .5;
+}
+nav > a 
+{
+	font-size: 75px;
+	text-decoration: none;
+	text-align: center;
+	margin: 20px;
+	display: block;
+	transition: opacity 500ms;
+}
+span.warning, span.message 
+{
+	text-align: center; 
+	padding: 3px 5px 3px 10px; 
+	display: inline-block; 
+	border-radius: 3px;
+}
+span.warning {background-color: rgba(200,0,0,.5);}
+span.message {background-color: rgba(0,200,0,.5);}
+span.contrast {color: white;}
+body{background-image: url('../img/watercolor.png');}
+main 
+{
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-around;
+}
+section
+{
+	flex-basis: 30%;
+	padding: 20px;
+	margin: 5px;
+	border: 1px solid #777;
+	background-color: mediumpurple;
+	color: black;
+	border-radius: 5px;
+	box-shadow: 0 8px 6px -6px black;
+}
+h3
+{
+	margin-bottom: 15px;
+}
+li 
+{
+	letter-spacing: 2px;
+	margin: 5px;
+	margin-left: 25px;
+}
+
+
+input, select
+{
+	padding: 8px;
+	margin: 5px auto;
+	height: 50px;
+	font-size: 25px;
+	display: inline-block;
+}
+select
+{
+	padding: 0
+}
+form h2 
+{
+	text-align: center;
+	margin: 10px auto;
+	font-size: 30px;
+	margin-bottom: 50px;
+}
+form 
+{
+	display: block;
+	min-height: 400px;
+	margin: 20px auto;
+	background-color: lavender;
+	padding: 20px;
+	border-radius: 8px;
+}
+p.warning {text-align: center; margin: 20px auto; padding: 10px; background-color: rgba(150,0,0,.5); width: 75%; border-radius: 8px; color: white; font-size: 25px;}