Fix public/, campi di testo e bottoni

public/style.css

@@ -1,4 +1,4 @@
-/* TODO: Don't use CDN and serve as assets */
+/* TODO: Don't use CDN and serve as static files */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap');
 
 :root {
@@ -332,6 +332,8 @@ h1, h2, h3, h4 {
 
 p {
     margin: 0.5rem 0;
+    width: 70ch;
+    max-width: 100%;
 }
 
 /* Controls */
@@ -347,8 +349,101 @@ a:hover {
     text-decoration: underline;
 }
 
-/* Responsiveness */
+/* Buttons */
 
-@media screen and (max-width: 950px) {
+button, .button {
+  font-family: var(--font-sf);
+  font-weight: var(--font-weight-medium);
+  font-size: 17px;
 
+  background: #278542;
+  border: none;
+  height: 2rem;
+  padding: 0 1rem;
+  
+  border-right: 5px solid #ecc333;
+  position: relative;
+  
+  z-index: 2;
+  color: #111;
+  transition: all 100ms ease-in-out;
+  box-shadow: 0 0 0 0 transparent;
+  cursor: pointer;
 }
+
+button::before, .button::before {
+  position: absolute;
+  content: "";
+  top: -5px;
+  bottom: -5px;
+  background: #278542;
+  width: 100%;
+  left: 0;
+  z-index: -1;
+  border-radius: 2px;
+  transition: all 100ms ease-in-out;
+  -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 5px, black 6px), radial-gradient(circle at top right, transparent 0, transparent 5px, black 6px), radial-gradient(circle at bottom left, transparent 0, transparent 5px, black 6px), radial-gradient(circle at bottom right, transparent 0, transparent 5px, black 6px);
+  -webkit-mask-position: top left, top right, bottom left, bottom right;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: 50% 50%;
+  mask-image: radial-gradient(circle at top left, transparent 0, transparent 5px, black 6px), radial-gradient(circle at top right, transparent 0, transparent 5px, black 6px), radial-gradient(circle at bottom left, transparent 0, transparent 5px, black 6px), radial-gradient(circle at bottom right, transparent 0, transparent 5px, black 6px);
+  mask-position: top left, top right, bottom left, bottom right;
+  mask-repeat: no-repeat;
+  mask-size: 50% 50%;
+}
+
+button:hover, input[type=submit]:hover, .button:hover {
+  color: #f22;
+  box-shadow: 0 4px 13px 0 #00000044;
+}
+
+/* Text Fields */
+
+input[type=text], input[type=password] {
+    border: none;
+    background: none;
+
+    height: 2rem;
+    padding: 0 0.5rem;
+
+    font-size: 17px;
+
+    background: #fff;
+    border-radius: 4px;
+    border: 1px solid var(--bg-darker-2);
+    box-shadow: 0 0 8px 0 #00000020;
+
+    font-family: var(--font-sf);
+    font-size: 17px;
+    font-weight: var(--font-weight-normal);
+}
+
+input[type=password] {
+    font-family: caption;
+}
+
+/* Forms */
+
+.field-set {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    grid-auto-rows: auto;
+
+    gap: 0.5rem;
+    padding: 1rem;
+}
+
+.field-set label {
+    grid-column: 1 / 2;
+}
+
+.field-set input {
+    grid-column: 2 / 3;
+}
+
+.field-set .alone {
+    grid-column: 1 / 3;
+    place-self: center;
+
+    margin-top: 1rem;
+}