Make styling work better in portrait views

static/sexy.css

@@ -131,6 +131,9 @@ a:hover {
 	flex-direction: row;
 	justify-content: center;
 	flex-wrap: wrap;
+	position: static;
+	top: 0%;
+	max-height: 60%;
 }
 
 
@@ -142,11 +145,22 @@ a:hover {
 .game-button {
 	user-select: none;
 	position: relative;
-	width: 40vh;
 	transition: 0.2s;
 	transform: scale(1, 1);
 }
 
+@media (max-aspect-ratio: 1/1) {
+	.game-button .game-logo {
+		width: 40vw;
+	}
+}
+
+@media (min-aspect-ratio: 1/1) {
+	.game-button .game-logo {
+		width: 40vh;
+	}
+}
+
 #game-button-stroll {
 	animation: fadein 1s;
 }
@@ -164,7 +178,6 @@ a:hover {
 }
 
 .game-logo {
-	width: 40vh;
 	opacity: 0.5;
 	transition: 0.2s;
 }
@@ -181,7 +194,6 @@ a:hover {
 .game-title {
 	position: absolute;
 	color: red;
-	font-size: 9vh;
 	left: 50%;
 	top: 50%;
 	transform: translate(-50%, -50%) scale(1, 1);
@@ -189,29 +201,57 @@ a:hover {
 	font-family: 'Source Code Pro';
 }
 
+@media (max-aspect-ratio: 1/1) {
+	.game-title {
+		font-size: 6vh;
+	}
+}
+
+@media (min-aspect-ratio: 1/1) {
+	.game-title {
+		font-size: 9vh;
+	}
+}
+
 .game-button:hover > .game-title {
-	font-size: 10vh;
-	transform: translate(-50%, -50%) scale(1, 1);
+	transform: translate(-50%, -50%) scale(1.25, 1.25);
 	transition: 0.4s ease-out;
 }
 
 .game-description {
+	width: 80%;
 	display: none;
 	position: fixed;
 	left: 50%;
-	top: 80%;
 	transform: translate(-50%, 0);
 	font-size: 48px;
 	color: gray;
 	font-family: 'Source Code Pro', monospace;
 }
 
+@media (max-aspect-ratio: 1/1) {
+	.game-title {
+		font-size: 6vh;
+	}
+	.game-description {
+		bottom: 10%;
+	}
+}
+
+@media (min-aspect-ratio: 1/1) {
+	.game-title {
+		font-size: 9vh;
+	}
+	.game-description {
+		bottom: 10%;
+	}
+}
+
 .game-button:hover + .game-description {
 	display: inline;
 }
 
 .title {
-	font-size: 100px;
 	color: gray;
 	position: fixed;
 	left: 50%;
@@ -220,6 +260,20 @@ a:hover {
 	font-family: 'Source Code Pro', monospace;
 }
 
+@media (max-aspect-ratio: 1/1) {
+	.title {
+		font-size: 10vh;
+		top: 5%;
+	}
+}
+
+@media (min-aspect-ratio: 1/1) {
+	.title {
+		font-size: 10vh;
+		top: 10%;
+	}
+}
+
 .switcher {
 	text-align: center;
 	background-color: pink;