revamp

index.css

@@ -1,24 +1,31 @@
 :root {
-	--black-2: rgb(54, 23, 23);
-	--black: rgb(105, 41, 41);
-	--gray: rgb(161, 72, 72);
-	--white: rgb(255, 246, 223);
+	--black-3: rgb(177, 177, 177);
+	--black-2: rgb(71, 69, 65);
+	--black: rgb(39, 38, 37);
+	--gray: rgb(31, 30, 28);
+	--white: rgb(255, 251, 241);
 
-	--elem-width: min(800px,90vw);
-	--elem-height: min(800px,90vh);
+	--elem-width: min(1200px, 90vw);
+	--elem-height: min(800px, 90vh);
 
-	--border-radius: 15px;
+	--border-radius: 5px;
 
 	color: var(--white);
 
 	font-family: system-ui, sans-serif;
+
+}
+
+.important {
+
+	font-size: 1.5rem;
 }
 
 body {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	background: var(--black-2);
+	background: var(--black);
 
 	margin-top: 0;
 }
@@ -35,7 +42,8 @@ body {
 	object-fit: cover;
 }
 
-.banner-background, .banner-content {
+.banner-background,
+.banner-content {
 	height: var(--elem-height);
 	overflow-y: auto;
 }
@@ -85,12 +93,21 @@ body {
 .content,
 .form,
 .banner,
-.banner-background {
+.banner-background,
+.path {
 	border: solid var(--gray) 3px;
-    padding: 25px;
-    margin: 25px;
 	border-radius: var(--border-radius);
-	width: var(--elem-width);	
+	width: var(--elem-width);
+
+	background: var(--black-2);
+}
+
+.content,
+.form,
+.banner,
+.banner-background {
+	padding: 25px;
+	margin: 25px;
 }
 
 .form {
@@ -119,15 +136,27 @@ body {
 }
 
 .map {
-    width: var(--elem-height);
-    height: var(--elem-height);
-    background: var(--gray);
-    image-rendering: pixelated; 
-    image-rendering: crisp-edges;
+	width: var(--elem-width);
+	background: var(--gray);
+	image-rendering: pixelated;
+	image-rendering: crisp-edges;
+}
+
+.coords {
+	position: relative;
+	top: calc(var(--elem-width) / -3);
+	left: calc(var(--elem-width) / 2);
+	font-size: 16px;
+	background: rgba(0,0,0,0.5);
+	padding: 10px;
+	width: 250px;
+	margin: 0;
 }
 
 a {
-    color: var(--white);
+	color: inherit;
+	font-weight: bold;
+	text-decoration-thickness: 3px;
 }
 
 h1 {
@@ -135,7 +164,24 @@ h1 {
 	align-items: center;
 }
 
-h1 .form-input{
+h1 .form-input {
 	margin-bottom: 0;
 	margin-left: 10px;
+}
+
+.path {
+	min-height: 200px;
+	display: inline-flex;
+	width: calc(var(--elem-width) / 4.7);
+	min-width: 200px;
+	margin: 10px;
+	background: var(--black-3);
+	color: var(--black-2);
+	padding: 5px;
+	flex-direction: column;
+	align-items: center;
+}
+
+.path img {
+	height: 200px;
 }