Update style.css

Author: michal92299

style.css

@@ -2,48 +2,84 @@ body {
     margin: 0;
     padding: 0;
     background: transparent;
-    font-family: Arial, sans-serif;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    color: #FFFFFF;
+    overflow: hidden;
 }
 
-.overlay {
-    background-color: rgba(128, 128, 128, 0.8); /* Gray semi-transparent */
-    color: #000000; /* Black text */
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-    width: 360px;
-    text-align: left;
+.overlay-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
 }
 
-h1 {
-    font-size: 20px;
-    margin-bottom: 15px;
-    color: #FFFFFF; /* White for accent */
-    text-align: center;
+.overlay-top-left, .overlay-top-right, .overlay-bottom-left, .overlay-bottom-right, .overlay-center {
+    position: absolute;
+    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black */
+    padding: 15px;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
+    transition: opacity 0.3s ease-in-out;
+    opacity: 0.9;
 }
 
-.stats {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 10px;
+.overlay-top-left {
+    top: 20px;
+    left: 20px;
+    width: 250px;
 }
 
-.stat {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background-color: rgba(0, 0, 0, 0.2); /* Darker gray for stats */
-    padding: 8px;
-    border-radius: 5px;
-    color: #FFFFFF; /* White text for stats */
+.overlay-top-right {
+    top: 20px;
+    right: 20px;
+    width: 250px;
 }
 
-label {
-    font-weight: bold;
+.overlay-bottom-left {
+    bottom: 20px;
+    left: 20px;
+    width: 250px;
+}
+
+.overlay-bottom-right {
+    bottom: 20px;
+    right: 20px;
+    width: 250px;
+}
+
+.overlay-center {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    width: 400px;
+    background-color: rgba(128, 128, 128, 0.8); /* Gray */
+}
+
+h1 {
+    font-size: 24px;
+    margin-bottom: 20px;
     color: #FFFFFF;
+    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
+}
+
+h2 {
+    font-size: 18px;
+    margin-bottom: 10px;
+    color: #D3D3D3; /* Light gray */
 }
 
-span {
+p {
     font-size: 14px;
+    margin: 5px 0;
     color: #FFFFFF;
 }
+
+canvas {
+    margin: 10px 0;
+    background-color: rgba(0, 0, 0, 0.3);
+    border-radius: 5px;
+}