fixed check boxes

src/main/resources/static/css/explore.css

@@ -25,12 +25,20 @@
   font-style: normal;
 }
 
+/* body, html { */
+/*   height: 100vh; */
+/*   margin: 0; */
+/*   font-family: 'Mali', cursive; */
+/*   background-color: var(--pale-yellow); */
+/*   overflow: clip; */
+/* } */
+
 body, html {
   height: 100vh;
   margin: 0;
   font-family: 'Mali', cursive;
   background-color: var(--pale-yellow);
-  overflow: clip;
+  overflow: hidden;
 }
 
 /* =========================
@@ -199,22 +207,47 @@ body, html {
   color: var(--dusty-red-hover);
   font-size: 0.9em;
   margin: 8px 0 10px;
+  
 }
 
 #filter-form label {
   display: flex;
   align-items: center;
   gap: 4px;
-  font-size: 0.75em;
+  font-size: 0.9em;
   color: var(--dusty-red);
-  margin-bottom: 4px;
+  margin-bottom: 10px;
+  align-self: flex-start;
+  justify-content: flex-start;
+  
 }
 
 #filter-form input[type="checkbox"] {
-  accent-color: var(--dusty-red);
-  width: 16px;
-  height: 16px;
+  appearance: none;
+  -webkit-appearance: none;
+  width: 24px;
+  height: 24px;
+  border: 3px solid var(--dusty-red);
+  border-radius: 3px;
+  background: var(--pale-yellow);
   cursor: pointer;
+  position: relative;
+}
+
+#filter-form input[type="checkbox"]:checked {
+  background: var(--dusty-red);
+}
+
+#filter-form input[type="checkbox"]:checked::after {
+  content: "✔";
+  position: absolute;
+  color: var(--pale-yellow);
+  font-size: 20px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-family: 'Delius Swash Caps', cursive;;
+  font-weight: 400;
 }
 
 /* =========================
@@ -227,9 +260,12 @@ body, html {
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
-  overflow: auto;
+/*   overflow: auto; */
   scrollbar-color: var(--dusty-red) var(--pale-yellow);
-  height: auto;
+/*   height: auto; */
+  height: calc(100vh - 40px); /* subtract header height */
+  overflow-y: auto;
+  padding-bottom: 40px;
 }
 
 
@@ -375,6 +411,7 @@ input[type="search"]::-webkit-search-cancel-button {
   overflow-y: auto;
   flex: 1;
   scrollbar-color: var(--dusty-red) var(--pale-yellow);
+  padding-bottom: 80px;
 }
 
 
@@ -448,4 +485,4 @@ a {
 .card-right {
   flex-shrink: 0;
   width: 50%;
-}
+}