[Design] Add Title, Buttons.

scss/index.scss

@@ -1,17 +1,12 @@
 $cloud_width: 200px;
 
+@import 'fonts';
+
 body {
 	margin: 0;
 	padding: 0;
-	.top {
-		background-image: linear-gradient(#24d3ff, #aaeeff);
-		height: 70vh;
-	}
 
-	.bottom {
-		background-image: linear-gradient(#26a4c4, #afdde9);
-		height: 30vh;
-	}
+	@include body-font;
 	.clouds {
 		position: absolute;
 		width: $cloud_width;
@@ -33,8 +28,65 @@ body {
 		animation-duration: 15s;
 		transform: rotateY(180deg);
 	}
+	.top {
+		background-image: linear-gradient(#24d3ff, #aaeeff);
+		min-height: 70vh;
+		display: flex;
+		align-items: end;
+		.wrapper {
+			height: 100%;
+			align-items: flex-end;
+			padding-bottom: 3em;
+		}
+	}
+
+	.bottom {
+		background-image: linear-gradient(#26a4c4, #afdde9);
+		min-height: 30vh;
+		.wrapper {
+			align-items: flex-start;
+			padding-top: 3em;
+			.content {
+				display: flex;
+				width: 100%;
+				justify-content: space-evenly;
+				.button {
+					font-size: 1.5em;
+					color: #000;
+					padding: 1em;
+					border-color: #000;
+					border-width: 3px;
+					border-style: solid;
+					border-radius: 1.5em;
+					text-decoration: none;
+				}
+				.button:hover, .button:active {
+					background-color: #000;
+					color: #FFF;
+				}
+			}
+		}
+	}
+	.wrapper {
+		position: relative;
+		width: 100vw;
+		box-sizing: border-box;
+		z-index: 100;
+		display: flex;
+		justify-content: center;
+		.content {
+			box-sizing: border-box;
+			max-width: 800px;
+			width: 80%;
+		}
+	}
 }
 
+h1 {
+	@include title-font;
+	font-size: 4em;
+	text-align: center;
+}
 
 
 @keyframes move_right {