diff --git a/src/components/Banner.vue b/src/components/Banner.vue
index 35d16e8..482e7a1 100644
--- a/src/components/Banner.vue
+++ b/src/components/Banner.vue
@@ -63,6 +63,7 @@
 
 	$mq-noresize: 1250px;
 	$mq-noicon: 940px;
+	$mq-resize: 697px;
 
 	#banner {
 		flex: #{$banner-size + $wave-height*1.5} 0 0;
@@ -80,6 +81,7 @@
 		align-items: stretch;
 
 		color: #fff;
+		font-size: 1rem;
 		font-family: 'Roboto';
 		font-weight: 300;
 		white-space: nowrap;
@@ -190,7 +192,7 @@
 				color: rgba(#fff, .7);
 
 				span {
-					margin: 0 2rem;
+					margin: 0 2em;
 				}
 			}
 
@@ -198,7 +200,7 @@
 				display: block;
 				position: relative;
 
-				font-size: 5rem;
+				font-size: 5em;
 
 				.lastname {
 					font-weight: 100;
@@ -228,4 +230,11 @@
 			padding: 0 calc( 50% - #{$mq-noresize/2} );
 		}
 	}
+
+	// shring text forever
+	@media screen and (max-width: $mq-resize){
+		#banner {
+			font-size: 2vw;
+		}
+	}
 </style>