[Design] Update footer. Refactor SCSS. More responsive on mobile.

scss/index.scss

@@ -1,4 +1,6 @@
 $cloud_width: 200px;
+$top-height: 70vh;
+$top-height-phone: 64vh;
 
 @import 'fonts';
 
@@ -35,11 +37,11 @@ body {
 	}
 	.top {
 		background-image: linear-gradient(#24d3ff, #aaeeff);
-		min-height: 70vh;
+		min-height: $top-height;
 		display: flex;
 		align-items: end;
 		.wrapper {
-			min-height: 70vh;
+			min-height: $top-height;
 			align-items: flex-end;
 			padding-bottom: 2em;
 			.player {
@@ -53,14 +55,19 @@ body {
 					border-radius: 2em;
 				}
 			}
+			.shownotes {
+				padding: 1em;
+				margin: auto;
+				width: 80%;
+			}
 		}
 	}
 
 	.bottom {
 		background-image: linear-gradient(#26a4c4, #afdde9);
-		min-height: 30vh;
+		min-height: 100vh - $top-height;
 		.wrapper {
-			min-height: 30vh;
+			min-height: 100vh - $top-height;
 			align-items: center;
 			justify-content: space-around;
 			flex-direction: column;
@@ -127,14 +134,18 @@ h1 {
 @media (max-width: 600px) {
 	body {
 		.top {
+			min-height: $top-height-phone;
 			.wrapper {
+				min-height: $top-height-phone;
 				.player {
 					width: 100%;
 				}
 			}
 		}
 		.bottom {
+			min-height: 100vh - $top-height-phone;
 			.wrapper {
+				min-height: 100vh - $top-height-phone;
 				.content {
 					.button {
 						font-size: 1em;