Merge remote-tracking branch 'origin/main'

# Conflicts:
#	templates/calculator.html

static/style.css

@@ -1,3 +1,7 @@
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
 input[type="text"] {
     width: 100%;
     padding: 8px;
@@ -8,19 +12,18 @@ input[type="text"] {
 
 #modifiers-container {
     display: flex;
-    justify-content: space-between; /* Distribute space between the items */
-    flex-wrap: wrap; /* Allow wrapping to avoid overflow */
+    justify-content: space-between;
+    flex-wrap: wrap;
 }
 
-/* Style for the modifiers section */
 #modifiers {
-    display: flex; /* Use flexbox for alignment */
-    flex-direction: column; /* Stack items vertically */
+    display: flex;
+    flex-direction: column;
     width: 50%;
 }
 
 #abilities {
-    width: 42.5%; /* Adjust this value as needed */
+    width: 42.5%;
 }
 
 body {
@@ -29,7 +32,7 @@ body {
     background-attachment: fixed;
     background-size: cover;
     position: relative;
-    z-index: -1; /* Send the background behind the content */
+    z-index: -1;
     font-family: Arial, sans-serif;
     margin: 20px;
 }
@@ -105,7 +108,7 @@ input {
 }
 
 #search {
-    width: 33%;
+    width: 100%;
     padding: 6px;
     border: 2px black solid;
     margin-top: 8px;
@@ -136,17 +139,15 @@ nav {
     width: 80%
 }
 
-/* Add a black background color to the top navigation */
 .topnav {
     position: absolute;
     right: 50px;
     top: 10px;
     background-color: #333;
-    overflow: visible; /* Ensure dropdown content isn't clipped */
-    z-index: 1000; /* Higher z-index to appear above other content */
+    overflow: visible;
+    z-index: 1000;
 }
 
-/* Style the links inside the navigation bar */
 .topnav a {
     color: #f2f2f2;
     text-align: center;
@@ -154,7 +155,6 @@ nav {
     font-size: 17px;
 }
 
-/* Style the dropdown button */
 .dropdown .dropbtn {
     font-size: 17px;
     border: none;
@@ -165,20 +165,18 @@ nav {
     cursor: pointer;
 }
 
-/* Dropdown content */
 .dropdown-content {
     display: none;
     position: absolute;
     background-color: #f9f9f9;
     min-width: 160px;
     box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-    right: 0; /* Ensures dropdown aligns with the button */
-    z-index: 2000; /* Ensures it stays above the rest */
+    right: 0;
+    z-index: 2000;
 }
 
-/* Style the links inside the dropdown */
 .dropdown-content a {
-    float: none; /* Ensure the links stack properly */
+    float: none;
     color: black;
     padding: 12px 16px;
     text-decoration: none;
@@ -186,24 +184,20 @@ nav {
     text-align: left;
 }
 
-/* Add a dark background on hover */
 .topnav a:hover, .dropdown:hover .dropbtn {
     background-color: #555;
     color: white;
 }
 
-/* Add a grey background to dropdown links on hover */
 .dropdown-content a:hover {
     background-color: #ddd;
     color: black;
 }
 
-/* Show the dropdown when the button is clicked */
 .dropdown.show .dropdown-content {
-    display: block; /* Toggle visibility */
+    display: block;
 }
 
-/* Media query for smaller screens */
 @media screen and (max-width: 600px) {
     .topnav {
         right: 0;
@@ -223,7 +217,6 @@ nav {
     }
 }
 
-/* Hide the icon on larger screens */
 .topnav .icon {
     display: none;
 }
@@ -234,7 +227,6 @@ nav {
     overflow: auto;
 }
 
-/* Show the icon only on smaller screens */
 @media screen and (max-width: 600px) {
     #search {
         width: 100%
@@ -255,7 +247,6 @@ nav {
     background-color: black;
 }
 
-/* Suggestion Form Enhancements */
 main h1 {
     font-size: 2.5em;
     color: black;
@@ -289,7 +280,6 @@ input[type="text"], input[type="number"], textarea {
     transition: border-color 0.3s, box-shadow 0.3s;
 }
 
-/* Focus effect to highlight the active input field */
 input[type="text"]:focus, input[type="number"]:focus, textarea:focus {
     border-color: black;
     box-shadow: 0 0 5px darkred;
@@ -302,7 +292,6 @@ textarea {
     height: 150px;
 }
 
-/* Submit button improvements */
 .button1 {
     background-color: darkred;
     color: white;
@@ -316,13 +305,11 @@ textarea {
     transition: background-color 0.3s ease, transform 0.3s ease;
 }
 
-/* Button hover effect */
 .button1:hover {
     background-color: red;
     transform: scale(1.05);
 }
 
-/* Success message styling */
 #successMessage {
     font-size: 1.1em;
     color: green;
@@ -445,10 +432,11 @@ textarea {
     flex-direction: column;
     padding: 4rem 1.5rem;
     gap: 1.5rem;
-  box-shadow: -4px 0 8px rgba(0,0,0,0.1);
+    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.1);
     transition: right 0.3s ease;
     z-index: 1500;
 }
+
 .nav-menu a {
     color: #333;
     text-decoration: none;
@@ -463,3 +451,43 @@ textarea {
 body.menu-open {
     overflow: hidden;
 }
+
+.select-wrapper {
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.select-wrapper > input[type="text"],
+.select-wrapper > select {
+  width: 100%;
+  padding: 8px 12px;
+  font-size: 16px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  background-color: #f9f9f9;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: border-color 0.3s, box-shadow 0.3s;
+}
+
+.select-wrapper > select {
+  background-image: url("data:image/svg+xml;utf8,\
+    <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23666' viewBox='0 0 24 24'>\
+      <path d='M7 10l5 5 5-5z'/>\
+    </svg>");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  background-size: 1em;
+}
+
+.select-wrapper > input[type="text"]:focus,
+.select-wrapper > select:focus {
+  outline: none;
+  border-color: darkred;
+  box-shadow: 0 0 5px rgba(139, 0, 0, 0.5);
+}
+
+.select-wrapper > input[type="text"]::placeholder {
+  color: #888;
+}