added rem in css files

luckydiamond/src/assets/css/PagesStyles/games-pages/crash.css

@@ -2,7 +2,7 @@
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     grid-template-rows: repeat(5, 1fr);
-    gap: 10px;
+    gap: 0.625rem; /* 10px в рем */
     grid-auto-flow: row;
     grid-template-areas:
     "crashgame crashgame crashgame crashgame crashgame crashgame"
@@ -11,9 +11,8 @@
     "crashplayers crashplayers crashplayers crashplayers crashplayers crashplayers"
     "crashplayers crashplayers crashplayers crashplayers crashplayers crashplayers";
     background: #17181C;
-    box-shadow: 0 4px #00000040;
-    border-radius: 20px;
-}
+    box-shadow: 0 0.25rem #00000040;
+    border-radius: 1.25rem;
 
 .grid-crash .chat {
     height: 96.8%;
@@ -21,11 +20,11 @@
 
 .crash-game {
     background: #22252F;
-    border-radius: 20px;
-    box-shadow: 4px 4px 4px 0px #00000040;
+    border-radius: 1.25rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0px #00000040;
     width: 95%;
-    height: 475px;
-    margin: 41px auto 0 auto;
+    height: 29.6875rem;
+    margin: 2.5625rem auto 0 auto;
 }
 
 .crash-game__content {
@@ -211,7 +210,7 @@
     display: flex;
     align-items: center;
     margin: 10px;
-    grid: username;
+    grid: 'username';
 }
 
 .user-name-crash h2 {
@@ -374,7 +373,7 @@
     .line-crash {
         height: 366px;
     }
-}
+}}
 
 /*.crash-game__graph {*/
 /*    width: 800px;*/

luckydiamond/src/assets/css/global.css

@@ -42,7 +42,7 @@ button {
 
 .content-grid {
     display: grid;
-    grid-template-columns: .35fr repeat(5, 1fr) 1fr;
+    grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
     grid-template-rows: auto 0fr repeat(4, 1fr);
     grid-auto-columns: 1fr;
     grid-auto-flow: row;
@@ -54,12 +54,12 @@ button {
     "menu gamemode gamemode gamemode gamemode gamemode chat"
     "menu gamemode gamemode gamemode gamemode gamemode chat";
     height: 100%;
-    grid-gap: 10px;
+    grid-gap: 0.625rem;
 }
 
 .content__grid-profile {
     display: grid;
-    grid-template-columns: .35fr repeat(5, 1fr) 1fr;
+    grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
     grid-template-rows: auto 0fr repeat(4, 1fr);
     grid-auto-columns: 1fr;
     grid-auto-flow: row;
@@ -71,14 +71,14 @@ button {
     "menu profile profile profile profile profile chat"
     "menu profile profile profile profile profile chat"
     "menu profile profile profile profile profile chat";
-    grid-gap: 10px;
+    grid-gap: 0.625rem;
     height: 100%;
 }
 
 .content-grid--saper {
     display: grid;
     grid-auto-columns: 1fr;
-    grid-template-columns: .35fr repeat(5, 1fr) 1fr;
+    grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
     grid-template-rows: auto 0fr repeat(4, 1fr);
     grid-template-areas:
     "menu header header header header header header"
@@ -88,15 +88,15 @@ button {
     "menu saper saper saper saper saper chat"
     "menu saper saper saper saper saper chat"
     "menu saper saper saper saper saper chat";
-    grid-gap: 10px;
+    grid-gap: 0.625rem;
 }
 
 .grid-crash {
     display: grid;
-    grid-template-columns: .35fr repeat(5, 1fr) 1fr;
+    grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
     grid-template-rows: auto 0fr repeat(4, 1fr);
     grid-auto-columns: 1fr;
-    gap: 10px;
+    gap: 0.625rem;
     grid-auto-flow: row;
     grid-template-areas:
     "menu header header header header header header"
@@ -114,9 +114,9 @@ button {
 
 .header {
     grid-area: header;
-    border-radius: 20px;
+    border-radius: 1.25rem;
     background: #17181C;
-    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    box-shadow: 0px 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
     align-self: start;
 }
 
@@ -127,8 +127,8 @@ button {
 .menu {
     grid-area: menu;
     background: #17181C;
-    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
-    border-radius: 20px;
+    box-shadow: 0px 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
+    border-radius: 1.25rem;
     align-self: start;
 }
 
@@ -139,9 +139,9 @@ button {
 .chat {
     grid-area: chat;
     background: #16171B;
-    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+    filter: drop-shadow(0px 0.25rem 0.25rem rgba(0, 0, 0, 0.25));
     border-radius: 0;
-    /* border-radius: 20px; */
+    /* border-radius: 1.25rem; */
     height: 100%;
     position: relative;
     z-index: 3;
@@ -176,10 +176,10 @@ button {
     display: flex;
     grid-area: profile;
     height: 95%;
-    border-radius: 50px;
+    border-radius: 3.125rem;
     background: #17181C;
-    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
-    margin: 10px 39px 18px 13px;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
+    margin: 0.625rem 2.438rem 1.125rem 1.125rem;
 }
 
 /* /Profile */
@@ -211,4 +211,4 @@ button {
 
 /* Media */
 
-/* /Media */
+/* /Media */