Update media query

wrapper, menu, center orientation and mobile width

docs/index.css

@@ -1,33 +1,53 @@
 :root {
-  --border-img: rgba(120, 120, 120, .6);
+  --border-img: rgba(120, 120, 120, .6); }
 body {
 }
 header {
 }
 h1 {
-  text-align: center; }
-main {
+  text-align: center; 
 }
+.wrapper {
+    display: grid; }
+menu {  
+  list-style: none;
+  margin: 0;
+  padding: 0; }    
+main { }
 p {
   margin-inline: 2.5%; }
 .p-center {
-  text-align: center; }
+  text-align: center; 
+}
 footer {
   height: 10%;
   background: red;
 }
 .center {
   width: fit-content;
   margin: 3em auto; }
-
 .center img {
   border: 2px solid var(--border-img);
   padding: 2em; }
 .important {
   text-decoration: underline;
   font-weight: 600;}
 @media (orientation: landscape) {
-  body {
-    max-width: 80%;
-    margin-inline: 10%;}
+  .wrapper {
+    grid-template-columns: 20% 1fr;
+    grid-gap: 3rem;
+  }
+  menu {
+    border: 2px solid silver;
+    height: fit-content;
+    display: grid;
+    place-items: center;
   }
+  nav {  }
+}
+@media (width < 38rem) {
+    .center {
+    display: grid;
+    grid-gap: 1rem;
+  }
+}