Updated design of ACRobbery, still non-functional

ACRobberies/ACRobberies.css

@@ -16,15 +16,14 @@ body {
   justify-content: center;
   margin: 2% auto;
   width: 600px;
-  height: 750px;
+  height: 670px;
 }
 
 .info-container {
   display: flex;
   align-items: center;
   gap: 15px;
-  margin-top: -50px;
-  margin-left: -100px;
+  margin-left: -140px;
 }
 
 .fa-gamepad {
@@ -35,7 +34,7 @@ body {
 .info-container h2 {
   font-size: 25px;
   color: rgb(84, 255, 164);
-  text-shadow: 0 0 2px rgb(127, 255, 191);
+  text-shadow: 0 0 2.1px rgb(127, 255, 191);
 }
 
 .info-container p {
@@ -60,25 +59,29 @@ body {
   justify-content: center;
   width: 580px;
   height: 580px;
-  margin-top: 20px;
   background-color: rgb(22, 40, 52);
   display: flex;
 }
 
 .lock-container {
   display: grid;
-  grid-template-columns: repeat(5, 115px);
-  grid-template-rows: repeat(5, 115px);
+  grid-template-columns: repeat(5, 1fr);
+  grid-template-rows: repeat(5, 1fr);
   width: 580px;
   height: 580px;
 }
 
 .timer-container {
-  background-color: rgb(15, 27, 33);
-  display: flex;
-  width: 100%;
-  height: 10px;
-}
+    background-color: rgb(15, 27, 33);
+    display: flex;
+    width: 100%;
+    height: 10px;
+    margin-top: auto;
+    overflow: hidden;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+  }
+
 
 .timer-progress-bar {
   bottom: 100px;
@@ -99,8 +102,9 @@ body {
 
 .lose-message {
   gap: 10px;
-  margin-top: -40px;
-  margin-left: 340px;
+  margin-top: -50px;
+  margin-bottom: 20px;
+  margin-left: 440px;
   display: none;
   color: white;
   padding: 0px 18px;
@@ -112,8 +116,9 @@ body {
 
 .win-message {
   gap: 10px;
-  margin-top: -40px;
-  margin-left: 340px;
+  margin-top: -50px;
+  margin-bottom: 20px;
+  margin-left: 440px;
   display: none;
   color: white;
   padding: 0px 10px;
@@ -125,25 +130,39 @@ body {
 
 .lose-message p,
 .win-message p {
-  font-size: 12px;
+  font-size: 10.5px;
   font-weight: 500;
 }
 
 .cube {
-  width: 115px;
-  height: 115px;
-  border: 1px solid #fff;
+  width: 110px;
+  height: 105px;
+  border: 1.5px solid #fff;  
+  background:
+  linear-gradient(to right, rgba(255, 255, 255, 0.525) 1px, transparent 1px) 2px 2px,
+  linear-gradient(to right, rgba(255, 255, 255, 0.525) 1px, transparent 1px) 2px calc(100% - 2px),
+  linear-gradient(to left, rgba(255, 255, 255, 0.525) 1px, transparent 1px) calc(100% - 2px) 2px,
+  linear-gradient(to left, rgba(255, 255, 255, 0.525) 1px, transparent 1px) calc(100% - 2px) calc(100% - 2px),
+  linear-gradient(to bottom, rgba(255, 255, 255, 0.525)1px, transparent 1px) 2px 2px,
+  linear-gradient(to bottom, rgba(255, 255, 255, 0.525) 1px, transparent 1px) calc(100% - 2px) 2px,
+  linear-gradient(to top, rgba(255, 255, 255, 0.525) 1px, transparent 1px) 2px calc(100% - 2px),
+  linear-gradient(to top, rgba(255, 255, 255, 0.525) 1px, transparent 1px) calc(100% - 2px) calc(100% - 2px);
+  background-repeat: no-repeat;
+  background-size: 22px 22px;
   z-index: 2;
 }
 
 .cuber {
-  background-color: var(--cube-color-red, red);
+  background-color: var(--cube-color-red, rgb(222, 28, 28));
+  box-shadow: 0px 5px 0px var(--cube-color-red-shadow, rgb(96, 35, 34));
 }
 
 .cubeg {
-  background-color: var(--cube-color-green, green);
+  background-color: var(--cube-color-green, rgb(132, 186, 80));
+    box-shadow: 0px 5px 0px var(--cube-color-green-shadow, rgb(79, 122, 59));
 }
 
 .cubeb {
-  background-color: var(--cube-color-blue, blue);
+  background-color: var(--cube-color-blue, rgb(90, 149, 192));
+  box-shadow: 0px 5px 0px var(--cube-color-blue-shadow, rgb(40, 71, 86));
 }