diff --git a/scss/index.scss b/scss/index.scss
index 1dc7d8f..0ba124d 100644
--- a/scss/index.scss
+++ b/scss/index.scss
@@ -44,7 +44,7 @@ body {
 	}
 	.bottom_bg {
 		background-image: linear-gradient(#26a4c4, #afdde9);
-		height: 100 - $top-height;
+		height: 100vh - $top-height;
 		width: 100vw;
 		position: fixed;
 		top: $top-height;
@@ -77,11 +77,12 @@ body {
 	}
 
 	.bottom {
-		min-height: 100vh - $top-height;
+		min-height: 95vh - $top-height;
+		margin-bottom: 5vh;
 		.wrapper {
-			min-height: 100vh - $top-height;
+			min-height: 95vh - $top-height;
 			align-items: center;
-			justify-content: space-around;
+			justify-content: space-between;
 			flex-direction: column;
 			padding-top: 2em;
 			height: 100%;
@@ -100,6 +101,7 @@ body {
 					text-decoration: none;
 				}
 				.button:hover, .button:active {
+					transition-duration: 0.4s;
 					background-color: #000;
 					color: #FFF;
 				}
@@ -145,6 +147,13 @@ h1 {
 
 @media (max-width: 600px) {
 	body {
+		.top_bg {
+			height: $top-height-phone;
+		}
+		.bottom_bg {
+			height: 100vh - $top-height-phone;
+			top: $top-height-phone;
+		}
 		.top {
 			min-height: $top-height-phone;
 			.wrapper {
@@ -159,9 +168,9 @@ h1 {
 			}
 		}
 		.bottom {
-			min-height: 100vh - $top-height-phone;
+			min-height: 95vh - $top-height-phone;
 			.wrapper {
-				min-height: 100vh - $top-height-phone;
+				min-height: 95vh - $top-height-phone;
 				.content {
 					.button {
 						font-size: 1em;