Improve the mobile experience a bit

1 files changed, 100 insertions, 8 deletions

diff --git a/src/style.css b/src/style.css
index a3ebc45..3e14f98 100644
--- a/src/style.css
+++ b/src/style.css
@@ -74,18 +74,34 @@ nav a:link, nav a:visited {
 }
 
 nav ul {
-	align-items: center;
 	background-color: var(--secondary-color);
 	border-bottom: 1px solid white;
 	display: flex;
-	font-size: 1.5rem;
-	justify-content: space-around;
+	font-size: 1.2rem;
 	list-style: none;
 	margin: 0;
 	padding: 0;
 	z-index: 69;
 }
 
+@media only screen and (min-width: 1000px) {
+	nav ul {
+		font-size: 1.2rem;
+	}
+}
+
+@media only screen and (min-width: 1400px) {
+	nav ul {
+		font-size: 1.4rem;
+	}
+}
+
+@media only screen and (min-width: 1800px) {
+	nav ul {
+		font-size: 1.5rem;
+	}
+}
+
 nav ul ul {
 	border-left: 1px solid white;
 	display: none;
@@ -120,6 +136,7 @@ nav li {
 nav li a, nav li div, nav li label {
 	display: flex;
 	justify-content: center;
+	align-items: center;
 	height: 100%;
 	padding: 12px;
 }
@@ -160,7 +177,25 @@ p {
 	text-align: justify;
 	font-size: 1.5rem;
 	line-height: 2.5rem;
-	width: 50%;
+	width: 95%;
+}
+
+@media only screen and (min-width: 1000px) {
+	p {
+		width: 75%;
+	}
+}
+
+@media only screen and (min-width: 1400px) {
+	p {
+		width: 65%;
+	}
+}
+
+@media only screen and (min-width: 1800px) {
+	p {
+		width: 50%;
+	}
 }
 
 main {
@@ -263,10 +298,28 @@ main section {
 
 .c-section h2 {
 	font-size: 2rem;
-	width: 50%;
+	width: 95%;
 	text-align: left;
 }
 
+@media only screen and (min-width: 1000px) {
+	.c-section h2 {
+		width: 75%;
+	}
+}
+
+@media only screen and (min-width: 1400px) {
+	.c-section h2 {
+		width: 65%;
+	}
+}
+
+@media only screen and (min-width: 1800px) {
+	.c-section h2 {
+		width: 50%;
+	}
+}
+
 .c-section img {
 	position: absolute;
 	height: 450px;
@@ -321,7 +374,25 @@ main section {
 	background-color: var(--tertiary-color);
 	border-radius: 16px;
 	border-spacing: 0;
-	width: 50%;
+	width: 95%;
+}
+
+@media only screen and (min-width: 1000px) {
+	.country-table {
+		width: 75%;
+	}
+}
+
+@media only screen and (min-width: 1400px) {
+	.country-table {
+		width: 65%;
+	}
+}
+
+@media only screen and (min-width: 1800px) {
+	.country-table {
+		width: 50%;
+	}
 }
 
 .country-table td {
@@ -357,12 +428,12 @@ main section {
 }
 
 .coin-table {
-	width: calc(50% + 32px);
+	width: calc(95% + 32px);
 	white-space: nowrap;
 	max-width: 100%;
 	text-align: center;
 	table-layout: fixed;
-	font-size: 1.5rem;
+	font-size: 1rem;
 	background-color: var(--secondary-darker-color);
 	border-radius: 16px;
 	border-left: 16px solid var(--secondary-darker-color);
@@ -370,6 +441,27 @@ main section {
 	border-bottom: 16px solid var(--secondary-darker-color);
 }
 
+@media only screen and (min-width: 1000px) {
+	.coin-table {
+		width: calc(75% + 32px);
+		font-size: 1.2rem;
+	}
+}
+
+@media only screen and (min-width: 1400px) {
+	.coin-table {
+		width: calc(65% + 32px);
+		font-size: 1.4rem;
+	}
+}
+
+@media only screen and (min-width: 1800px) {
+	.coin-table {
+		width: calc(50% + 32px);
+		font-size: 1.5rem;
+	}
+}
+
 .coin-table .first-design th {
 	border-radius: 0;
 }