visual polish

css/boxes.css

@@ -1,7 +1,12 @@
 .boxes-container {
   border: #4a7c59 1px dotted;
   border-radius: 4px;
+  max-width: 100%;
+  overflow: hidden;
+  padding: 4px;
+  box-sizing: border-box;
 }
+
 .boxes input{
   margin: 0;
   appearance: none;
@@ -11,49 +16,58 @@
   border: none;
   position: relative;
   cursor: pointer;
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 0;
 }
 
-.boxes input[type="checkbox"]:checked {
-  background: transparent;
-}
-
-.boxes input[type="checkbox"]:checked::before {
+.boxes input[type="checkbox"]:checked::before ,
+.boxes input[type="checkbox"]:checked::after {
   content: '';
   position: absolute;
   top: 0;
-  left: 0;
   width: 100%;
   height: 1px;
   background: #4a7c59;
+}
+.boxes input[type="checkbox"]:checked::before {
+  left: 0;
   transform-origin: 0 0;
   transform: rotate(45deg) scaleX(1.414);
 }
 
 .boxes input[type="checkbox"]:checked::after {
-  content: '';
-  position: absolute;
-  top: 0;
   right: 0;
-  width: 100%;
-  height: 1px;
-  background: #4a7c59;
   transform-origin: 100% 0;
   transform: rotate(-45deg) scaleX(1.414);
 }
 
 .boxes{
-  display: grid;
-  grid-template-columns: repeat(32, 1fr); /* 32 equal columns */
-  grid-template-rows: repeat(32, 1fr); /* 32 equal rows */
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  aspect-ratio: 1;
+}
+
+.boxes input {
+  flex: 0 0 3.125%; /* 100% / 32 = 3.125% for 32 columns */
+  aspect-ratio: 1;
+  box-sizing: border-box;
 }
 
 .counter-label {
   color: #4a7c59;
+  margin-bottom: 8px;
 }
 
 .users-container {
   border: #4a7c59 1px dotted;
-  margin-top:50px;
-  color:#4a7c59;
-  font-size: 0.5rem; /* Adjust font size as needed */
+  border-radius: 4px;
+  margin-top: 50px;
+  color: #4a7c59;
+  padding: 16px;
+  max-width: 100%;
+  overflow: hidden;
 }

css/main.css

@@ -33,6 +33,7 @@ nav li {
   list-style: none;
 }
 main{
-  max-width: 800px;
+  max-width: 960px;
   margin: 0 auto;
+  padding: 0 32px;
 }