add responsive design for phone

static/pywallter.css

@@ -1,4 +1,5 @@
 
+
 body
 {
     display: grid; 
@@ -11,14 +12,12 @@ body
 	"Menu Menu footer footer footer footer footer"
 }
 
-
-header{
-    grid-area: header; 
-    width: 100%;
+.menu-button {
+    visibility: hidden;
 }
 
-body > main {
-    width: 100%;
+header {
+    grid-area: header; 
 }
 
 main
@@ -40,6 +39,74 @@ main > nav
 }
 
 
+
+@media only screen and (max-width: 600px) 
+{
+    body {
+	grid-template-areas:
+	    "header"
+	    "main "
+	    "footer";	
+    }
+
+    .menu-header {
+	font-size: 4vw;
+	width: 20vw;
+	height: 31vw;
+    }
+    
+    .menu-button {
+	visibility: visible;
+    }
+    
+    .hide-menu {
+	grid-template-areas:
+	    "header"
+	    "main "
+	    "footer";
+    }
+
+    .print-menu
+    {
+	grid-template-areas:
+	    "header"
+	    "Menu"
+	    "main"
+	    "main"
+	    "footer";
+    }
+    
+    .print-menu > aside {
+	max-width: unset;
+    }
+
+    aside > nav {
+	margin-left: 30px;
+    }
+    
+    nav ul {
+	display: flex;
+	flex-wrap: wrap;
+	align-content: center;
+	text-align: center;
+	gap: 20px;
+    }
+
+    nav li {
+	word-break: keep-all;
+	width: 115px;
+	height: 100px;
+        
+    }
+    
+    nav .icons {
+	width: 80px;
+	height: 50px;
+    }
+     
+}
+
+
 aside
 {
     grid-area: Menu;
@@ -112,7 +179,6 @@ header > nav {
 }
 
 aside > nav {
-   
     padding-left: 1.5vw;
 }
 
@@ -152,4 +218,3 @@ nav > ul:first-of-type, ul
     color: var(--pico-color-grey-950);
 
 }
-