new 1300px breakpoint for css media queries when displaying the navigation to fix overlap

Author: chrisweb

app/global.css

@@ -418,7 +418,7 @@ h6 {
     height: auto;
 }
 
-@media all and (max-width: 768px) {
+@media all and (max-width: 1120px) {
     .animatedEmoji {
         width: 24px;
     }

app/layout.module.css

@@ -8,7 +8,7 @@
     overflow: hidden;
 }
 
-@media all and (max-width: 1120px) {
+@media all and (max-width: 1300px) {
 
     .layoutHeader {
         padding-top: var(--header-navbar-height);

components/header/navigation.module.css

@@ -30,7 +30,7 @@
     height: var(--header-navbar-height);
 }
 
-@media all and (max-width: 1120px) {
+@media all and (max-width: 1300px) {
 
     .layoutNavbarContainer {
         height: 85vh;
@@ -80,7 +80,7 @@
 }
 
 /* experimental: p3 colors */
-@media all and (max-width: 1120px) and (color-gamut: p3) {
+@media all and (max-width: 1300px) and (color-gamut: p3) {
 
     @keyframes moveDown {
         from {
@@ -183,7 +183,7 @@
     width: 48px;
 }
 
-@media all and (max-width: 1120px) {
+@media all and (max-width: 1300px) {
 
     .hamburger {
         display: flex;

components/neonRoad/start/screen.module.css

@@ -9,6 +9,14 @@
     z-index: 30;
 }
 
+@media all and (max-width: 1300px) {
+
+    .playContainer {
+        top: calc(var(--header-navbar-height) + (var(--main-spacing) / 4));
+    }
+
+}
+
 @media all and (max-width: 1120px) {
 
     .playContainer {