[Design] Integrate plyr.io

scss/index.scss

@@ -9,6 +9,7 @@ $cloud_width: 200px;
 body {
 	margin: 0;
 	padding: 0;
+	overflow-x: hidden;
 
 	@include body-font;
 	.clouds {
@@ -40,7 +41,18 @@ body {
 		.wrapper {
 			min-height: 70vh;
 			align-items: flex-end;
-			padding-bottom: 3em;
+			padding-bottom: 2em;
+			.player {
+				margin: auto;
+				width: 80%;
+				.plyr {
+					border-radius: 3em;
+					border-color: #000;
+					border-width: 4px;
+					border-style: solid;
+					border-radius: 2em;
+				}
+			}
 		}
 	}
 
@@ -52,7 +64,7 @@ body {
 			align-items: center;
 			justify-content: space-around;
 			flex-direction: column;
-			padding-top: 3em;
+			padding-top: 2em;
 			height: 100%;
 			.content {
 				display: flex;
@@ -114,6 +126,13 @@ h1 {
 
 @media (max-width: 600px) {
 	body {
+		.top {
+			.wrapper {
+				.player {
+					width: 100%;
+				}
+			}
+		}
 		.bottom {
 			.wrapper {
 				.content {
@@ -125,6 +144,9 @@ h1 {
 			}
 		}
 	}
+	h1 {
+		font-size: 3em;
+	}
 }